Small right aligned images use the class “right” to get them to display on the right side of the text you’ve entered.

This post shows you how to insert a small right-aligned image using the the light-box function. For other instructions, please refer to the links on the left.

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. To make anything link to a popup in this theme, you need to add a style to the link. For images, the style is called “popup-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

Note: You need to insert the code in the “Source Code” window in our new editor

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

Textile code for embedding the above image with lightbox

You’ll need to combine HTML and textile to use the lightbox feature;

<a href="/files/your-image-name.jpg" class="popup-image" title="Put some text in the title tag so it shows up here.">           
  !(right)/files/your-image-name.jpg(This is the alt tag)!
</a>