Learn More

Saturday, May 5, 2012

How To Handle Image Layout On Posting

Example after handle image right
Example
Good writing not only about the power of posting content, but also about the beauty of image layout. We all know, blogger provide facilities for placing image on left or right of posting area. But, these facilites still less perfect. If you give caption with long sentence, then image layout become ugly. If you put image on left or right of posting, then image will placed on center if caption width more bigger than image width.


The weakness of automatic image layout not only that, you can not place two images on left and right and posting content on the middle together.

All the weaknesses you can solve become more better. On this post, we share to you how to handle image layout for your post. All the keys are on CSS and HTML.

Prevent caption width more bigger than image width

Try to make a posting, then embed an image. Give caption with long sentence. Make sure you write post on Compose setting. After embed an image, click HTML. Find the similar code below

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-TdD6zuJiuhw/TByPD7O4oVI/AAAAAAAAABA/1oAPDtDJ_SI/s1600/pangrango2-a.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="239" src="http://2.bp.blogspot.com/-TdD6zuJiuhw/TByPD7O4oVI/AAAAAAAAABA/1oAPDtDJ_SI/s320/pangrango2-a.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium, magna eget eleifend eleifend, augue mi porttitor massa, et ullamcorper sem leo vel nunc. Nunc consequat iaculis diam, in imperdiet ante posuere sit amet. Donec sagittis, ante id malesuada posuere, lacus dolor ornare justo, in suscipit mi neque et nisl. Quisque ornare orci quis sapien sollicitudin euismod. Aenean ac nisi nec nisi scelerisque semper. Quisque eu risus et felis consequat blandit. Morbi vulputate mauris non urna tempus eu dictum sem dignissim. Quisque volutpat elit eget nulla porttitor suscipit ut sit amet velit.<br /></td></tr>
</tbody></table>

You wil find image width information. Then put the code below before <table>

<div style="width:320px;margin:0 5px;">

After that, put </div> after </table>. Make sure you do that correctly. And click Compose. Now, you see caption width is no longer more bigger than image width.

After handle image layout
After
Before handle image layout
Before

Prevent caption width more bigger than image width, if image is placed on left or right posting

Try to make a post, then embed an image on left or right of posting area. Give caption with long sentence. Make sure you write post on Compose setting. After you give caption, click HTML,then find the similar code below

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-TdD6zuJiuhw/TByPD7O4oVI/AAAAAAAAABA/1oAPDtDJ_SI/s1600/pangrango2-a.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="239" src="http://2.bp.blogspot.com/-TdD6zuJiuhw/TByPD7O4oVI/AAAAAAAAABA/1oAPDtDJ_SI/s320/pangrango2-a.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas 
pretium, magna eget eleifend eleifend, augue mi porttitor massa, et 
ullamcorper sem leo vel nunc. Nunc consequat iaculis diam, in imperdiet 
ante posuere sit amet. Donec sagittis, ante id malesuada posuere, lacus 
dolor ornare justo, in suscipit mi neque et nisl. Quisque ornare orci 
quis sapien sollicitudin euismod. Aenean ac nisi nec nisi scelerisque 
semper. Quisque eu risus et felis consequat blandit. Morbi vulputate 
mauris non urna tempus eu dictum sem dignissim. Quisque volutpat elit 
eget nulla porttitor suscipit ut sit amet velit.</td></tr>
</tbody></table>

If you put image on right posting area then put the code below before <table>

<div style="margin: 0 0 0 10px; float:right; width:320px;">

Else if you put on left posting area then put the code below before <table>

<div style="margin: 0 10px 0 0; float:left; width:320px;">

Other side, put </div> after </table>. After this, you will see an image on left or right of posting area with caption width never bigger than image width.
After handle, image float to right
After handle, image float to right
Before handle, image float to right
Before handle, image float to right


Make Posting Content Between Two Images

Make a posting, contain of two paragraph or more (this is just example, not necessary). Each paragraph containt many of sentence. Then, between paragraph one and two, give 3 space (this is just to make beauty). Put two images vertically. Arrange these images on center of posting area. Give each images with long sentence caption. Make sure you do this on Compose, after you give caption then click HTML, then find the code below

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-TdD6zuJiuhw/TByPD7O4oVI/AAAAAAAAABA/1oAPDtDJ_SI/s200/pangrango2-a.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="239" src="http://2.bp.blogspot.com/-TdD6zuJiuhw/TByPD7O4oVI/AAAAAAAAABA/1oAPDtDJ_SI/s320/pangrango2-a.jpg" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div style="text-align: justify;">
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Integer laoreet sapien ut mi ornare et 
pharetra purus porta. Maecenas nec felis sit amet neque faucibus commodo
 in vitae ipsum. Phasellus luctus mollis risus, vel porttitor orci 
condimentum vel. Sed nec magna risus. Nullam eu accumsan dolor. Etiam 
placerat molestie diam, a mattis justo iaculis non. Nulla quis sagittis 
nibh. Integer at iaculis ante. Integer a sapien sed dolor elementum 
cursus a at sem.</div>
</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-AoAGbxPLzPs/TCTjiNC15UI/AAAAAAAAABI/YZ2QIARdRLo/s200/Image015.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="240" src="http://4.bp.blogspot.com/-AoAGbxPLzPs/TCTjiNC15UI/AAAAAAAAABI/YZ2QIARdRLo/s320/Image015.JPG" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div style="text-align: justify;">
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Integer laoreet sapien ut mi ornare et 
pharetra purus porta. Maecenas nec felis sit amet neque faucibus commodo
 in vitae ipsum. Phasellus luctus mollis risus, vel porttitor orci 
condimentum vel. Sed nec magna risus. Nullam eu accumsan dolor. Etiam 
placerat molestie diam, a mattis justo iaculis non. Nulla quis sagittis 
nibh. Integer at iaculis ante. Integer a sapien sed dolor elementum 
cursus a at sem.</div>
</td></tr>
</tbody></table>

Place the code above with the code below (actually, just add the code what we have explained above)

<div style="float: left; height: auto; margin-right: 1em; width: 200px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-TdD6zuJiuhw/TByPD7O4oVI/AAAAAAAAABA/1oAPDtDJ_SI/s1600/pangrango2-a.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="149" src="http://2.bp.blogspot.com/-TdD6zuJiuhw/TByPD7O4oVI/AAAAAAAAABA/1oAPDtDJ_SI/s200/pangrango2-a.jpg" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div style="text-align: justify;">
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Integer laoreet sapien ut mi ornare et 
pharetra purus porta. Maecenas nec felis sit amet neque faucibus commodo
 in vitae ipsum. Phasellus luctus mollis risus, vel porttitor orci 
condimentum vel. Sed nec magna risus. Nullam eu accumsan dolor. Etiam 
placerat molestie diam, a mattis justo iaculis non. Nulla quis sagittis 
nibh. Integer at iaculis ante. Integer a sapien sed dolor elementum 
cursus a at sem.</div>
</td></tr>
</tbody></table>
</div>
<div style="float: right; height: auto; margin-left: 1em; width: 200px;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-AoAGbxPLzPs/TCTjiNC15UI/AAAAAAAAABI/YZ2QIARdRLo/s1600/Image015.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="150" src="http://4.bp.blogspot.com/-AoAGbxPLzPs/TCTjiNC15UI/AAAAAAAAABI/YZ2QIARdRLo/s200/Image015.JPG" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><div style="text-align: justify;">
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Integer laoreet sapien ut mi ornare et 
pharetra purus porta. Maecenas nec felis sit amet neque faucibus commodo
 in vitae ipsum. Phasellus luctus mollis risus, vel porttitor orci 
condimentum vel. Sed nec magna risus. Nullam eu accumsan dolor. Etiam 
placerat molestie diam, a mattis justo iaculis non. Nulla quis sagittis 
nibh. Integer at iaculis ante. Integer a sapien sed dolor elementum 
cursus a at sem.</div>
</td></tr>
</tbody></table>

After you put the code above, then click Compose again. May be you will see posting content not perfectly on the middle of posting area. But this problem can solved with put cursor on the beginning of paragraph two. Then push the Backspace button several times, until you get the best layout.
After handle posting content between images
After handle, posting content between images
After handle posting content between images
After handle, posting content between images


As example of this tutorial, you can go to our posts about Gravity Mapping On Mars Show Unique Vulcanic History and Experiments Underestimate Plants Respond to Climate Change. Now, try this tutorial, and make it great.

Post a Comment