Since tweaking my blog template to change the width I noticed that uploading images to display via the Blogger image tool no longer displayed them matching the width of my blog when uploaded as 'large'. This really bugged me as when I use the larger size image within a post I want the image to sit across the entire width of the post.
It took some google-fu but I did find the answer and thought it worthwhile sharing here so that there is one more place on the interwebs to find an answer. One option is to use an image hosting service for your images and link to them yourself, bypassing the controls used in the Blogger image upload tool. I didn't really want to have to do down this road so this solution suits me.
I'll use the example of my blog to explain how to get images to display at the full width of your post. When I tweaked my blog I changed the #main-wrapper width to 555 px (pixels) and including the .main padding-left of 20 px this gives me an effective post width of 535 px. Therefore when I prep images for use in my posts I crop them to 535 px wide in photoshop before uploading them (the height I crop to depends on the image).
When you use the Blogger tool to insert an image into your post if you look at the html view you get a messy bunch of code. You will notice that within this mess of html there are 2 references to your image:href="http://1.bp.blogspot.com/_yWKCK8sw_Xo/SDqDhfYb-lI
/AAAAAAAAAIk/TaCgypNzwYs/s1600-h/Firebug_Layout.png
andsrc="http://1.bp.blogspot.com/_yWKCK8sw_Xo/SDqDhfYb-lI
/AAAAAAAAAIk/TaCgypNzwYs/s200/Firebug_Layout.png
The first piece of html provides a link to the original image and the second piece is what tells the image to display in your post. You can see above that the only differences in these strings are that the second piece of html telling the image to display in your posts has S200 and the first one has S1600. I'm not 100% sure but I believe this to be the size setting in pixels for the width of your image. The example I've used above is for the image in this post. I selected the 'small' setting in the image tool and so the size setting for the image source html is 200, therefore the width of this image displayed in the post (edit: I checked using Firebug once I published and this is indeed the case). The S1600 used in the link html is as far as I know the maxiumum size in pixels for an image uploaded to Picasa.
So, to enable your image to display at full width you just need to change the size value for the image source html to 1600 as well. However it's important to note that if the image you uploaded is wider than the width of your #main-wrapper this could cause problems with your layout. Hence the reason I crop or resize my images in Photoshop first. I have read that you can change the value to the width you want but this hasn't worked for me where setting it to S1600 has.
Hope this info is of use to someone :)
Ps. The image from this post is a screenshot of the layout display from Firebug, a great Firefox add on that can help identify a lot of things to do with your template.
Monday, May 26, 2008
Changing the default display size for post images for Blogger
Subscribe to:
Post Comments (Atom)
6 comments:
Hey Thanks, I never thought or heard about this trick, It just did my work for some of my blog posts :P
question. can you set this up to be a default?? I'm posting blog posts directly from my blackberry with images. The image usually is a bit smaller than my post width and then my text wraps along the side. I'd like to have my image be automatically adjusted to 400px width so my text doesn't wrap. and the image fills up the whole width of the posting area. Does that make sense???
Hi Liz, Yep your question makes sense. Unfortunately I'm not familiar with posting via a mobile device but I would hazard a guess that this is not an automatic thing since this process is basically manually overriding the settings of the blogger default for image width. Although I don't mention it in this post I also created CSS classes within my template so that I can apply a class to an image in order to define the padding on it too. Sorry I can't be of more help.
Hi mate, I was wondering if u found a way to set images to display always at one same size, per say, as wide as ur main post width. Im not sure either but as I found this excelent explanation on how to work on the image size, I thought u might have found that answer as well. I kinda tired of changing manually every code at every upload. cheers from new zealand.
Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!
Thank you! I've been trying to figure this out for ages!
Post a Comment