Linking Images (Clickable Images)

, ,
#1

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.

#2

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>
#3

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>
#4

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

#5

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.

#7

This is what I get when I surround an image with an HTML link, even with the button widget.

IMG_6540.jpg

#8

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

#9

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>

#10

I think there is some issue with double quotes symbol you are using…

#11

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

2 Likes
#12

I just used the regular quotes on the keyboard (shown in screenshot). How do I get the correct quotes?

IMG_6541
IMG_6541750×544 91.7 KB

#13

To enter straight quotes on an iPhone, you can turn off automatic quotation mark formatting in the Settings app:

  1. Open Settings
  2. Tap General
  3. Tap Keyboard
  4. Tap Smart Punctuation
1 Like
#14

I copied your code directly & it worked, thank you. I can’t imagine how the wrong quotes got inserted. :woman_facepalming:t2:

#15

Thank you, I did that. :grin:

#16

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.

1 Like