Tuesday, December 15, 2009

Large Pictures on Blogger

Do you want large pictures on your Blog?

See an example on my blog: http://adelaide-in-photos.blogspot.com/

Before you can post large pictures you need to edit your template width to allow space for them. I post 640 pixel width pictures, so I have made the inside area (main wrapper) 650 pixels wide.

When you post the pictures you also need to alter the HTML for each picture in the post.

Editing the template:

Click on Customise > Layout > Edit HTML


At this point
save a copy of your original template in case things don't work out as planned.

I use the Minima Black template. These instructions should work for all standard Minima templates. I have played around with a couple of other templates, but have not quite worked them out yet.

You need to locate and change the widths of a few elements of the template

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Change the width to 900px

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Change the max-width to 800px

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Change the width to 900px

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Change the width to 650px

This allows space for photos up to 640px wide

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Change the width to 200px (I only did this to allow more space between the post and the side banner)

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Change the footer to 900px

Save the template.

The widths mentioned are the ones I use on my Adelaide in Photos blog.

Changing the picture code

I now upload my photos directly into Blogger with a width of 640px; with center and large image selected.


I then alter the HTML code for each picture


Delete width: 400px; height: 255px; and change the s400 to s640

This is the method I have been using, although lately rather than deleting the width: 400px; height: 255px; I have been altering it to the exact size to that of the original uploaded photo. In this case it would be 640px by 408px (multipier = 1.6). This is more work, but I have always wondered if deleting the size affected the way it views in browsers other than the ones I have tested.

I also know there are ways of uploading from Flickr and Photobucket, but at this stage I haven't bothered as changing the html code for each picture only take a matter of seconds. Also, I have been posting for 2 years and at this stage have only used about 10% of my Picasa Web Albums quota.