I’ve recently started a book blog (check it out), in which one of the features is a set of “read-alikes” placed at the end of each post. They take the form of cover images. I really like the idea of linking those images to lead readers to more information about these books (from Goodreads, at the moment). With a link to a description and social media/community reviews, they “don’t have to take my word for it!”
Although I haven’t memorized the HTML code yet, I have re-figured out how to do this a few times (precisely because I haven’t been able to memorize it). So in this post, I’m going to go through the steps I use to link a cover image to a Goodreads book description page.
1. Go to the desired Goodreads page.
2. Copy the page address.
3. In the “Text” tab of the WordPress edit screen, type:
and insert the page address. It should look like this:
Close the quotes, and close the brackets:
<a href=“http://d.gr-assets.com/books/1348042173l/7158340.jpg “> (mine has a space here at the end before the closing quotes, but yours shouldn’t)
4. Select a title for the image (I’m going to use the book title).
Type the following, using your title, and beginning with a new bracket and a new set of quotes (close the quotes, but not the bracket):
<img alt=”The Dragon Variation”
5. Add a space and “src= to your text
6. Go back to the page you want to link the image to. Right click on the cover image, and select “Copy image location.”
7. Now insert your copied image location text. It should look like this:
<a href=“http://d.gr-assets.com/books/1348042173l/7158340.jpg”><img alt=”The Dragon Variation” src=”http://d.gr-assets.com/books/1348042173l/7158340.jpg
8. Close the quotes, and type:
to complete the code, so it looks like this:
<a href=“http://d.gr-assets.com/books/1348042173l/7158340.jpg”><img alt=”The Dragon Variation” src=”http://d.gr-assets.com/books/1348042173l/7158340.jpg /></a>
And so that your image looks like this:
9. Save it, and preview your results! If it doesn’t work, keep fiddling with it to find any errors. (Sometimes it takes me a handful of tries). If the image is too big or too small, select another to use.
Of course, the procedures are different if you’re working in Windows. Replace Step #6 above with the following, if you’re not working on a Mac:
6. Right click on the image, and select “View source.” This should bring up a separate window with lines and lines of code. Scroll down to line 438, and copy the text block between the quotes and after: “src=”