Clickable Picture Links with Captions
This post is about adding pictures to your website, that your readers can click on, to take them to a different website, or even a webpage on your website. Nothing new there. However, looking around the web, to find (A) clickable pictures with captions, is not so easy. Not in html. There are websites, but they tell you how to click buttons, on WordPress, to do it. That’s not so easy when you are permanently set in text-mode, as I am in order to edit LaTeX code for equations, and for other stuff. (B) I also find that nowadays, you can’t get clickable pictures of the items you want to promote in the Amazon Affiliate Program. I always seem to just get the following picture (this one occurred when I tried to get an image link to to Pavel Ginfeld’s book on Tensors, but I get the same image, and link, for everything!)
So if you clicked on the image it would just take you to the Amazon main page, but with my affiliate details (mcjssjc1). So that was after selecting “Text and Image”. Below is a picture of the Amazon Affiliate webpage which generates links.
The generated code for the Amazon Home Page Link picture, above, the one that just goes to the Amazon Main page, looks like this
If I select “Text Only”, on the Amazon Link Generating Page, I get the following
Introduction to Tensor Analysis and the Calculus of Moving Surfaces
Which all seems correct, but not very interesting, as I really want a picture.
The generated code for this text-only link, looks like this
If I select “Image Only” then I get
Yes, just this little box with a cross in it! Works fine as a link but really not great at all!
The code for that is
“Ah!”, you say, “but you have the width and height both set to “1”, try making them a sensible size!”. Nope, just gives the same little box in a square but with a lot of space to the bottom and right of it.
Now, however, maybe I can add my own image to this piece of code? What if I replace
src=”//ws-eu.amazon-adsystem.com/widgets/q?encoding=UTF8&MarketPlace=GB&ASIN=B00FE92A28&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160&tag=mcjssjc1-21″
with
src=”http://www.ourlife.co.uk/wp-content/uploads/2018/06/Grinfeld.jpg”
where Grinfeld.jpg is just a cropped screen print of the book from Amazon itself. I uploaded the Grinfeld.jpg file to my website, using file transfer (ftp or whatever you choose). This gives me the following
Well that works as a link and I have a decent picture. Also the link, to the Amazon website, does have my Amazon Affiliate identity (mcjssjc1). The html code now looks like this
The next thing to do is to add a caption to the picture and be able to change both the size, shape and position of the image, and the size, shape and position of the text:
The html code for this looks like this:
Just going through some of this code:~
- There are alternative texts (alt=) for both the picture and the caption. This is in case either the picture link or the website link is not available, the viewer can then see what should be happening
- The rel=”noopener” rel=”nofollow” code has something to do with not messing things up with search engine bots, like Google
- target=”_blank” just opens the site in another tab on the viewers browser, rather than switching out your website page. Trust me, you don’t want to lose your readers that easy
- Both the image and the caption text have their widths set, 500 pixels and 300 pixels, respectively
- That’s about it. You can mess with alignment and height etc. There will be other things you can do too. But I’m thinking that this is a fairly good start, maybees?