« Testing Picassa | Main | Testing Publication »

How to pop-up a larger version of a picture

When you upload a photo and you want to add the photo to your post, use the Show me the HTML so you can then place the photo where you want in your post.

There are two options, one is a Popup Image. This gives you the code which will have a link that a reader can click and the image will pop-up outside of your post. As in this link :
View image

The Embedded Image will give you code that will allow you to post it into your text as below:


Skagit_Tulips-030.jpg


But did you know you can combine these two to make a clickable image that will pop-up a larger image? It is very easy but does require a little bit of HTML manipulation.

1. Decide how wide you want the pop-up. Upload the wider (larger) photo. (You will adjust the code for the embedded photo to have a width of your blog in a later step).

2. Select Show me the HTML and select Popup Image. Copy and past the the code from the box BUT do not close the box.

3. Here is the first trick - Right Click outside the box in the white space and select Back. This will take you back to the pop-up which will give you the code.

4. Now select Embedded Image. Copy the code and replace the word "View Image" with the code that you get from the embedded option.

5. Once last thing - in the string you got for the embedded option find the width="xxx" option and change it to be width ="500" (or what is used on your blog) and remove the height="xxx". The browser will automatically scale your picture to be only 500 pixels wide so it will fit embedded on your blog.

Voila - how you have an image you can click and display larger in a pop-up. Below is a clickable image.

Skagit_Tulips-030.jpg


Tips:

1) What if I can not go back after getting the code for the pop-up?

No worries - just upload it again with the exact same name. It will ask if you want to overwrite? Say yes. Now you can get for the embedded code.

2) What will the code look like?


Popup Code:



Embedded Code with width at 500 and no height:



Combined code


Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

This page contains a single entry from the blog posted on November 29, 2009 5:55 PM.

The previous post in this blog was Testing Picassa.

The next post in this blog is Testing Publication.

Many more can be found on the main index page or by looking through the archives.