# Getting correct display links on icons in a Shiraz macro

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
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.

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! 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

\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
title="Dark title card"
text=<<mytable>>
footer="Created a month ago"
width=50%
class="text-center"
/>


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

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