How do I link an image (make it clickable)? For example: I have some social media icons that I want to link to my various social profiles.
First import the image you want to use. Then transclude that image within the button. Replace the URL with your associated profile.
<$button class="tc-btn-invisible">
<a href="https://example.com" target="_blank">TRANSCLUDE IMAGE HERE</a>
</$button>
And if you want to use a social mediaâs publicly available image, you can use IMG instead of importing the image:
<$button class="tc-btn-invisible">
<a href="https://tiddlywiki.com" target="_blank">[img width=32 [https://tiddlywiki.com/favicon.ico]]</a>
</$button>
In general, you donât need to wrap the <a href=...>...</a>
syntax inside of a $button
widget for the external link to work.
One exception: If the image is an SVG, then wrapping it in a button will automatically resize it to match the current text size. Otherwise, it will be displayed using itâs default sizing.
-e
Wow, all this time I also was unaware of that.
So the following:
<a href="https://tiddlywiki.com" target="_blank">[img width=32 [https://tiddlywiki.com/favicon.ico]]</a>
Works straight out the gate. You would think I would have tried that first before automatically going with the widget approach.
This is what I get when I surround an image with an HTML link, even with the button widget.
Perhaps you have a typo or other syntax problem. Can you copy/paste the actual syntax you are using instead of the visual result?
-e
Hereâs the code w/o the button widget:
<a href=âhttps://www.threads.net/@1hangrysquirrelâ>{{threads.png}}</a>
Hereâs it with:
<$button class="tc-btn-invisible"><a href=âhttps://www.threads.net/@1hangrysquirrelâ>{{threads.png}}</a></$button>
I think there is some issue with double quotes symbol you are usingâŚ
Your code contains âsmart quotesâ (aka, âcurly quotesâ), which are not supported for use as delimiters around TiddlyWiki widget parameter values or HTML parameter values. For the syntax to be properly processed, you need to use âstraight quotesâ, like this:
<a href="https://www.threads.net/@1hangrysquirrel">{{threads.png}}</a>
-e
I just used the regular quotes on the keyboard (shown in screenshot). How do I get the correct quotes?
To enter straight quotes on an iPhone, you can turn off automatic quotation mark formatting in the Settings app:
- Open Settings
- Tap General
- Tap Keyboard
- Tap Smart Punctuation
I copied your code directly & it worked, thank you. I canât imagine how the wrong quotes got inserted.
Thank you, I did that.
Gloria, itâs a fault of iOS, they default to âsmart quotesâ ie, curly quotes, cause it looks more professional in documents. Unless you are looking for it, you wouldnât know until you, like many others, come up with an issue like you found.