The Big Pictures and Indexed Too

The last post here at the Lab talked about using flickr slide shows to add a collection of large images to a blog post without taking up additional bandwidth or storage space on your hosting account.

But when you do this, because you aren’t hosting the image, it will not be indexed by Google for your site. If you don’t want to give up having your images indexed but you don’t want your blog to load slow because of the size of these images there is a way to have the best of both worlds.

I talked about this once before in Lightbox Your Way to a Quicker Load when I wrote about using the Lightbox plugin to display a small image and when clicking on the small image you can see the larger one.

If we expend that principle we can display a single small image on screen but build links in the post to an entire set of images placed behind the single large image.

Here is the code:

<p><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3045greatroom2.jpg” rel=”lightbox[risky]” title=”Great Room”><img src=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3045greatroom2sm.jpg” alt=”greatroom” align=”left” /></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3091mediacenter.jpg” rel=”lightbox[risky]” title=”Media center”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3040greatroom1.jpg” rel=”lightbox[risky]” title=”Great Room”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3055kitchen.jpg” rel=”lightbox[risky]” title=”Kitchen”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3075dnook.jpg” rel=”lightbox[risky]” title=”Breakfast Nook”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_2975alivingroom.jpg” rel=”lightbox[risky]” title=”Living Room”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_2993blivingroom.jpg” rel=”lightbox[risky]” title=”Living Room”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3104pianoroom.jpg” rel=”lightbox[risky]” title=”Piano Room”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3001master1.jpg” rel=”lightbox[risky]” title=”Master Bedroom”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3007master2.jpg” rel=”lightbox[risky]” title=”Master Bedroom Master Bath”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3028%20masterbath.jpg” rel=”lightbox[risky]” title=”Master Bath”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3117backpatio.jpg” rel=”lightbox[risky]” title=”Covered Back Patio”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3306playarea.jpg” rel=”lightbox[risky]” title=”Play Area”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3310apool.jpg” rel=”lightbox[risky]” title=”Pebble Tec Pool”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3313fireplace.jpg” rel=”lightbox[risky]” title=”Custom Outdoor Fireplace”></a><a href=”http://www.orovalleyhomes4sale.com/Risky/images/DSC_3321front.jpg” rel=”lightbox[risky]” title=”Front View with Catalina Mountains”></a></p>

Here is what it looks like: (Images have been removed)

Click on the image to see all the images of this property.

There is one reference to the front image but then you just keep chaining background images to the string which builds the set of images going into the hidden slide show using the Lightbox Plugin.

It doesn’t slow the initial post load time and provides you Google indexed links to each of the images referenced in the set.

The best thing, you have very large images, easy for viewing which makes your blog stand out.

Finally, I just discovered that if you are using WP 2.5 the latest version of Lightbox won’t work. You have to run the earlier version 1.7.

If you are running 2.5 and can’t find a copy of 1.7 leave a comment and I’ll email you the zip file. I hope they get the bugs in this fixed soon. For now 1.7 seems to work just fine with 2.5.

There you have it. A quick way to include a set and slide show of large images which reside on your hosting server and will be indexed by Google.

The other day we had clients that said, “The picture on the computer are so small it is hard to get a sense of what the rooms are actually like.”

This is great for listings. It is also great for slide shows like the one I put together in the last post. Flickr or Lightbox, your choice.

So Terry, there you have it : )

Comments

  1. Thanks – Dave, I find your site the most helpful
    in using real estate technology, perhaps because you actually buy and sell homes for a living…

  2. Wow! What a great tip! Thank you for introducing me to the Lightbox plugin, and a practical application.

    To clarify, are you uploading the files to your blog server Risky/images, or linking to images located on another server? Does it matter?

  3. Kathy,

    In this instance I already had this put together on another server for a listing site. So I just copied the code here for the post.

    I have three or four different hosting packages with different sites on different packages.

    As you can see if you know the url to the image you can put it on the post. no matter what server it is on.

    In this case by way of example I didn’t see the need to move the images to the Lab and rebuild the code.

    Nice catch by the way, many wouldn’t have noticed I was taking them from another site.

  4. Just looked at this post on an office computer at our branch. It really over runs the right hand nav.

    Doesn’t do it much on my home screen, I run pretty high res there. I might fix that, or I might not. Hum, how anal am I feeling today.

    Ok, live with it : )

  5. Nice work, Dave. Of the 2 (Flickr or Lightbox), I personally liked the look of the Lightbox one better. It seemed cleaner, faster, & better from a consumer point of view. (For reference: I didn’t have the right hand nav. issue that you mention.)

  6. I use lightbox on our Drupal site. I love it. Pages load faster plus it gives your site a little extra something.

  7. You may already know about this, but I just learned about docstop. This service will host docs created in Word, Excel, pdfs or whatever and you can embed the code on your site rather than take up a bunch of space. Check out an example at relayforlifeoflaketravis.blogspot dot com/.
    Get docstop at http://www.docstoc.com/

  8. Sam,

    Never heard of them. Looks interesting. I still prefer to host my own as PDF’s when I need to.

    My biggest reservation, they are a beta company, if they go down, all the links to those docs go with them. Another reason I like total control over the data.

  9. I have a technical question, what kind of a keyboard do you use to write your code and you blog posts. The posts look really nice and I have been thinking about getting a better keyboard so that mine look more like yours. The way you use punctuation is amazing.

  10. T,

    I have to confess I haven’t figured out the keyboard thing very well, so I type my blog posts on my old Royal Typewriter and scan them in with OCR to get them on the blog.

    That might explain the punctuation : )

    Or maybe not. I should try the keyboard thingy again, it would be faster.

  11. cool, what is a typewriter? I want one.