Getting correct display links on icons in a Shiraz macro

Plugins
#1

Hello everyone.

I’m doing some tests using the macros that come in Shiraz, by Mohammad, and I can’t get them to work well for me, although I don’t think it’s because of a failure, but rather because I’m not doing something right. Specifically, they are the Cards and Alerts macros that come within the Shiraz plugin. I want icons that function as links to be displayed within those color rectangles that macros make, the thing is that I can’t get them to work at all.

The first macro I use is from cards and I have written it as follows:

<<card text:"<a href="https://twitter.com/TiddlyWiki"  target="_blank" rel="noopener noreferrer">
@@fill:blue;{{$:/core/images/twitter}}@@</a>" width:"50rem" class:"bg-secondary border-primary text-white">>

In this case the Twitter icon is not shown to me and also the box overflows the tiddler.

The next macro I use is this:

<<alert dark "<a href="https://twitter.com/TiddlyWiki"  target="_blank" rel="noopener noreferrer">
@@fill:blue;{{$:/core/images/twitter}}@@</a>" width:80%>>

In this case what I get is “<a href=”

Finally I have tried to put inside text:"" a table with invisible borders and I can’t get it to show up either. Do I have to put the code of said table between some parameter? This is the code I use:

<<card 
header:"Featured Card"
title:"Dark title card"
text:"
<table class="table-borderless source">
<tr><td>{{$:/images/boxicons/logos/bxl-facebook-square}}</td><td>---</td><td>{{$:/images/boxicons/logos/bxl-twitter}}</td><td>---</td><td>{{$:/images/boxicons/logos/bxl-instagram}}</td><td>---</td></tr>
<tr><td>{{$:/images/boxicons/logos/bxl-linkedin-square}}</td><td>---</td><td>{{$:/images/svg-icon/youtube}}</td><td>---</td><td>{{$:/images/font-awesome/brands/tiktok}}</td><td>---</td></tr>
</table>"
footer:"Created a month ago"
width:50%
class:"text-center"
>>

Is it possible to do what I’m trying?

Thanks.

#2

Let us ask @Mohammad if he is available.

#3

It seems your double quote is not balanced! See your first example!

<<card 
text:"""<a href="https://twitter.com/TiddlyWiki"  target="_blank" rel="noopener noreferrer">@@fill:blue;{{$:/core/images/twitter}}@@</a>""" 
width:"50rem"
class:"bg-secondary border-primary text-white"
>>

Note, your Twitter icon is a little big, not related to TW!

#4

I would recommend to be more generous and use a more readable WikiText. One way is to separate the table as below and use $macrocall to call your macro. See https://tiddlywiki.com

Here is your modified example

\define mytable()
<table class="table-borderless source">
<tr><td>{{$:/images/boxicons/logos/bxl-facebook-square}}</td><td>---</td><td>{{$:/images/boxicons/logos/bxl-twitter}}</td><td>---</td><td>{{$:/images/boxicons/logos/bxl-instagram}}</td><td>---</td></tr>
<tr><td>{{$:/images/boxicons/logos/bxl-linkedin-square}}</td><td>---</td><td>{{$:/images/svg-icon/youtube}}</td><td>---</td><td>{{$:/images/font-awesome/brands/tiktok}}</td><td>---</td></tr>
</table>
\end

<$macrocall $name=card
  header="Featured Card"
  title="Dark title card"
  text=<<mytable>>
  footer="Created a month ago"
  width=50%
  class="text-center"
/>
#5

Thank you very much, I can get it to work with what you have given me.
By the way, how can I remove the padlock that appears on the links? I can’t find a way to disable it…

I take this opportunity to thank you for your editions of Tw: Shiraz, Mehregam, etc… they help me a lot to learn.

2 Likes
#6

The padlock should not appear on Shiraz online kookma.github.io and it is generated on https://tiddlywiki.com

I use a plugin from TheDiveO which generates links like that (with PadLock)

Sidenote:

In kookma.github.io you find many scripting (wikitexting) examples