How To Frame And Stack Your Blog Image

Spent the whole of yesterday making a new WordPress Theme for myself. Had lots of fun learning many new codes and two of those are ones that we seldom use but when we do, can will add elegance to the images in our post. One of the functions that I found useful is adding frames to our image. This is nothing new as it has already been around for quite a while but seldom used or included in WordPress Themes.

This function can also be achieved by specifying a image border in the CSS file but that will render all the images to be “bordered” There are time when a border will spoil the mood of the picture. So having a choice of makes it a lot more versatile. To add a frame to our image all you have to do is to add in this short piece of codes anywhere to your CSS file.

.entry img.frame { border: 0.3846em solid #ddd; }

You may want to change the border width and color to suit your fancy and it is all up to you. When you are posting, and inserting an image do so like how you always do. The inserted image source codes will look like this in default

<img src="http://blogigs.com/wp-content/uploads/2009/09/how-to-frame-your-image.jpg" alt="how-to-frame-your-image" title="how-to-frame-your-image" width="480" height="360" class="aligncenter size-full wp-image-939" />


Pay attention to the class value which is aligncenter, in my case here. To add a frame and keep the image still aligned to the center, add the word “frame” immediately after “aligncenter” The iamge will be aligned to the center with your frame around it. The new alignment class will be thus:

class="aligncenter frame

To add frame to am image aligned to the left, change the “alignleft” to “alignleft frame” and you will get an image like the example here. The same will go for “alignright”. The fact that there is another white border is because the original had a white border and i was lazy to cropped it off.

Then there are time when you want to stack your pictures side by side. Sometimes this is useful if you are comparing two pictures or two scenarios. To do so, insert this codes into your stylesheet.

.entry img.stack { clear: none !important; }

When posting your image, decide on which image you want on the be aligned to the left and which to the right. Insert like usual but this time, just add in the word “stack” after alignment class just like this.

class="alignleft stack

If you want frames with your stack images, then use both the value, like the image stacked on the right here.

alignright frame stack

Enjoy!