Booman Tribune

fOtofair2006v3.0: Creating clickable thumbnails

by fOtofair2006
Sat Oct 7th, 2006 at 12:29:28 PM EST

Hello! In this installment we're creating clickable thumbnails for the three photo hosts recommended in the last fOtofair diary. Thumbnail files are smaller and this allows the diaries to load quickly (which is important for BTers on dial-up), while offering access to higher resolution images. Check out the great explanation of clickable thumbnail links written by ejmw.

Once again, we welcome your questions and feedback. Please feel free to practice creating clickable thumbnails in the comments section below. Most of all, have fun!

Please recommend this diary so that everyone has a chance to read it. To find the most up-to-date diary when it has fallen of the rec list, check out the froggy bottom cafe which posts a link on the virtual bulletin board.

To make this diary more manageable, click on the photo host site you are using to jump to that particular section of the diary.

Photobucket | Flickr | Imageshack

::

Photobucket

Photobucket, like ImageShack, generates clickable thumbnails automatically. There are a few different variations of html code produced for use on different forums, blogs, etc., so you have to manipulate the code a bit for it to work at BT.

To create clickable thumbnails:

Upload your photo.

Select the photo you want to make thumbnail for by checking the little box underneath each image.

Scroll to the bottom of the page to locate the button Generate HTML and IMG code and click.

For BT, copy the code in the first box labelled HTML clickable thumbnails for Ebay, Livejournal, MySpace, etc..

Paste the code into the comment box at BT or a text file.

BT does not allow some code, so we have to remove that part before the clickable photo will work. Remove the following bits:

alt="XXX"
target="blank"
<center> </center> codes

This is what the final clickable thumbnail code should look like:

<a href="http://www.LARGE_PHOTO_CODE.jpg"><img src="http://www.thumbnail_code.jpg"></a>

Important! Before posting, test to make sure the photo appears and the link works by previewing the comment and clicking on the thumbnail. If the thumbnail displays and the link opens, then hit post.

::

Flickr

Unlike Photobucket and Imageshack which generate clickable thumbnails automatically, you have to manually create them in Flickr. It's not difficult to do -- just a matter of copying and pasting the urls for both the thumbnail and the large photo.

To create clickable thumbnails:

Upload your photo.

Select the photo you want to make the clickable thumbnail for by clicking on the button All Sizes on top of the photo.

A new page will open where you can then select the size of photo and corresponding code. To make the clickable thumbnail you will have to copy two sizes: the thumbnail and the large photo.

Select the large size photo to get the code, which will be displayed below the image at the bottom of the page.

Copy the code in Option 2 (Grab the photo's URL) and paste to the BT comment box or a text file.

Next, select the thumbnail photo to display the code. Copy the code in Option 2 and paste in the BT comment box or text file.

Combine the two codes to create the clickable thumbnail as follows:

<a href="http://www.PASTE_LARGE_PHOTO_CODE_HERE.jpg"><img src="http://www.paste_thumbnail_code_here.jpg"></a>

Important! Before posting, test to make sure the photo appears and the link works by previewing the comment and clicking on the thumbnail. If the thumbnail displays and the link opens, then hit post.

::

ImageShack

ImageShack, like Photobucket, generates clickable thumbnails automatically. There are a few different variations of html code produced for use on different forums, blogs, etc., so you have to manipulate the code a bit for it to work at BT. Also, we've found that the link that opens to the large sized photo with the auto generated thumbnail has a banner ad running across the top of the page. For some BT users running Macs, this ad caused their web browser to crash. Because of this, we'll walk through setting up the clickable thumbnail linking to an ad-free large photo.

To create thumbnails:

Upload your photo.

We recommend that when you upload your photo you select the box that turns off the size/resolution bar for thumbnails. This black bar is a small strip that runs along the bottom of the thumbnail photo, and identifies the height, width, and size (in kbs) of the large photo. To turn off the size/resolution bar click the little check box:

Click on photo, and on the next page locate the code for thumbnails. Copy that code into the comment box at BT or a text file.

Next, locate the large photo code that will give you the ad-free photo.

You need to paste the large photo code into the autogenerated thumbnail code. Use the following as a guide:

<a href="http://www.PASTE_LARGE_PHOTO_CODE_HERE.jpg"><img src="http://www.thumbnail_code.jpg"></a>

BT does not allow some code, so we have to remove that part before the clickable thumbnail will work. Remove the following bits:

target="blank"
alt="XXX" (if present)

Important! Before posting, test to make sure the photo appears and the link works by previewing the comment and clicking on the thumbnail. If the thumbnail displays and the link opens, then hit post.



Display:
Early next week, we'll post the templates to use in creating your fOtofair diary(s), so stay tuned!

Comments and suggestions and practice thumbnails are welcome.

And if you have an easier way to do thumbnails, please share!

by fOtofair2006 (fotofair2006@yahoo.ca) on Sat Oct 7th, 2006 at 12:31:07 PM EST
For html assistance! :)
by fOtofair2006 (fotofair2006@yahoo.ca) on Sat Oct 7th, 2006 at 12:55:14 PM EST
[ Parent ]
My pleasure :)  I'm looking forward to the fair!

Tengo un sueño.
by ejmw (ewitham (at) umich (dot) edu) on Sat Oct 7th, 2006 at 01:21:32 PM EST
[ Parent ]
I'm trying to take the plunge.

Hopefully an amazing butter cow will appear.





If you want things to get better, be prepared to deal with change.

by Kahli on Sat Oct 7th, 2006 at 03:45:11 PM EST
Woopee!.

Thanks for the instructions.

If you want things to get better, be prepared to deal with change.

by Kahli on Sat Oct 7th, 2006 at 03:46:36 PM EST
[ Parent ]
That is definitely a butter cow ... LOL ... Looks great!

Next we'll tackle the templates, so that we'll just have to copy that clickable thumbnail code into the template and then add a photo description. :)


parvum opus

by olivia on Sat Oct 7th, 2006 at 08:44:28 PM EST
[ Parent ]
Is it cool to post a thumbnail that links directly to my own photoblog/website?  Like this.....

by agi (agi500 at gmail.com) on Sat Oct 7th, 2006 at 04:21:57 PM EST
There is no problem with linking the large size photo to your photoblog, but the thumbnail image has to be resized smaller. If you only shrink down the height and width it doesn't change the overall file size (KBs), so large files will stay take too long to load even if they appear as thumbnails. Does that make sense?

For example, with flickr:
original image is (681 x 752) and 435 KB
the thumbnail is (91 x 100) and 8.29 KB:

With Photobucket (and ImageShack is similar):
original image is (681 x 752) and 142.3 KB
the thumbnail is (145 x 159) and 4.78 KB

Do you have a photo program (like photoshop for instance) where you can resize the images and make the files smaller? You'd have to upload these new thumbnails then, so you'd have both the thumbnail and the large image on your server. Or you could upload the thumbnails to one of the free host sites.

I know ejmw and Omir mentioned using their own servers in the last diary. Maybe there's some other easier way of creating thumbnails ...


parvum opus

by olivia on Sat Oct 7th, 2006 at 08:43:03 PM EST
[ Parent ]
Ahh...I got it.  I do have thumbnails for all my photos.  So like this...

by agi (agi500 at gmail.com) on Sat Oct 7th, 2006 at 11:30:24 PM EST
[ Parent ]
That's it exactly ... :)


parvum opus
by olivia on Sat Oct 7th, 2006 at 11:52:40 PM EST
[ Parent ]
It all goes so much easier when one has a little guidance.

Nonviolent Action information available here
by NorthDakotaDemocrat (NorthDakotaDemocrat at yahoo dot com) on Sun Oct 8th, 2006 at 04:34:16 AM EST
[ Parent ]
by olivia on Sun Oct 8th, 2006 at 12:21:59 PM EST
[ Parent ]
BBQ Bonfire 2006

I'm using flickr, and everything seems to work well... when one actually follows the instructions and uses the URL Option #2 in both cases.

Nonviolent Action information available here

by NorthDakotaDemocrat (NorthDakotaDemocrat at yahoo dot com) on Sun Oct 8th, 2006 at 04:20:58 AM EST
Not too hard once you know which info goes where, right? :)


parvum opus
by olivia on Sun Oct 8th, 2006 at 12:23:07 PM EST
[ Parent ]
Thanks, especially to ejmw!

Fear will keep the local systems in line. -Grand Moff Tarkin Survivor Left Blogistan
by boran2 (blogistan@yahoo.com) on Sun Oct 8th, 2006 at 09:20:38 AM EST
Free Image Hosting at www.ImageShack.us


"Only when we are no longer afraid do we begin to live." Dorothy Thompson, Journalist
by Indianadem on Sun Oct 8th, 2006 at 07:22:31 PM EST
And might I add, a very fine specimen you've experimented with ... ;)


parvum opus
by olivia on Sun Oct 8th, 2006 at 07:36:11 PM EST
[ Parent ]
Thank you, olivia and thanks to ejmw, Andi and any others involved in helping us code challenged froggies;-)

"Only when we are no longer afraid do we begin to live." Dorothy Thompson, Journalist
by Indianadem on Sun Oct 8th, 2006 at 08:23:44 PM EST
[ Parent ]
by Family Man (FamilyMan1atbellsouthdotnet) on Mon Oct 9th, 2006 at 12:39:48 PM EST
It appears to work. :)

Mundane Doesn't Describe It
by Family Man (FamilyMan1atbellsouthdotnet) on Mon Oct 9th, 2006 at 12:40:15 PM EST
[ Parent ]
And it's very pretty too ... :)


parvum opus
by olivia on Mon Oct 9th, 2006 at 01:43:08 PM EST
[ Parent ]
Testing..

 

by tzt on Mon Oct 9th, 2006 at 12:40:31 PM EST
Looks great. :)


parvum opus
by olivia on Mon Oct 9th, 2006 at 01:43:15 PM EST
[ Parent ]
Thanks!
by tzt on Mon Oct 9th, 2006 at 01:48:22 PM EST
[ Parent ]


Display:
Go to: [ Booman Tribune Homepage : Top of page : Top of comments ]
Menu
Login
. Make a new account
. Reset password





Proud member of

The Liberal Blog Network

a FeedBurner Network


Advertise in The Liberal Blog Network

Subscribe to this network

A-List Blogger

Find textbooks at Alibris!

NOTE: Overstock bests Amazon's prices and is "blue."

THE BOOKS WITH "BUZZ":
______________

Learn the real story behind the WMD in Iraq:

The Way of the World: A Story of Truth and Hope in an Age of Extremism
by Ron Suskind

Read Barack Obama's vision for America:

The Audacity of Hope: Thoughts on Reclaiming the American Dream
by Barack Obama

DaveW recommends:

I Am a Strange Loop
by Douglas Hofstadter

Need some laughs?

I Am America (and So Can You!)
by Stephen Colbert

rae recommends:

Dark Ages America: The Final Phase of Empire
by Morris Berman.

On BooMan’s shelf:

The End of Iraq: How American Incompetence Created a War Without End
by Peter W. Galbraith

This looks interesting:

Adventure Divas
by Holly Morris

Here’s a good one from
Elizabeth Gilbert:

Eat Pray Love
by Elizabeth Gilbert

"Crash" * Best Motion Picture, Academy Awards * Only $11.79 at Overstock * 2006 SAG Winner, Best Ensemble

Check out
Powell's new section:
NEW FAVORITES

Selected new arrivals at 30% off

Recommended by Indianadem and ejmw:
The Conscience of a Liberal
by Paul Wellstone

From northcountry’s bookshelf:

The New Golden Age:
The Coming Revolution Against
Political Corruption and Economic Chaos
by Ravi Batra

A novel about contractors in Iraq from the woman that runs The Spy That Billed Me:

Outsourced: A Novel
from RJ Hillhouse.


SOTW-120x90
Download Sleeper Cell on iTunes (Better than "24") Download Weeds on iTunes (Hilarious 1/2-hour adult comedy starring Mary-Louise Parker) Download Late Nite with Conan O'Brien on iTunes
John Belushi - SNL
Download South Park on iTunes
Verve Vault

James Hunter - People Gonna Talk:
James Hunter - People Gonna Talk
icon


Great Deals
----- * ^ * -----

Find mystery novels by Nancy Pickard ("Kansas")



Challenging Empire: How People, Governments, and the UN Defy US Power by Phyllis Bennis (interviewed on DN!)


Featured by Keith Olbermann, New (Powell's Sale): Rogue State: A Guide to the World's Only Superpower by William Blum (whose other books merit serious consideration)


"Explosive" State of War: The Secret History of the CIA and the Bush Administration
by James Risen


The book the CIA doesn't want you to read: Jawbreaker: The Attack on Bin Laden and Al Qaeda: A Personal Account by the CIA's Key Field Commander
Larry Johnson's review


BT's all-time best seller:

PERMACULTURE:
A Designers' Manual

$79.95 * Sale: $59.95


Unequal Sisters: A Multicultural Reader in U.S. Women's History (Third Edition)


The Undercover Economist: Exposing Why the Rich Are Rich, the Poor Are Poor And Why You Can Never Buy a Decent Used Car!


The Worst Hard Time: The Untold Story of Those Who Survived the Great American Dust Bowl
by Timothy Egan


Green Press Initiative
----- * ^ * -----


Journalistas: 100 Years of the Best Writing and Reporting by Women Journalists by Eleanor Mills * NYT review


Bury Me Standing: the Gypsies & Their Journey


1491: New Revelations of the Americas before Columbus



Brokeback Mountain
by Annie Proulx
----- * ^ * -----
Check out Powell's
"At The Movies"


Imperial Ambitions: Conversations on the Post-9/11 World by Noam Chomsky (Power & Terror: Post 9-11 Talks)


The Price of Privilege:

How Parental Pressure and
Material Advantage Are Creating a Generation of
Disconnected and Unhappy Kids

by Madeline Levine


Save 35-70% on
name brand clothing,
footwear, and outdoor gear
at SierraTradingPost.com

:





We listened to PEN American Center's "State of Emergency" and found 1940s books by Curzio Malaparte only at Alibris. (Selection (MP3) excerpted from "The Skin.")

Alibris - Books You Thought You'd Never Find
Banned Books * Are you a fan of Film Noir, Art House, Documentaries or Hong Kong Action? * Searching for a long-lost children's book or a first printing of Miles Davis' Kind of Blue on vinyl? Find it at Alibris!

:
:
www.Patagonia.com



Booman Tribune Homepage
admin@boomantribune.com
powered by Scoop

A-List Blogger

Blogarama - The Blog Directory

More blogs about Blogs at Technorati.

Listed on BlogShares

© 2007 Booman Tribune