Clicking pictures to enlarge

[DDolan1075]

THis is a response to a previous question asked directly from Blog support:

"In terms of clickable photos, I see you're using photobucket to embed your photos. I'm not so familiar with the code options that photobucket have but it seems your Caracara entry had the correct code for clickable entries. Your code from your Caracara entry looks like this below, so this is what you need. You'll see that <a href="photonamehere.jpg"> is at the beginning of the photobucket code which is the code to make it clickable and at the end of your photo entry is </a> which closes out the clickable part of the code:


<a href="http://i317.photobucket.com/albums/mm392/ddolan1075/081206_6021Katy_edited-1_filtered.jpg"><img style="DISPLAY: block" height="214" alt="" width="300" src="http://i317.photobucket.com/albums/mm392/ddolan1075/081206_6021Katy_edited-1_filtered.jpg" /></a>

end..."

I tried to copy and paste this into the insert image function key, but no picture loaded. I opened the cara cara picture and I could not find extra code, just this:

http://i317.photobucket.com/albums/mm392/ddolan1075/081206_6021Katy_edited-1_filtered.jpg

Where does all of the other code get entered?

I tried saving a picture through photoshop for web. It saved a gif file but still no difference there. Here are the different options from photobucket, taken from this page:

http://s317.photobucket.com/albums/mm392/ddolan1075/?action=view&current=090212_10282BrazosBend.jpg

Share URL - Email & IM
http://s317.photobucket.com/albums/mm392/ddolan1075/?action=view&current=090212_10282BrazosBend.jpg

Direct Link - Layout Pages
http://i317.photobucket.com/albums/mm392/ddolan1075/090212_10282BrazosBend.jpg

HTML Code - Websites & Blogs
<a href="http://s317.photobucket.com/albums/mm392/ddolan1075/?action=view&current=090212_10282BrazosBend.jpg" target="_blank"><img src="http://i317.photobucket.com/albums/mm392/ddolan1075/090212_10282BrazosBend.jpg" border="0" alt="Sandhill Crane"></a>

IMG Code - Forums & Bulletin Boards
http://i317.photobucket.com/albums/mm392/ddolan1075/090212_10282BrazosBend.jpg

[admin]

Hi Dave, what you want is the "html code for websites and blogs". Copy the photobucket code. In this case it is:

<a href="http://s317.photobucket.com/albums/mm392/ddolan1075/?action=view&current=090212_10282BrazosBend.jpg" target="_blank"><img src="http://i317.photobucket.com/albums/mm392/ddolan1075/090212_10282BrazosBend.jpg" border="0" alt="Sandhill Crane"></a>

Go to your entry (either edit an existing entry or add a new entry) and click the "Source" button. If you're editing an existing entry, you'll see a lot of code. Click your cursor where you want to put the picture and then paste the photobucket code in.

Click "Source" again and you'll get a preview of how the photo looks. It will be large as it will be the original size. Click the picture and you should see some little boxes on the corners of the pictures. Drag one of these in to resize it to a smaller size. "Save changes" and then take a look at the results. Clicking the image will take you to the original image at photobucket.

Here's a test page using some photobucket images:
http://www.surfbirds.com/blog/ddolantest/10226/test.html
________
Rolls-Royce Corniche (http://www.bmw-tech.org/wiki/Rolls-Royce_Corniche)

[DDolan1075]

I wanted the program to size the picture so I didn't change the look of the picture. Here is what I think it takes:

Before Processing using Direct Link:

http://i317.photobucket.com/albums/mm392/ddolan1075/090213_10609HornsbyBend.jpg

After Processing using the insert/edit image button:
<img style="DISPLAY: block" height="200" width="300" alt="" src="http://i317.photobucket.com/albums/mm392/ddolan1075/090213_10609HornsbyBend.jpg" />


Final process:
<a href="http://i317.photobucket.com/albums/mm392/ddolan1075/081206_6021Katy_edited-1_filtered.jpg"><img style="DISPLAY: block" height="214" alt="" width="300" src="http://i317.photobucket.com/albums/mm392/ddolan1075/081206_6021Katy_edited-1_filtered.jpg" /></a>

Before processing is AAAA
After processing is BBBB
Other code is the rest

<a href="AAAA">BBBB</a>

It's a LOT of work and I am not sure how it got done on its' own

[DDolan1075]

<a href="AAAA" target="_blank">BBBB</a>

Forgot to make open in seperate window.

[admin]

Hi Dave, I agree this sounds like a lot of work. I was disappointed that photobucket didn't resize your pictures. Flickr, for instance, will take any photo you upload and make different sized versions and give you the code to make clickable images for inserting in to blogs. You might want to check it out before you spend a lot of time re-editing your posts:
http://www.flickr.com/

Going forward, another possibility to think about if you don't need to have clickable images, is to just resize all your images to say 500 pixels wide before you upload them to your blog album. You can do this in an automated way in photoshop that will batch process all your images. See this nifty tutorial:
http://www.creativemac.com/2002/04_apr/tutorials/psbatch.htm
You could decide 500 pixels wide is the largest you want to go and then have photoshop resize all images in a folder on your hard drive so that when you upload to your blog, you don't have to worry about coding anything at all.

PS. Congrats on picking up html so quickly, you seem to be getting a good grasp now. At least that's a bright point.
________
marijuana pictures (http://trichomes.org)

[DDolan1075]

It wasn't quick, just worked through it.

What do you think is better from a reader's perspective, the clickable picture, or a larger pic without ability to enlarge. I can make pictures that size with photoshop but then it would not be able to enlarge. Not sure what is better and how much longer it takes to load a larger pic.

[admin]

I wonder if the clickable picture is worth the extra effort, when your beautiful pictures are really there to simply illustrate your narrative.
________
KTM 450SX-F (http://www.cyclechaos.com/wiki/KTM_450SX-F)

[admin]

Hi Dave, I think the photobucket widget looks great. Nicely done.

In terms of the photo sizes, take a look at:
http://www.surfbirds.com/dolantest/dolan.html
and compare to your blog page in terms of how long it takes to load the page. You may want to restart your browser before doing so, in case it caches your photos and, therefore, loads them quicker. What we have on the test page are photos that are all 600 pixels wide and also "save for web" in photoshop, so each photo is about 50kb, compared to your blog page where each photo is a few hundred kb each. On your blog, you've made the surface area smaller but the actual image being called up in your blog entry is the original large image (either at photobucket or your blog album). It's still a 200kb file or so being downloaded just in a smaller surface area, so still takes a while to load if you have a page with a dozen or more images.

I also halved the size of your header image resolution with "save for web". You may feel it loses some of the color richness though. However, it all helps with page loading time.

Please feel free to ignore any of this and stick with what you've got. I think your blog looks great
________
Yamaha SA2200 history (http://www.yamaha-tech.com/wiki/Yamaha_SA2200)

[DDolan1075]

I like the look of yours better. I think that I will try that and see what happens on the next entry. I know consistency would be better, but I don't think that I will go back and change my other posts. I definitely like the larger pictures.

Thanks for all of your hard work!

[DDolan1075]

I believe that I mentioned this in another discussion, but can I get your code for these pictures and title, since it is already done? Thank you again for your help.

[admin]

Hi Dave, I will go ahead and upload the new images now along with banner and I'll edit your template to match the demo I prepared up above. I will PM you, so check your messages. Best, Admin
________
vapir one vaporizer (http://vaporizer.org/reviews/vapir-air-one/)

[DDolan1075]

Thank you. I appreciate anything you do.

[NatureTalk]

For what it's worth, here's some image code I use. The purpose of this code is to:

1) fit all images within the space available. That is, the image will fill available space in the column in every case, even if photo is larger or smaller than the space available. See this part of code: style=width:97%;

2) when you click image, it opens full size in a new window.

<a href = "http://nature-talk.com/images/bird.jpg" target=window><img style=width:97%; border=2 src="http://nature-talk.com/images/bird.jpg" alt ="bird"></a>