Spiffy Stores uses CSS classes to control how images are displayed in your blog. Small right aligned images use the class “right” to get them to display on the left side of the text you’ve entered.

The first part of this post shows you how to insert a small right-aligned image using the the light-box function. The second part of this post shows you how to just insert a right-aligned image normally.

To insert a small right-aligned image into a page or blog, use the “insert image” function in your toolbox, and then alter the tag so that it looks like the one in the sample code below.

All Spiffy Stores themes also have the ability to use the light-box function, so that images can be clicked on to view a larger “zoomed” image.

The image to the right has been inserting using the light-box function. When you hover over the image, you will see that your cursor becomes a hand. Click on the image, and you’ll see the light-box in action.

HTML code for embedding the above image with lightbox

<a href="/files/your-image-name.jpg" rel="lightbox" title="Put some text in the title tag so it shows up here.">
    <img src="/files/your-image-name.jpg"  class="right"/>
</a>

Inserting images normally

To insert a small right-aligned image into a page or blog, you just need to use the “insert image” function in your toolbox.

You then use standard html code to refer to your image, ensuring that you give it a class of “right”.

HTML code for inserting the above image

<img src="/files/your-image-name.jpg"  class="right"/>