Fixing Missing Images on Amazon Listings

This is actually the hard part. Where can you find a product image if the picture is missing?

1. Browse the Amazon listings for the book or product (see example above).
   
   You may find another version for sale that's got a picture. Does it have an Amazon price, or at least a Used price? If it's a used book, are there several copies for sale from a few different booksellers? If the answer is yes and yes, feature that product listing in your Amazon module -- you're done!
   
   To find the URL (web address) of a picture on a webpage, Right-click the picture (control-click on Mac) and select Copy Image Location.
   
   
2. Or, you may find a product where someone has uploaded a customer image.
   
   Here's what I found when I clicked on the sixth listing for my book:
   
   
   
   That's more like it! The problem is, since it's customer-submitted, Amazon's being careful: Amazon won't put the picture in the official listing that it sends to off-site widgets. But we CAN!
   
   However, notice the Used Price. 0.01 cents and up? Maybe it's just me, but that looks fishy. What kind of cheap junk am I selling here? So I'm gonna use this picture, but upload it to another listing of the same book where the prices look legitimate.
   
   But before we get to Part Two, let me cover one more possibility.
   
   
3. Suppose no Amazon listing has a picture. Unless you've got the item plus a camera or flatbed scanner to make your own picture, you'll have to do some hunting. Try a Google Images Search with the product's exact name. If it's a book, I find that searching for the author's name often turns up the covers of the author's books, even when individual titles turn up nothing. Remember to "enclose multiple words in quotes" to force Google to match a whole phrase exactly. Or browse used bookstore websites or product catalogs.
   
   One thing: we're fudging copyright a bit. But the copyright holder of a product is its author and/or publisher, who should be happy for the free advertising. A close-up showing nothing but the book cover should be fine. For products, try to find an image used in multiple catalogs. You don't want unique photos done by an in-house photographer or a fan (e.g. someone taking posed pictures of their own Barbie doll collection). Amazon might protect itself from lawsuits by shutting down your account if you swipe a picture from those. But if it's a generic product image that appears again and again in many catalogs, it's almost certainly from the manufacturer.
   
   Once you've got a picture, make absolutely sure it's really a photo of the thing you're trying to sell! Then download the picture (Right-click / Cntrl-click and pick "Save Image As...").
   
   Once you've found a picture, go back to the Amazon page of the product you want to feature and click "Share your own customer image"! Upload it! Take a bathroom break while Amazon processes the image. When "See One Customer Image" appears under the missing image box, Amazon has saved it.
   
   
   
   
4. View the picture! Right-click (Mac: Contrl-Click) on the image to get a popup menu. Choose "Copy Image Location". SAVE this URL in a spare text document.

Now that you have the URL of a picture of your product, we can add it to Squidoo!

1. Once you've gotten a bona-fide picture of the product uploaded on its Amazon product page, open the picture, right-click / contrl-click (that's for Mac), and select "Copy Image Location" from the popup menu.
   
   
2. Open a spare text document for taking notes. Paste the image's URL there. Label it so you remember what it is.
   
   
3. Go to Squidoo, edit your lens, and create the Amazon module if you haven't already. Add all the products you want. You should now have a listing like the example at the top of this tutorial, with some pictures showing, some not.
   
   
4. Edit the Amazon module and click the Display Options tab. Uncheck "Picture". Check "Used Price" if you're featuring a used book.
   
   I know, ALL the pictures are gone now. We'll have to add them back manually.
   
   
5. Click the Pick Your Products tab. Scroll down until you see the title of the product. Click the "Add a description" link under the title get a text box.


6. Paste the following code at the start of the description box, replacing the part in orange (the URL after img=" and before the next ") with the customer image URL you copied a moment ago.
   
   <img src="http://g-ecx.images-amazon.com/images/verylongURL.jpg" style="height: 75px; margin-left: -90px; margin-top: -30px; float: left;">
   
   
7. Save the module to see how it looks. Almost certainly, the numbers above won't work, because your image is different dimensions! So now we get to play geometry.
   
   
8. Decide whether the image is too far left, up, down, or right. It's time to fiddle with positioning.
   
   • Too far to the left: Move the margin-left closer to 0. For example, change -90px to -80px.
     
   • Too far to the right: Move the margin-left farther from 0. For example, change -90px to -100px.
     
   • Too far up: Move the margin-top closer to 0. So change -30px to -20px, for example.
     
   • Too far down: Move the margin-top away from 0. Try -40px instead of -30px.
9. Keep fiddling until you have the graphic fairly well centered. Then SAVE the module, just to make sure.
   
   
10. For every product in the Amazon module, repeat steps 1-9.

I. Get a URL for an image. See Part One on how to upload it to Amazon's user images.

IIa. Place the image. For an absolutely square picture, OR for an image wider than it is tall, it's easy: the width of the image is 160pixels, the margin-left is -175px, and the margin-top is -50px. Here's the code:

<img src="http://g-ecx.images-amazon.com/images/verylongURL.jpg" style="width: 160px; margin-left: -175px; margin-top: -50px; float: left;">

IIb. An image taller than it is wide will take some fiddling. In this case, you'll set the height to 160 pixels, anchor its top edge at -50px, and then fiddle with the left-hand margin until you like the way it looks. Start with this code:

<img src="http://g-ecx.images-amazon.com/images/verylongURL.jpg" style="height: 160px; margin-left: -175px; margin-top: -50px; float: left;">

Save it and see how it looks. If there's a huge white gap between the right side of the image and the text blurb, then scoot the graphic right by making the margin-left more positive. That is, change -175 to, say, -160 and see how that looks.

IIc. If the product has an author's name or a multi-line title, you may want to adjust the top margin of the image to match. In the code template above, margin-top: -50px scoots the image up to be level with a single-line title like "Mordred's Lullaby," but if there's also an author's name, scoot the image up more by changing margin-top to -72px. For each additional line in the product title, subtract another 16. So -50px becomes -66px and -72 becomes -88.

If you click "Manage Widgets" at the top of the Lens Workshop Sidebar, there's a few widgets, or mini-modules, that you can add to the published lens sidebar.

One is an Amazon widget. So what if you want to add a missing image to that?

I. Get a URL for an image. See Part One on how to upload it to Amazon's user images.

IIa. Place the image. Thanks to lensmaster ThrivingMom for adapting my code and finding the correct dimensions:

<img src="http://g-ecx.images-amazon.com/images/verylongURL.jpg" style="width: 120px; margin-left: -130px; margin-top: -50px; float: left;">

As usual, you may have to fiddle with the numbers to get it positioned exactly right, but that should do it!

"Wait!" you're saying. "I'm an Amazon Associate! I don't want to share my revenue with Squidoo!" Or maybe, "I can't use a Squidoo module; I need this for my blog / website."

Well, unfortunately, in order to get the current price listed, we need computer programming, and I don't know how to do that. But the programmers at SquidUtils, tools made by and for Squidoo members, do know how.

We can use their code, in exchange for their taking the Associates commission of 1 out of every 10 clicks on a Squidoo lens or 2 out of every 5 on another site. Here's how:

1. Complete Part One above so you have the URL of an image handy.
   
   
2. Go to SquidUtil's Amazon Products Page and create a listing using your Amazon Associates ID and the URL of the Amazon page where you found the product listed.
   
   
3. Copy the Amazon widget code and paste it to your own website. It looks something like this:
   
   <p style="float:left; width:98px;" align="center"><a href="http://squidutils.com/us/B000IUC8JI/mythprint-20" target="_blank" rel="nofollow" style="text-decoration:none;"><img border="0" src="" />
   <b>The House on the Volcano </b>
   [put a caption here if you like]
   <img border="0" src="http://squidutils.com/us/mB000IUC8JI.png" />
   <img src="http://rcm-images.amazon.com/images/G/01/buttons/buy-from-tan.gif" vspace="3" border="0" /></a></p>
   
   
4. See that src=""? That's the missing image. PASTE the url of the product image between the quotation marks. Then, to shrink the image down, add a space and width="98" after the closing quote and before the following />.
   
   Like this:
   
   <p style="float:left; width:98px;" align="center"><a href="http://squidutils.com/us/B000IUC8JI/mythprint-20" target="_blank" rel="nofollow" style="text-decoration:none;"><img border="0" src="http://g-ecx.images-amazon.com/images/G/01/ciu/ca/a7/0c54224128a002a5e522c010._AA240_.L.jpg" width="98" />
   <b>The House on the Volcano </b>
   (Original Title: Kimo and Madame Pele)
   <img border="0" src="http://squidutils.com/us/mB000IUC8JI.png" />
   <img src="http://rcm-images.amazon.com/images/G/01/buttons/buy-from-tan.gif" vspace="3" border="0" /></a></p>
   
   
5. Result:
   
   

   
   The House on the Volcano
   (Original Title: Kimo and Madame Pele)
   
   

   Right now this listing is set to go on the left side of a paragraph of text. If you type anything after it, the words/text will fill in to the right of it. I found that the widget was jammed up too close to this paragraph. To fix the problem, I added padding-right: 20px; padding-bottom: 10px; after float:left; width:98px; and before the quote up at the start of the code snippet. That added a spacing buffer to the right and below the widget.
   
   If you want the listing on the right side instead, change float:left; at the very beginning of the code snippet to float: right; or delete it if you just want the widget centered in its own place on the page. (You'd need to switch my buffer to say padding-left, if you used it.)
   
   If you want to understand how to change the font-size of the caption, adjust padding and margins, add a border or background-color, or otherwise tweak the listing, check out my CSS Codes Tutorial so you can make sense of all this gobbledygook!

The House on the Volcano

If you'd rather not use SquidUtils and want to hand-code an Amazon affiliate widget yourself, here's how to do it from scratch (Example at right). Pros: you keep all earnings. Cons: I can't get the price or fancy button under it the way they can. Also, this takes some serious code.

1. Complete Part One of the tutorial to get a URL for a picture of the product. Copy its URL to a spare text document and keep it handy.
   
   
2. Make a Text-Only Link to an Amazon product (either by clicking on the "Links and Banners" tab on Amazon Associates Central or by using the "Link to this page" option from the Amazon Associates strip while viewing a product page).
   
   
3. Copy the code Amazon gives for a "Text Link."
   
   
4. Paste the code into your website or lens.This makes a clickable text link (Example: The House on the Volcano) which sends your reader to the product page on Amazon and tells Amazon your affiliate code.
   
   
5. What we're going to do is make the text link a caption, and add an image above it which is ALSO a clickable link. I've colored the code Amazon gave us to help you see the pieces we'll be working on:
   
   <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI">The House on the Volcano</a><img src="http://www.assoc-amazon.com/e/ir?t=mythprint-20&l=as2&o=1&a=B000IUC8JI" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
   
   Key:
   green: the code that makes the link and marks it with your Amazon Associates ID.
   orange: the book title. The clickable text.
   brown: some fixed bit of code Amazon uses for tracking purposes (I think). Don't touch it.
   
   Now we're going to copy the code that Amazon gave us for making a text link, and replace the book title with a picture. So:
   
   
6. COPY the whole green-orange-green part, from <a href= to </a>.
   
   
7. PASTE a copy just before the whole chunk of code and add <br> (linebreak) between them, like this:
   
   <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI">The House on the Volcano</a><br>
   <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI">The House on the Volcano</a><img src="http://www.assoc-amazon.com/e/ir?t=mythprint-20&l=as2&o=1&a=B000IUC8JI" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
   
   
8. REPLACE the first instance of the product's title (blue text) with the following code, plugging the URL of the product image into "urlgoeshere.jpg" :
   
   <img src="urlgoeshere.jpg" border=0 style="width: 116px; margin-bottom: 5px;">
   
   This blue part makes the image and sets its width. The green code around it, which we copied in the previous step, makes it a clickable link just like the text.
   
   
9. Wrap the following around ALL THE CODE:
   <p style="width: 116px; text-align: center; font-size: 9pt; line-height: 10pt; font-family: Arial;">[code from above goes here...]</p>
   
   This purple part groups the image plus its caption together inside a 116-pixel-wide paragraph, forcing the caption's text to wrap if it's wider than the image. I added a few optional font-formatting commands to change the font, shrink and center the caption.
   
   
10. Finished code looks like:
    
    <p style="width: 116px; text-align: center; font-size: 9pt; line-height: 10pt; font-family: Arial;">
    <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI"><img src="http://g-ecx.images-amazon.com/images/G/01/ciu/ca/a7/0c54224128a002a5e522c010._AA240_.L.jpg" border=0 style="width: 116px; margin-bottom: 5px;"></a><br>
    <a href="http://www.amazon.com/gp/product/B000IUC8JI?ie=UTF8&tag=mythprint-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=B000IUC8JI">The House on the Volcano</a><img src="http://www.assoc-amazon.com/e/ir?t=mythprint-20&l=as2&o=1&a=B000IUC8JI" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></p>
    
    Result:
    
    

    
    The House on the Volcano

    WHEW! Give yourself a big pat on the back for getting through all that.
    
    See my CSS Codes Tutorial if you want to change the font, move the picture side by side with the caption, resize the paragraph and image, or otherwise tweak the appearance. This example is essentially the "caption under aligned images" trick, except I didn't align the paragraph containing the image and caption. You may want to add align=center or float: right; or float: left; to the opening paragraph tag, and/or some padding to put a buffer around the whole widget.
    

Click HERE to open a printable version of these instructions.

Er. This is a bit fly-by-the-seat-of-the-pants, and you'll probably want to adjust margins and spacing as you see fit, but here's what I did.

1. Add an Amazon Spotlight Module and turn OFF everything in the "Display" tab except for the Amazon Price. You'll probably want to skip the module subtitle, as a module header, subtitle, AND your big honking text link is too many headers in a row.
   
   
2. Go ye to Amazon Product Page and click "Link to This Page" up at the top. (I'm assuming you've got the Associates toolbar turned on.)
   
   
3. Choose "Text Only" link and copy it. PASTE it into the Description Field of the Amazon Spotlight.
   
   
4. Now we tinker. I suggest wrapping <p style="font-size: 20pt; padding: 10px 20px; background-color: [pick a color]; font-weight: bold;"> .... </p> around the whole kit and kaboodle. This makes the colored rectangular area, the background, and sets the font big.
   
   
5. Next we need to make the link jump out. I STYLED the link, thusly: <a href="very long associates link" style="color: yellow; text-decoration: underline;">
   
   Now we've got the big bold headline across the top. Next, we're going to do something diabolical to force the "Amazon Price: Blah [BUY BUTTON]" over to the right, out of the way. I could do this any old way, but I'm lazy, and it just so happens that Amazon gives us this invisible one-pixel image which it uses as a security measure to make sure our link isn't being hijacked. The image's URL includes our associates code, and if it doesn't match the link, someone's pulling something funny. So anyway. A 1x1 pixel transparent image doesn't show up. But we can MAKE IT BIGGER with CSS, forcing what's under it to scoot over. I only had to do this because I chose to make my image BIGGER than the space the Amazon Spotlight reserves for an image!!! So.
   
   
6. Still in the Description field of the Amazon spotlight module, look for some code that Amazon gave you to place wee image. Right now, it's got a margin of zero. Let's start editing right there. DELETE the part that says width="1" height="1".
   
   
7. REPLACE everything in the STYLE of the image as follows:
   
   <img src="weird-ass long URL with your associate name in it" border="0" alt="" style="border:none !important; margin:0px !important; float: left; width: 220px; height: 40px; " />
   
   Float makes it sit side-by-side with whatever it bumps into. 220 pixels is the width of the image I chose plus a little extra. The height makes our spacer-image extend down into the area where the Amazon Price info is, forcing it over to the right. Amazon surely doesn't care if we stretch its graphic; it's just looking at the data in that URL to make sure we're legit.
   
   OKAY. NOW. Let's place the product image.
   
   
8. Back to Amazon. When you say you want an "Image Only" link, it tells you to download the graphic and host it yourself. Curse you, Amazon! Okay. Do that.
   
   
9. Copy the "Image Only" associates code Amazon gives you.
   
   Paste it into the BLURB BOX in your Amazon spotlight module, where you'd normally tell why this is a spiffy-cool product. (I.e. the gray area in my example above.)
   
   
10. Replace Amazon's totally useless "something something .jpg" with the URL of your graphic.
    
    Now we need to scoot our graphic over. I made mine a big honking 200 pixels wide, much bigger than Squidoo's Amazon Spotlight module's graphic, so big it's pushing into the area normally reserved for the text blurb. That's okay, as long as I set the image to FLOAT LEFT so the text to the right scoots over to make room.
    
    
11. So now we add a STYLE to the product image.
    
    <a href="big long associates link"><img border="0" src="http://www.istad.org/lenses/amazon/sushi-cat-poster.jpg" alt="Funny Cat Poster: Sushi Chef" style="width: 200px; margin-left: -175px; margin-top: -38px; float: left;"></a>
    
    See what I did? I set the picture to 200 pixels wide. Then I scooted it LEFT 175 pixels, and UP a bit too to get it level with the Amazon price.
    
    Okay, we're in the home stretch. Time to make that blurb look pretty!
    
    
12. You could just leave it as plain text, Squidoo's squinchy default. But let's add more visual weight to balance the rest of the stuff. So. After all the gobbledygook in the BLURB area, including another invisible img thingie, start coding:
    
    <p style="margin-left: 20px; background-color: lightgray; font-size: 16px; line-height: 22px; padding: 10px;">
    
    
13. Okay, FINALLY, write the text part of the blurb! This is where I yakked about cats.
    
    
14. If you want to add another associates text link in here for visual reinforcement, again, you can add CSS style to the link to color it. That is, after the a href="blah blah blah" put a style="color: something; text-decoration: underline;" or whatever CSS funky fontness you like.
    
    
15. IMPORTANT: Copy and paste everything you've done to a spare text window, NOW, before you save, in case you make a typo and Squidoo punishes you by losing part of what you just did.
    
    
16. SAVE. Examine the result to see if it looks wonky, and tinker with it.
    
    
17. Once it looks PERFECT, save all the codes to a text document as a template and don't touch it.
    
    
18. Then copy the template into a new, spare text window. For each new Amazon product, copy and replace the product code of the new product EVERYWHERE it appears in the template... download, upload, and change the URL of the image, and don't touch anything else!
    
    If you haven't used the template in a while, when you go to make a new Amazon Associates text link, copy the code they get STRAIGHT into a spare window, eyeball it, and make sure that the only difference between the URL they just gave you and the one in the template is the product number. If in doubt, replace the whole URL. But do NOT replace any of the styling, or you'll have to do that again.
    
    I could've given you a template. Except I couldn't, because it really varies by the shape product image you want, and how you want to lay it out. So instead I'm teaching you the IDEA, which you can apply. The good news is, once you've created a template you like, you can keep reusing it with minimal upkeep. The bad news is, if Squidoo ever changes the layout of the Spotlight module, you'll have a LOT of editing to do if it's pushed things around.
    
    I think my method works in such a way that even if Squidoo shifts things around, my codes will override it and do their own thing. But I can't promise.