Fooling Around with Amazon Images

I’m a fussy person. I wanted to show books in my library on my blog sidebar—but not just in any old way.

Update: Fixed the code samples and script.

Requirements

  • One or more things in the sidebar that shows books in my library.

  • I want to show books I’ve read, books I’m currently reading (and, in some cases, re-reading), and books I will read.

  • Preferably separated from each other.

  • I want to be able to adjust the number of books shown in each category.

  • I want someone else to worry about all the little book images and not have to store/resize them myself.

  • I want flexibility in linking; sometimes I want to link to reviews I’ve written, for instance, and sometimes direct to Amazon, Audible, Webscriptions, etc.

  • If I’m linking to Amazon, I want my Amazon Associates code attached. Optionally, if any other stores have associates programs, I want to use those tags too.

Widgets from Book Social Networks

None of the widgets from Shelfari, GoodReads, or LibraryThing could satisfy these requirements.

The widgets at GoodReads came closest, but in the end they weren’t flexible enough.

Now we descend into high geekery, including ruby code, so the rest of this goes under the cut.

WordPress Plugin Land

There are many of these, but the one that came closest to satisfying every single requirement was the Amazon Showcase Widget for WordPress. It’s flexible enough such that you can easily tweak the HTML for each item, while most of the work was left to the plugin to locate the Amazon image, attach the associate code if the Amazon URL is going to be used, etc.

Unfortunately, sometimes plugins don’t deal with Amazon returning, say, very long titles and suchlike back, as happened with Harry, a History: ….

Hacking Amazon Images

I found an interesting article called Abusing Amazon Images. Apparently Amazon’s image servers allow you to do some serious magic to book images, including various resizing options, adding whitespace, adding those little “Look inside!” and “Kindle edition” badges, even rotating the images.

Basically, take any Amazon image URL. It ends with some gobledegook that looks like:

http://ecx.images-amazon.com/images/I/51GnizYwB%2BL._SL500_AA242_PIkin-dp-500,BottomRight,-21,38_AA280_SH20_OU01_.jpg

The first bit (bold and red, before the first “.“) is the base url of the image.

Most Useful Recipes

Note:

By the way, if you’re using these images, you should link back to Amazon’s page for the book, or to a review that has the Amazon link (a number of different formats is keen).

It’s the same reason why Flickr wants you to link back to the individual photo page, and the same reason why, if you have to pay for bandwidth from other people, you’d at least like to see some visitors.

Alternatively, you can save the little images (especially since images do occasionally disappear) after you’ve worked with them yourself.

The original article has more complicated recipes (drop shadows, rotation, badges, etc) but I tend to focus on basics. ((And yes, I do like my ice cream vanilla. French Vanilla if I’m going to be wild for one night. Oh, and cheeze pizza. Just cheeze, please. Three-cheese is OK. You probably don’t want to hear about the tofu.))

Large image, no whitespace

Just take the first bit and slap on .jpg at the end, and you get a large image of the book with no whitespace:

http://ecx.images-amazon.com/images/I/51GnizYwB%2BL.jpg
Resize by width

Set the width to, say, 125 pixels, while resizing the height proportionally.

http://ecx.images-amazon.com/images/I/51GnizYwB%2BL.SX125.jpg
Resize by height

Set the height to, say, 125 pixels, while resizing the width proportionately.

http://ecx.images-amazon.com/images/I/51GnizYwB%2BL.SY125.jpg
Nicest resizing

Resize the width or the height, whichever is longest, to, say, 125 pixels. And resize the other dimension proportionately.

http://ecx.images-amazon.com/images/I/51GnizYwB%2BL.SL125.jpg

I ended up using this one.

Amazon Associates Tagging

It’s extremely simple. For some reason many plugins like to go through gymnastics (replicating, I think, the Amazon Associates website’s text/image links, whose URLs give Amazon tracking information that is actually useless to either party in the case of custom images).

http://[Amazon URL here]?tag=[associates id here]

So for instance,

http://www.amazon.com/gp/product/B0010SGS1Q?tag=spontaneous-derivation-20

Sometimes (especially for, say, search results) there’s other parameters you want to preserve. Then you just add the tag at the end with an ampersand & instead of a question mark.

http://www.amazon.com/exec/obidos/search-handle-url?_encoding=UTF8&search-type=ss&index=digital-text&field-author=John%20Scalzi&tag=spontaneous-derivation-20

Oh Heck I’ll Do It Myself

Mostly because I am a programmer. I didn’t want to do a full-fledged WordPress plugin (I must learn how to do so, one day), so I just wrote a few scripts that will, given some parameters, simply generate the above.

I really should use Amazon Web Services in this script, but sometimes titles and authors are a bit wrong at times. Maybe next time. After more West Wing.

Pardon the bumbling code, but I’m more versed in Perl than Ruby.


#!/usr/bin/ruby

require 'optparse'

#
# I had a bit of time figuring out the easiest way to
# parse options in Ruby using its native optparse
# library.  In the end, this was the easiest method.
#
# By the way, the arguments to getopts goes like this:
#
# ARGV.getopts("allyoursingleletteroptions",
#              "first-long-option",
#              "second-long-option-with-argument:")
#
# So if you're only doing long options, you need to
# include an empty string where allthesingleletteroptions
# would go.
#
params = ARGV.getopts("", "size:")

# Image size to apply against SL sizing
SIZE = params["size"] || 100
# Associates tag
ASSOC_TAG = "spontaneous-derivation-20"

# Read in the title, stripping out whitespace
puts "Title:"
title = gets
title.strip!

# Ditto for the author
puts "Author:"
author = gets
author.strip!

# Ditto for the link, plus removing ref=bleaaagh from
# the Amazon link and switching any https:// to http://
puts "Link:"
link = gets
link.strip!
link.gsub!(/^https/, "http")

# If it's an Amazon link, clean it so the user doesn't have
# to.  So yes, I can throw just about any variation of the
# link in here and it'll come out shiny.
if (link =~ /^http:\/\/www\.amazon\./)
    # Yes, quick and dirty regexp that doesn't work in all
    # cases here
    link.gsub!(/\?ref=.*$/, "")

    # attach associates tag for a little money when
    # someone clicks
    link = "#{link}?tag=#{ASSOC_TAG}"
end

# Read in Amazon image url
puts "Image url:"
image_url = gets
image_url.strip!

# Do some cleaning so that this can be ANY image url
# variation that gets thrown into this script, and
# it still ends up with the nice SL sizing and
# removal of general cruft.
image_url =~ /^https?:\/\/.*\/images\/([^\/]+\/[^.]+)/
image_url = "http://ecx.images-amazon.com/images/#{$1}.SL#{SIZE}.jpg"

# A very nice thing to include in a link, especially
# an image link, is the "title" attribute.  When someone
# hovers their mouse over the image, a little popup
# (in most browsers) displays this attribute.
print <<eof



EOF

Double-click on the resulting HTML in the terminal and now I have some images I can stack.

Final Results

I used text widgets in WordPress, because I couldn’t be bothered to write up a proper widget, and updating read/unread/etc is a pretty manual process anyways.

A row of three SL100 images seems to do the trick.

fooling-around-with-amazon-images

I especially like the pyramid of recently read books at the bottom. The arguments for the images go from SL100 to SL75 to SL50. I figured another row of 12 SL25 images at the bottom was a bit much.

Advertisements

2 thoughts on “Fooling Around with Amazon Images

Comments are closed.