Many of us have used the Flickr module to add thumbnail galleries pointing to Creative Commons images on Flickr. Unfortunately, as you’ve probably noticed, some of these images have been disappearing. Squidoo HQ has been trying to work with Flickr for a couple weeks to track down why Flickr is serving up some images and not others, but Flickr hasn’t responded, and Flickr images continue to vanish from Squidoo at random.
It’s just going to disappear from our lenses. Poof! No timetable yet on when this is going to happen… but it will probably happen very soon (although I doubt over the weekend).
How to Recover from Lost Flickr Photo Modules
This weekend, the important thing is to grab ALL the data from your Flickr modules before they vanish. This means any text you wrote in the description field, plus the URLs of the Flickr pages your gallery links to.
First, how do you FIND all your lenses that have Flickr Modules? Go to Google and search for the following, replacing my lensmaster name with yours:
site:squidoo.com “by Greekgeek” “curated content from Flickr”
Once you’ve landed on a lens that has a Flickr module, find that module quickly by hitting command-F and searching for the word curated. This will turn up all the Flickr modules, which have the caption “content curated from flickr”.
Now you need to grab the contents of the Flickr module. The quickest way I’ve found to do this is the Copy HTML add-on for Firefox. This lets you select ANY part of a webpage, right-click, and choose “Copy HTML” to get not only the text you selected, but any invisible HTML codes, including the links in the Flickr module that point to Flickr pages. I’ve created an “Emergency Flickr Module Bailout” text document that looks like this:
name of lens
<all the code I copied from the flickr modules for that lens>
<copied flickr module code>
etc, etc. At the end, that’ll be my To Do list of modules I need to replace.
Once you’ve saved all the contents of your Flickr modules, then you can replace them at your leisure, even after the modules have gone bye-bye. How? Well, the simple way would be to use a Link List module, filling it with the links to the Flickr photos you were showcasing before, but that’s boring because it loses the thumbnail images. There is a way to hand-code a thumbnail image gallery, but it’ll take more work. Here’s how.
Prep: Make a list of URLs
Pick a lens to work on, and then pick ONE Flickr gallery on the lens that you want to replace. Open a spare text document and make a list of the URLs of each Flickr page that Flickr module USED to link to. If you used my “copy HTML” trick above, these URLs will be hidden in the part I’ve bolded here:
<a target=”_blank” title=”Tetrahedron by Peter Rosbjerg” href=”http://www.flickr.com/photos/peterrosbjerg/3988329232/”>
This list will be your “link list”: it’s where the clickable thumbnail graphics are going to point to. Next, we need to create those thumbnails.
Create Small Images for Your Clickable Thumbnail Gallery
Now we need a thumbnail-sized graphic of each photo. To get a small graphic, go to each original photo’s page on Flickr. Double-check that it’s Creative Commons – Commercial Use Permitted (here’s how). Once you’re sure you’re allowed to use it, pick “View All Sizes” under the “Actions” menu. The 75×75 option will give you a square, small thumbnail, an excellent size for tiling.
Or use this free online image editor or other online image resizers to resize a larger-version of the photo to exactly the dimensions and crop that you desire.
Save all your image thumbnails in a folder on your computer. In the “prep file” you started above, make a note of the name of each thumbnail graphic you saved next to the URL of the Flickr page it’s going to point to. (The URL list you created earlier.)
Upload the Thumbnail Images Off-Site
Now we have to upload the thumbnail graphics to an image host somewhere on the web. Image hosts include Tinypic.com, Picasa.com, or Photobucket. None of these options are ideal, since free image hosting services usually have a bandwidth limit and will temporarily hide the image if too many people view graphics in your account within the same month. (I bet Picasa is the best option, as it’s Google’s baby). Another option is to host images on your own website. I use ICDSoft to host this blog and a few other blogs and websites, PLUS all my Squidoo graphics.
See my How to Upload Images tutorial for how to upload images and find their URLs on Picasa and Photobucket.
After you upload each image, open the text document where you saved the list of Flickr photo URLs, and copy the URL of the thumbnail image next to its corresponding Flickr page. (Remember, each thumbnail graphic is going to link to the full-sized photo on Flickr.)
Hand Code a Clickable Thumbnail Gallery in a Squidoo Text Module
So now you’ve got:
- A list of Flickr pages you’re going to link to
- A collection of small thumbnail graphics of those photos hosted somewhere else
- A list of the URLs of the thumbnail graphics
The next step is to hand-code a gallery of clickable thumbnails linked to their corresponding Flickr photo pages. For this, we’ll use HTML in a Squidoo Text Module.
I’ve written two tutorials which can easily be adapted to do this. The easiest way is to Make a Side-by-Side Image Gallery (that includes a template you can copy), changing the “width” attribute to whatever width you chose for your thumbnails. The imageLocation will be the URL of the thumbnail graphic, and the Link will point to the Flickr page with the full-sized photo.
The other possibility is to make a 100×100 Thumbnail Photo Gallery, borrowing fancy rollover codes I hacked from the Monster Spirit Boards. I was using this to make fake “Featured Lenses Modules” that include links to some of my related hubs as well as my lenses, but it will work with any thumbnail images you’ve resized to exactly 100×100. Take a look.
Note that if you embedded Flickr photos on your lenses using the “Share” HTML codes that Flickr provides, some of those photos may also be disappearing intermittently, so you’ll want to upload them offsite on Picasa, Tinypic, Photobucket, or your own webhost as I described above.