Book blogging and HTML: Linking Images

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:

<a href=

and insert the page address. It should look like this:

<a href=http://www.goodreads.com/book/show/7158340-the-dragon-variation

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.”

Step 1: Copy image location

Step 6: 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:

[space] /></a>

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:
The Dragon Variation
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.

UPDATE:

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=”

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s