In my previous articles, I showed you how to crop your blog photos to be square and how to create a DIY gallery in Blogger.
This article will show you how to resize your thumbnails if you change your blog layout. You will use code to resize your thumbnails rather than manually recropping photo after photo.
As explained in previous articles, each thumbnail is created with the following code:
<td align="center" width="25%"><a href="your project url here/" target="_blank"> <img height="140" src="your image url here" width="140" /><br />your descriptive text here</a></td>
The size of the image is determined by img height= and width= . You can make the image larger or smaller simply by increasing or decreasing the pixels (which in the code above is 140 by 140.)
However, if you have a lot of thumbnails, you probably won't want to manually retype every instance of your pixel size. And most web browsers do not include a Find/Replace function.
The best workaround is to select all of the text in your Blogger gallery page, copy it and paste it into a text editor like Notepad. Use the Find and Replace function in the text editor and copy the text back into your Blogger page. (See details in the attached list.) This takes no time at all compared to manually cropping dozens of thumbnails in a photo editor.
Click Preview in Blogger to see how your new size looks.
You can also change the amount of space between your images by adjusting the padding, which in our sample code looks like this:
<table cellpadding="3">
The higher the number the more white space you will have between each image.
Experimenting with image size and padding will help to keep your photo gallery from looking crowded.
Comments