Search This Blog

Saturday, March 29, 2008

Clicking on image does not enlarge image: Why and how

This is a frequent question. Why is it when I click on an image (photo, screen shot, etc.), it does not enlarge and how do I make it enlarge?

I was told that if you upload a photo or image in the Blogger post editor window COMPOSE mode, and you drag and drop the photo or image, it will result in exactly the above problem. I myself practically never use the COMPOSE mode, always the EDIT HTML mode as it gives me more control over my blog posts plus allow me to do things I cannot do in the COMPOSE. Further, using the COMPOSE mode will introduce lots of formatting tags which I don't want in my posts. So I myself practically never use the COMPOSE mode and have never come across that problem myself.

I have yet to test it at Testing Blogger Beta (now New Blogger) to see if it is true or not. However, if this was your experience, hope you will give us some feedback by leaving a comment.

Solution to photo not enlarging when clicked on

The solution to the above, if what was told to me is true, is to get yourself familiar with preparing posts in the EDIT HTML mode. Now, whenever you upload a photo direct from Blogger post editor window, the photo will always appear at the top of the post irrespective of where your mouse cursor is. If you are in the EDIT HTML mode, instead of seeing the photo displayed, you will see a script like the one below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_jizoPL28qCY/R-45gy_bZVI/AAAAAAAABVw/JCeQC1gImHw/s1600-h/missing+girl+photos+savannah.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_jizoPL28qCY/R-45gy_bZVI/AAAAAAAABVw/JCeQC1gImHw/s400/missing+girl+photos+savannah.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5183143456756426066" /></a>


What I normally do is to highlight the whole script, right-click, select copy, scroll down to where I want the photo and paste it there. Within the script, there will be alt="" added. This is for your convenience so that you can type within the double quotation marks something about the photo. For example, the above are photos of a missing girl in Australia, so I edit it to alt="missing girl photo, Savannah-Jade". This is so that search engines knows what that photo is all about. Search engines cannot read photos, so this is good for SEO (search engine optimization) purposes. Also, if ever for some reasons the photo cannot be displayed, instead of a blank box, your visitors will see a box with the text "missing girl photo, Savannah-Jade" in it.

In addition, I will highlight t="missing girl photo, Savannah-Jade", press ctrl+C to copy it to clipboard, move the mouse cursor and click at the position just before the backslash / almost at the end of the script. To make it comply with the W3C validation, I will have to create a space between the above and the backslash. Then I will change t=" to title="

This is so that when a visitor hover over the photo, he or she will see a tool tip with the message. Finally I will end up with the edited script as displayed in the scroll box below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_jizoPL28qCY/R-45gy_bZVI/AAAAAAAABVw/JCeQC1gImHw/s1600-h/missing+girl+photos+savannah.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_jizoPL28qCY/R-45gy_bZVI/AAAAAAAABVw/JCeQC1gImHw/s400/missing+girl+photos+savannah.jpg" border="0" alt="missing girl photo, Savannah-Jade"id="BLOGGER_PHOTO_ID_5183143456756426066" title="missing girl photo, Savannah-Jade" /></a>


The script will cause a web browser to display what you see below:

missing girl photo, Savannah-Jade

Try hovering your mouse over the above and confirm that a tool tip will appear. Now remember, the original script is still at the top of the post, so if don't do anything else, you will end up with 2 identical photos in the post. Once I have confirmed that everything is OK, I will then scroll up to the top of the post and delete the original script. The reason why I follow this ritual is because I don't want to cut, paste, edit, and then find there is some problem. When that happens, I may have to upload the photo all over again. By following this ritual, the original script will always be there waiting for me if ever something went wrong.

Note the above photo is taken from Missing girl: Please help. It will be great if you can help circulate the above link (right-click on the link and choose "copy" and paste the link to wherever you want, be it an email or a message in Facebook, etc.

18 comments:

  1. Thanks for your helpful info on Blogger. My problem is that the compose box for a new post does not have the font/hyperlink/video etc. buttons visible. I have the URL and enclosure boxes visible and can't seem to close them. Any suggestions? I looked through Settings and can't find an answer...thanks. Denny

    ReplyDelete
  2. Hi Danny,

    I am assuming you can't see the tool bar with its various tool icons

    Been there, done that. The way I overcame the problem is given in these post:
    What to do when you can't sign in, publish post, upload photos, see tool bar in Blogger post editor, etc.
    What to do when you can't see the tool bar in Blogger post editor window

    BTW, hope you can be encouraged to learn a bit of HTML (just a little bit) and use the EDIT HTML mode instead of the COMPOSE mode. I never use the COMPOSE mode as it gives me little control over my posts.

    Peter Blog*Star
    Blogger Tips and Tricks

    ReplyDelete
  3. Hi peter its been a while from i dropped in to this site.Good to see your still going strong. Keep up the good work. I have a new site for helping very very new bloggers. I say very because I am sort of new myself and I post as I learn, so to speak.
    what I was wanting to find out about is this. I took some screen shots of the layout page and settings page to show and explain the different way things work in blogger templates. the problem was that when I loaded then in to the post they where to small to make out. do you know of any way I can get around this. I tried editing them to make them bigger but that was no good. is ti to do with the size of the space on the post page or is there something else. maybe if I could find a way so that people can enlarge them when they click on them. well thanks for your help in the past and good luck with the future. my site is
    http://blogtipsdotcom.blogspot.com/
    let me know what you think.
    Brian.

    ReplyDelete
  4. Hi Gurnygob,

    Glad you like my blog/s and glad to have another one helping new bloggers.

    However, I just got into discussions with another Blog*Star and it is about bloggers scrapping content from other blogs. Now PLEASE DO NOT TAKE THIS REPLY I AM IMPLYING YOU DO THAT, but I have bloggers copy-pasting my posts and caught. See Swinger copied my posts. Please, please, please don't take offence by my reference to other bloggers scrapping contents of my blog.

    To all visitors (also, please don't be offended), you can summarize content of any of my posts which you may find useful or informative, but please don't publish exact duplicate because I am not very sure regarding search engines policy on duplicate content. All I know is at one time, there were talk of penalty, and now they say for Google, website may enter into supplementary results, which is not good. If you do use content of my blog posts, please add an active (clickable) link or links to my post/blog

    "the problem was that when I loaded then in to the post they where to small to make out"

    Sorry, don't understand completely but can guess. Also, (please again don't get offended. Only friends will tell you if you have bad breath, meaning most people are polite and will not tell you your faults. Me, I want people to point out my mistakes as otherwise, how else can I improve?

    You will need to brush up on your English if you want your blog to be popular. Regarding your question, I am guessing a part of it is already answered in this post itself, that is, Clicking on image does not enlarge image: Why and how. Other ways is to host your image with image hosts like Photobucket, then use <img> tag to display your images. If you don't understand, you will have to ask again.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  5. Hi Peter. Thank you for your help. I am not offened at your remarks. I would like to point out I do not spam or steal any other persons work. Yes I do use what I learn from others, but we all do that, otherwise no one would learn anything. I do not simply copy/paste, I study long and hard to make sure I understand what I have learned.
    Thanks for the remarks about my english skills, I know I will have to work on that.
    About the link, I would be happy to put a link to you on my site. Maybe you could do the same for me, help me find my feet. I would not worry about me taking your visitors away, you are so much better at this blogger stuff than I am. Thanks again for the help.
    gurnygob.

    ReplyDelete
  6. I must need blogger for super-dummies because my question is so basic, no one seems to have addressed it: why does Blogger automatically shrink my photos down to teeny-tiny size?

    I want my photos to be as wide as my text. When I look in the html editor the image link code says something like "parent.deselect Blogger Image Gracefully" followed by the actual href.

    I assume I'm doing something really really bad (like, maybe I'm the friend with bad breath and no one will tell me), so can you please give me a clue? Is there a maximum pixel width or something? Some other cardinal sin I am committing? (I mean, other than using a cheap camera phone. Please don't discriminate against me for not buying a superfancy camera. I'm busy paying my extraordinarily large federal tax bill right now . . . thanks for understanding . . .)

    And thanks for your help!

    ReplyDelete
  7. thank you so much for the tutorial sir. It was a big help. thanks again.

    ReplyDelete
  8. Hi Red Flashlight,

    I am afraid if you upload photo direct from Blogger, there are only a few default sizes available. If you want to display photo in full size, you must upload your photo to Photobucket and use the <img> tag to display the photo. Even then you have to be careful about the template you use as there is a possibility the photo will be too wide for the main column width and that can cause problems.

    Peter Blog*Star
    Blogger Tips and Tricks

    ReplyDelete
  9. Hi.

    Just wanted to tell you sometimes you'll see width="(certain number)" and height="(certain number)". Well, if you tweak the numbers and change them, they also change the size.

    Note: certain number does not mean that certain number is on the thing. It just means the numbers can and might vary.

    ReplyDelete
  10. Hi,
    your blog is so helpful!!

    now im wondering how i make blogger *NOT* enlarge photos. i want them just as they come out. how do avoid this click-to-other-screen-and-larger default setting?

    ReplyDelete
  11. Thanks for the compliment. Refer to How to make photo not clickable and let me know whether you manage to do what you want.

    ReplyDelete
  12. I still cant get the photos to go bigger when you click on them. ;(

    ReplyDelete
  13. How did you upload your photos to display and did you do anything after it is uploaded?

    ReplyDelete
  14. When I first started blogging, I'd upload all my pics and then fill in the text. Other bloggers were able to click on my pictures to enlarge them. Now, suddenly, you click on the picture and it enlarges about double it's size in the left hand corner. What happened. I want it to enlarge to fill the screen for details...

    Jane

    ReplyDelete
  15. "it enlarges about double it's size in the left hand corner"

    Can you explain what you mean by double in the left corner.

    ReplyDelete
  16. I can not get my pictures to click to enlarge, and now after reading about it, I know why. No one can tell me what to do now. I have 8 or so posts, that I want my pictures to enlarge. I have tried to go back into the HTML mode and edit them, but the pictures in the post are already where I want them to be, so moving the HTML gets messy.

    Is there any other way? It doesn't seem to be working properly for me.
    THANKS,
    KATIE
    http://www.cochranfarmlife.blogspot.com/

    ReplyDelete
  17. First get URL of images you uploaded. See Using Blogger to host images
    Then use the HTML tag <a href="photo URL"&gr;
    <img src="photo URL" width="some numbers" /></a>

    and you use specification for width to set the size of the imag

    ReplyDelete
  18. It's 2011 and this problem still exists.

    But for me, it's selective and doesn't matter what editor I'm under when the photo is added. Some pictures will enlarge, others will not.

    I think hosting with Flickr is our best bet.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications