Wednesday, March 14, 2007

Testing ways to make images in post, when clicked, open in a new window

A reader of one of my blogs asked a question - how to make images in Blogger pops up in a new window (I assume he is referring to images in a Blogger post, not the sidebar, etc.) pops up in a new window.

Images that are uploaded via the photo upload Blogger photo upload icon icon in the toolbar of the post editor opens as enlarged image in the same window. Unfortunately, he did not mention whether he is refering to publishing photos using the photo upload icon or using the <img src="photo URL" /> tag. I can't remember if using the <img src="photo URL" width="X"> tag to display the image will open in the same window or a new window, but I am a retired scientist and so like to experiment. So, inaddition to trying to make images uploaded to open in new windows when clicked upon, I am going to use the <img src="photo URL" /> tag to display an large image already hosted on the web and see what happen when I click on it and also try making some modification to the script that display the image when uploaded via the photo upload icon if the first attempt failed to produce.

I uploaded the photo below using the photo upload icon and modified the script generated by Blogger (note: you have to be in the EDIT HTML mode to be able to do this):

Golf course, Pahang, Malaysia
Golf course, Pahang, Malaysia


Well, click on the photo and confirm for yourself that the photo opens in a new window. I did that by adding target="_blank" in the script generated by uploading the photo via the photo upload icon.The script for the above image I put in the scroll box below, with the added target="_blank" colored red:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_sEyw6txVACs/RftVg-UpnaI/AAAAAAAAAcg/vjjp21lb0-o/s1600-h/Golf+course,+Pahang.jpg" target="_blank"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://2.bp.blogspot.com/_sEyw6txVACs/RftVg-UpnaI/AAAAAAAAAcg/vjjp21lb0-o/s400/Golf+course,+Pahang.jpg" border="0" alt="Golf course, Pahang, Malaysia"id="BLOGGER_PHOTO_ID_5042718232745188770" /><center>Golf course, Pahang, Malaysia</center></a>


BTW the photo is copyrighted by Tourism Malaysia and is meant to be used to promote Malaysia. I know that golf can be an expansive affair in many countries, and if you happens to be from one of those country, and you are a golfer, do pay Malaysia a visit as golfing in Malaysia can be much cheaper. Have a nice and economical golfing holiday in Malaysia.

I am also going to test if photo published by using the <img scr="photo URL width="X" /> tag will open in a new window or not, so I am going to publish a photo of a native Dayak dance below"



Well, I published the post, and found that the image is not clickable. But there are ways to make the picture clickable and either open in the same or new window as I choose, so I am not going to put the same photo below, but makes it go to the enlarged photo in a new window.

.

Go ahead, click on the above image and see what happens. If you want to see the HTML I wrote for the 2 photos above, look at the codes I put in the scroll boxes below:

HTML for the first photo:

<img src="http://photos1.blogger.com/x/blogger/1313/787/1600/514561/Dayak%20Cultural%20Dance.jpg" width="395" />


HTML for the second photo:

<a href="http://photos1.blogger.com/x/blogger/1313/787/1600/514561/Dayak%20Cultural%20Dance.jpg" target="_blank"><img src="http://photos1.blogger.com/x/blogger/1313/787/1600/514561/Dayak%20Cultural%20Dance.jpg" width="395" /></a>


BTW, the photo is copyrighted by Tourism Malaysia and can be used to promote Malaysia. 2007 is VMY (Visit Malaysia Year) so I hope you will hop over to Guide to Malaysia and see what awaits you.

Update 24 March 2007: This is something I have been doing before, but forgot to add to this post. To make an image open in a new page, you will place your cursor (mouse) on the image, right-click and select "open in new window/tab". However, this is not controlled by you, the poster author, but by the reader

Update 12 May 2007: Just thought it is a good idea to point to other posts which describe other ways of publishing images which open in the same or new windows. They can be found at Uploading and manipulating images in Blogger. The part about using the <img> tag is towards the bottom of the post.

There is a further update to the above post at Uploading and manipulating images in Blogger Part 2.

19 comments:

Rachel said...

Hi , I am a Blogger of less than a year and I recently upgraded my Blog and Now when I go to "Add and Arrange Page Elements" page it doesn't show an add page elements button at the side. So, right now, the only way to put something there is to erase what I've already done and copy over it with something new??? How do I fix this problem??? I don't know if I explained right but I need help?
My e-mail is rnorwood2@marykay.com .
Thank you

de_kerinchi said...

dear Peter Chan

Why my blog look funny in mozila firefox?

Peter Chen said...

Who can tell? You didn't even provide a link to the site.

Peter
Dummies Guide to Google Blogger
"online book" in progress

Peter Chen said...
This comment has been removed by the author.
de_kerinchi said...

dear, Peter Chen

sorry...this my blog link

http://www.anjunglarik.blogspot.com

tq

Kan said...

Thank you for your blog, it is so helpful. I have read most of your posts on images, though, and still cannot figure out how to post images of book covers in my sidebar. It is so much better than just posting book titles, but I can't figure it out. My blog is: www.nurtureblog.blogspot.com and email is kandrastrauss1@yahoo.com

Thanks for your help.

IF THE BIRDS KNEW said...

Hi first i want to say THANKS so much for your blog...i would be lost without you! second I have these strange grey squares that appear randomly on my blog and I have no idea what they are or how to rid myself of them. thanks.
ps i just upgraded with graphic thanks to you!

Peter Chen said...

Hi It the birds kenw,

I checked the blogs in your profile. and in none of them were there any gray squares. Anyway, if there were, except for undisplayed photos, I cannot even try to guess what they are.

Try a test post with just text and see if there are any gray square in the post.

Peter
Dummies Guide to Google Blogger
"online book" in progress

Hulu Langat said...

Hi Peter

I noticed that in new blogger, the images are clickable if uploaded with image size 'small' selected but not clickable with 'medium' or 'large'. In 'medium' nd 'large' mode, pic URL is not shown, just image id and src.
Any suggestions on how to overcome this.
Thank you

Peter Chen said...

I am not sure, but if I remember correctly, I uploaded a small image (an icon) and selected "large" and clicking on the published image still cause the image to open in a new page. If I have time I may do some testing and report the result in this blog.

Peter
Dummies Guide to Google Blogger
"online book" in progress

de_kerinchi said...

Hai Peter chen,

TQ for your guides, my uploading picture now open in new windows.

The In Crowd said...

Hello Peter - - I'm happy to have found your blog, and this topic. I'd like to carry it a bit further, and ask about adding navigation links (previous, home, next) to the enlarged picture.

I'm relatively new to blogger, but I've figured out adding ' target="blank" ' for clicking to open in a new window, and I've also managed to explore resizing options with that picture in it's new window.

What I'm hoping to find is a way to have navigation links appear under the click-enlarged picture. (Either on the same page, or in it's newly-opened page.)

Here's a post from my blog that could benefit from the trick I'm suggesting:

http://learning2share.blogspot.com/2007/03/clutch-cargo.html

It shows a sequential series of images, pages from an old comic strip. Currently you need to click on each one to see an enlarged version.

Ideally, what I'd like is to show each small image as I have here, but when you click on one it would show the enlarged version, plus navigation links beneath it pointing to 'previous page' and 'next page'. (plus 'home' if opening on original page, or 'close' if opening in new page)

Looking at sources for other blogger navigation links, I think I grasp the basic code, which includes plugging in the URL's for each page you're pointing to. That part I can understand.

The part that escapes me is where and how to add a proper code that will restrict the navlinks to only appearing with the enlarged image.

Each time I've experimented with it I wind up with awkward-looking links appearing with the *original* image.

Any help you can give me is much appreciated. I have lots of other ideas for future posts that would function better with this application.

Blogger Beta has been a great excuse for learning new things while having fun!

Thanks for your time!

Peter Chen said...

Hi The In Crowd,

I am afraid I am unable to help.

Peter
Dummies Guide to Google Blogger
"online book" in progress

WebStractions said...

Peter,

To clarify a few things. The "target" attribute for anchor links specifies where the new document will be loaded. As you surmised, _blank will open it into a new window. Also using a target="new" will do the same thing.

On images. The Html editor does a lousy job of coding IMG elements. Generally the minimum you need is the SRC, HEIGHT, WIDTH, and ALT. The editor omits all but the SRC attribute.

It is good coding pratice to define the height and width of images. Your browser will display what it can and when it can. Text usually comes in quickly, but images do not. The browser does not know the dimensions of the actual image until it is recieved in entirety.

The browser will put a 'placeholder ' where the image is supposed to be. If the dimensions are unknown, then so is the placeholder. I am sure you have seen pages that "jump" all over the place when they are loading ... and it is usually a page with tons of images on them. Bad practice.

Your "workaround" for specifying a max width is something I would of not thought of. I am assuming this is to keep your middle column from exploding.

Generally, you should not load the original image into the document post, but use a "thumbnailed" & optimized version of the original. Some images are so large that it slows down the rendering of the page while waiting for it to load. Makes for a bad user experience.

I suggest using a program like IrfanView, a great little image optimizer and resizer. You can convert any image and make it ready for the web. Best of all it is free. Lots of webmasters use it, and have been for years.

Hope this helps, and drop me a line if you have any questions.

Peter Chen said...

Hi Webstractions,

Thanks for the extra information. For your information, I use Irfanview a lot. The above link is actually a link to a post about using Irfanview for Blogger posts.

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

WebStractions said...

Thank you Peter.

I actually came across that IrfanView post of yours later on in the evening, smacked my head (doh).

Anyhoot, doesn't hurt to mention it more than once. I think it is a terrific webmastering tool. One of those must-haves!

C├ęsar said...

Hey Peter, I'm having the gray square problem too. I did a screen capture:

here

The squares show up in different places and are very annoying. The first time i noticed them was with an image that I had rotated in iphoto...is Iphoto adding some code to the image that is screwing it up in firefox on blogger? safari seems fine.

but I use firefox and it drives me nuts!

here is my blog.

thanks!
cesar

Peter Chen said...

Hi Cesar,

Visited your blog. You sure have lots of photos in it. However, I am unable to see any gray square. In any case, I wouldn't know the reason for it other than suggesting using different ways to publish the photos as descibed in these posts:
Uploading and manipulating images in Blogger

Uploading and manipulating pictures Part 2

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

Peter Chen said...

Hi de_kerinchi,

I am sorry but I didn't get email notification for your comment so apologise for late reply. Here is your comment:

"dear, Peter Chen

sorry...this my blog link

http://www.anjunglarik.blogspot.com"

I checked your blog with both Firefox and Flock and they both looked OK to me. What is the problem?

Peter (Blog*Star)
Blogger for Dummies