Quick Tips 💡: Referencing of Images in Your Blog

in help •  last year
With all the recent action regarding copyrighted pictures and referencing external images on Steemit, if we were to link every image we use, the posts can become cluttered with URLs. I think it's annoying to show links for every image used. Here are a few tricks to embed an image with a reference to its source.


This is kitten begging to be cuddled (really, look at it):

If you wish to add its URL without cluttering, use the subscript <sub> or superscript <sup> tag, like this:
<sub>h<i></i>ttps://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg</sub>

Notice that I added the <i></i> tags to split the "http" word. It's a quick and dirty hack to prevent autolinking (showing the image) instead of the URL text.

Result:
https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg

To add a clickable URL, use this template:
<sub><a href="http://example.com">http://example.com or any text you wish</a></sub>

So in our case, we write:
<sub><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg">https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg</a></sub>

Which gives us this result with the full clickable URL:
https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg

Or something shorter like this:
click here for the source

Another alternative, which I prefer, is to use a clickable image with a link to its source, like this:
[![](https://some.image.url)](https://some.image.url)
or
[![some picture description](https://some.image.url)](https://some.image.url)

So back to our cute kitten we write:
[![](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg)](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg)

And we get this nice and tidy clickable image:

I hope you found this post useful 🙂


Proud member and delegator of the @minnowsupport project.
Join us on https://discord.gg/GpHEEhV
MSPPAL


50rep.png
If you like this post, upvote and comment.
If you really like it, resteem.
If you love it, follow.
Don't be shy, click that banner and enjoy my blog (gif animation by @justcallmemyth)
Follow

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thanks for the tip ! I will definitely add it to my future articles !

Drakos thanks for this post! I was having a hell of a time only using my own photos ;) You've been my own personal how to guide on here so far and I am so grateful for all that post and your knowledge! Thanks :)

·

For your own photographies, there's no need to link them, they belong to you. But for external copyrighted ones, it's better to be safe than sorry. The problem is that Steemit is a profit-generating platform, so it's not ethical to make money off someone else's work.

·
·

I get that, that's why I am saying I have only been using my own :) Your post was really helpful for me to learn how to source outside photos properly in here (I'm a communications graduate so I have strong respect towards giving credit where its due)

Hi drakos, thanks for the article, and keeping it simple. I have been seeing this "PAL" around lately. What is it all about?

·

Check the links (or the clickable images, just like this tutorial teaches 😀) that I put in my footnotes. In a nutshell, it's a recent initiative to help newcomers get started, boost their followers, gain some exposure. It has helped me and almost 2000 people so far! Join and see :)

·
·

hahaha well, there you go. So, simple :) Thank you!!! I will definitely check it out!!

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by drakos from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, and someguy123. 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.

If you like what we're doing please upvote this comment so we can continue to build the community account that's supporting all members.