HOW TO ADD GREAT BIG PHOTOS TO YOUR BLOGGER BLOGFor many of my photographer clients, they showcase their work on their blogs. THIS is a magnificent idea!!
However, they always ask - "How can I get the photos larger on my blog"?
Well, first - the template used has to be widened to a accommodate such large images, then the images need to be inserted, and the HTML edited to the exact size of the photo.
SO first: the template must be customized a bit to widen it. (usually) This blog is set to 100% width. A fixed width is great too, as long as the main posting area has at least 600 pixels or so of working post space. 600 pixels is a good width, anyway for blog photos (as far as big ones go) and should fill the area nicely. The example above is 600 pixels wide, and 450 pixels high.
Then, the images must already be hosted somewhere (that is, not uploaded directly to Blogger in the post, but already existing on the web, having been uploaded via FTP to your hosting account, or already existing in it's largest or full size on a photo sharing website.
Why can't you just upload them? Because Blogger stores your photos on Picasa, which resizes them to the default 'S, M & L' settings (I believe 'large' is 400 pixels max width). There's only three sizes (S, M & L) when uploading to Blogger. If you try to go in and edit the HTML, it will then enlarge an already downsized image, making it pixelize. So to retain image quality, it's best to have them hosted.
SO - upload your images somewhere (and know their exact height and width) via FTP to your website, or a shared photo community (like your own Picasa account, or Photobucket). Then, you'll right click the photo in it's full size, and get the URL to the image. The URL to this image is
http://www.kariandco.com/great.jpg.
Then, insert photo into your post as normal, but use the right side option, to add it from the URL. Paste in your URL to the photo. Go ahead and select "Large", and then your orientation (left, right or center).
Once it's 'done' and inserted, you'll see Blogger resized it (to 400 in my case..) so you'll need to now edit the HTML.
Click the 'Edit Html' tab in your post.
At the top, you'll see the mumbo-jumbo that was auto-created when you inserted your image. You now need to manually add the height and width of your image to the CSS statement that controls the image and how it displays. Here's the code, and what you'll add/change:
Part of Original Generated Code:
........img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://www.kariandco.com/great.jpg" alt="".........
(see? it resized the width to 400px...)
So now, update your code (just type in your height and width, using the exact styling as below):
........img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 600px; height: 450px;" src="http://www.kariandco.com/great.jpg" alt="".........
And VOILA! - you've got larger photos on your photo blog!
Hope this helps you photographers out there!
Kara Ridgeway Janni is a local photographer in Dallas/Fort Worth area - and a long-time friend of mine. I was pleased to assist her with her new logo design - for 1313 Images Photography. Kara wanted something a bit different - a little less 'curly' and 'swirly' than you see with photographer branding these days. She has been working hard to use different color schemes, themes and styles - and brand her company a bit more modern and sleek to set herself apart.
