Post Larger Images with Blogger
Have you ever wished that you could post larger images via the Blogger: Upload Images window? I found a neat trick from a reader, Miranda.
This requires a blogger template with extra width in the posting section so it will display the larger images.
Upload your image in the post window, Dashboard | Posting | Create | Add Image icon. After doing that, click on the Edit HTML tab and you will see this image code:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tYRMcQOD8CdYqHBnlSTS-2ACL8zApVIB8tElEADMi9Jn6k2TlTE7mJIA0uMfEUOSmn5TtrSEoYYZm79rrPUkf_WjySJwtXmlH7YrtGiunh0eQ1xMHsx4CfdH9jOUzA_9D0M83g/s1600-h/DSC_2693.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4tYRMcQOD8CdYqHBnlSTS-2ACL8zApVIB8tElEADMi9Jn6k2TlTE7mJIA0uMfEUOSmn5TtrSEoYYZm79rrPUkf_WjySJwtXmlH7YrtGiunh0eQ1xMHsx4CfdH9jOUzA_9D0M83g/s400/DSC_2693.JPG" alt="" id="BLOGGER_PHOTO_ID_5237868380194789154" border="0" /></a>All you change is the s400 to s800! Then you have a nice large image on your blog.
I'm not sure how legal this is. All I know is that it works.
EDIT: Question was brought up about draft users. I didn't realize the image code was different, but it is. So, if you use Blogger in Draft, here is your instructions. Follow the directions above. You will see this image code:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5qT15FkWwYjB3p8LxDrV23tt5xdRaqIhvz1JZ3Ikm5jo-RYjgR0hRXNI4u2AhIVxZ6dyzAuvX8a8b0DOFvfIeneuEM8DDbtESQGGaVNqK0WYTc05F_g97AI2kjbMLDYRj_dzZBA/s1600-h/DSC_2689.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_OFh1WWXWCHM/SLDBAvBlhrI/AAAAAAAAB7g/kTUthEX2IYc/s320-R/DSC_2689.JPG" /></a></div>Change this s320-R to this s800-R. Where there's a will, there's a way!
EDIT 09/08/08: Thanks to The A of DNA for: If you don't want it as large as s800 replace it with s576!
40 Comments:
Very nice, but for those who use the draft, any suggestions?
[]'s
Compulsivo
@usuariocompulsivo, I edited the post to remedy that!
Glad I could help Annie :) If your readers would like to see it in action, you can change the link from my name (thanks for the link love, btw!) to my photography blog.
@Miranda, I did the link switch! Thanks for the great tip. Link love makes the blogosphere go 'round.
thanks for this! i will try this one. but i have no blogger account. i think i gotta make one
Blogger also automatically puts a click (to show larger image than what you posted), so in this example you may want to eliminate that html! The uploaded image may be smaller than 800) You may also be interested in a post that talks about Blogger image handling in terms of making sure small images don't get resized out of focus.
Hi,
I'm Alisha from Wowzio, and I'm excited to tell you about our new widget platform that helps bloggers increase readership by providing engaging widgets containing your blog's rich content. You can check out widgets customized for your blog here:
Wowzio Widgets for your Blog
I wanted to reach out to you to ask for your feedback on these widgets (feel free to install them on your blog, if you feel they are a good fit). I'm sorry for leaving this message via a comment, it's not at all our intent to spam you ( which is why i'm leaving this comment on an older post and you can always remove this comment ). Again, we would love to hear your feedback.
Thanks,
Alisha Wright
alisha.wright1@gmail.com
Thanks for sharing this helpful tips
Ok... It works when I change it to 800, but that's just larger than I would like it to be.. is there anyway to have something in between 400 and 800...
thanks
justmailmee@gmail.com
@The A, did you, by any chance, try sticking in 500 or 600?
yes I did, but when I publish it the image does not show.
what could be wrong?
I have found a solution..
If you don't want it as large as s800 replace it with s576... it works!
http://groups.google.co.za/group/blogger-help-howdoi/browse_thread/thread/b20c9c5f377da92b
http://groups.google.com/group/blogger-help-howdoi/browse_thread/thread/4217e466f7f57b53/02a1e8ac23060e45?lnk=raot
@The A of DNA, so glad you found out. I was going to have to start looking this week. Thanks for the info.
Here's a (probably) full list of available blogger image sizes:
72px s72
144px s144
200px s200
288px s288
320px s320
400px s400
576px s576
640px s640
720px s720
800px s800
1600px s1600
Please let me know if you find any others.
Sweet! I really enjoy reading your posts. Keep up the great work! Thanks Miranda for this one!
The A / Annie / Miranda,
You could always reference the larger file (such as 1600px) and custom-resize it using the "height" and "width" html codes. If you want to keep the same aspect ratio (not having it stretched one way more than the other) just use "height" or "width" but not at the same time, unless you know the exact dimensions to use or if your image is square.
The last part of your code will look like this:
border="0" width="400"/>
All I did was add the width="400" attribute. Usually bloggers want a certain width since the height doesn't matter in most cases. If you really want to be precise, you can also post/preview the entry, then right-click the image. In FireFox it will tell you the new, correctly-proportioned image size, and you can add that as height="400" or whatever the new size is.
Enjoy!
Thats great! Make sure the photo is of high resolution when you put it in the larger size.
I have tried the changing the my s400 to s800 and it worked for a while and then it stopped working all of the sudden. Anybod have any hits as to why this happend????
Really Helpful. Thanks!
Although i had to change the height and width dimensions
from 400px 300px to 500px 400px.
Thank you. I'll give it a try :)
Hello all,
While I surf blog , i found a all new trick in http://pic-memory.blogspot.com/
Vistor can comment and EMBED VIDEO YOUTUBE , IMAGE .
EX : View Source.
http://pic-memory.blogspot.com/2009/02/photos-women-latin-asian-pictu...
Written very smart!
I wonder how they do it ? Anyone know about this , please tell me :D
(sr for my bad english ^_^)
email: ya76oo@ya76oo.com
thanks.
didn't work for me... what worked was changing the pixel sizes... eventually... i had to change the outer wrapper in the template and then the main wrapper... then i expanded each dimension by 1.25... i can probably expand the whole thing more but i think i'll do it in stages...
i've run into a whole new problem! I can get them to post at 800, but then they run under the gadgets to the right. How can I widen the whole blog so the image doesn't run under the information (about me, my website, etc) on the right?
@anonymous, I have a few posts...Widen the Post Section.. Or click on 'design' or 'fluid' in my label cloud.
Thank you! That saved me a lot of time. s576 is just perfect for my blog.
Thank you so much!!! This was just what I was looking for.
what about making your profile picture on your blog bigger?
it did NOT work for me
see this, it shows as all pixelated and crappy
http://duranphotography.blogspot.com/2010/01/jodi-rohin.html
Oh Annie you ROCK! I have now increase the size of my post pics and increased the size of my posts. You make it all so easy!!!
This is a nice trick, can you tell me how can i make my blogger profile image large, in about me section on my blog.
@blogging hacks...I don't know how to go about doing that. It is part of the blogger code that confuses me. What I would do instead is make my own new widget, put the image in that you want, the text that you want, then link it to the blogger profile.
800 made no difference?
I guess 800 is too large already :) In my case I would have to go for 600..not too small, not too big..:) anyways a bunch of thanks Annie..you've been helpful, as always.
You're great Annie. I love you! God bless you for your awesome, helpful nature. THANK YOU!
Thanks so much for your help. This will really come in handy!
it DOES NOT work
Thank you! Thank you! Thank you! This worked perfectly!
I managed to make it work by also changing the 400px to 800px, or whatever, for width. I deleted the height component (takes care of scaling automatically)
One side effect is that you can no longer click on the images to open them as a separate, larger image.
Thank You So Much!!!! :D
Thank goodness I found this post, I was going crazy! I didn't want to clutter my Flickr with "blog images" and just resizing the images made them all pixel-y.
Thanks!