Lately, I've been seeing a few posts with clickable images. As in, if you click the image, a link will be embedded into the image, taking you right to the link's website! SUPER RAD, RIGHT?!?!
Like most things markdown related, it is so simple to do, and once you've learnt the hack, you're good to go!
All it entails is putting an extra pair of square brackets into your code. Yip!
Here's how:
πSTEP ONEπ
- Open the Submit a Story tab.
- Write your post as per normal.
- Load the image you'd like to take you to your linked page.
πSTEP TWOπ
- Treat your image's code like the word to be displayed, when you are adding code for a regular link. Ie, just put a pair of square brackets around the entire image code. Then, in regular brackets, put the site you'd like the link to take you to.
Like this:
I've applied this code to my SteemSpeak logo below. If you click on the banner, it will take you to the sign up page for SteemSpeak. You should totally sign up while you're there! π
Did you find this post helpful? Let me know in the comments below!
Awesome info, it took me a while to get this right.
Once you know ho, it's super easy peasy
This post recieved an upvote from minnowpond. If you would like to recieve upvotes from minnowpond on all your posts, simply FOLLOW @minnowpond
@morkrock got you a $4.28 @minnowbooster upgoat, nice! (Image: pixabay.com)
Want a boost? Click here to read more!
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by princessmewmew from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
My image still is not clickable.
Hhhmmm, perhaps post your code here with spaces in and I'll see what I see!
I made it!
Your publications are really beautiful @princessmewmew I've checked most of them and found them amazing you're really worth it all thanks for sharing I hope to be like you in the future I work with all my efforts and perfection of God
Wow, that's so lovely of you!
Thank you so much xxx
You can also use straight HTML.
(The above shows how to do this in markdown. Which doesn't always work, because of complications.)
<A href="https://www.yourwebpage.com"> <img alt="This is the alt text" src="https://steemimages.com>/mypicture.jpg"> </A>A href = stands for a hyperlink reference. (or a clickable link)
img = image
Β alt = alternative text
Β src = source, of the picture, the html link
To change from mark down to HTML, you basically replace the "[ ]" brackets with quotes, and then put the
< img > tags around it
Oooh. Thanks. I find the HTML a bit complicated but I am so open to trying new things!
Thanks - this was super informative. Do you ever do posts on HTML? You should!
Other people have done them before, so I don't really bother. I have many other things that I want to write about. Writing and infographics is taking me a long time, so there is quite a back log in my mind. That's why.
Informative post, short & sweet.
Nice, nice.
I'm upvoting this
Short and sweet like meee!
Thanks Geek!
Ooh thanks for this. Now I have a new trick up the old sleeve.
A great post with excellent advice! As they say; "Another mystery solved" Congrats @princessmewmew A question if I may? If I put the square brackets on and type an external website example; [.........](www.papillonfoundation.com] will it still work?
Gonna find you in discord xxx
Very interesting post @princessmewmew will have to save the link for future reference. Shared for others to enjoy too.
Thank you for sharing it! I did not know it exists but thanks to you, now I know. I really appreciate your effort sharing with us such a good trick.
Image Source
That is very informative recently Iβ have been wondering about this.β
Lucky me I found your post.
Great post, it's good that you are sharing this info as it's such an easy thing to do... yet not many people do it or possibly don't know how to do it. Good one! and interesting segway in to steemspeak. Thanks
Information is power,thanks for this information even after 2yrs it help a lot.