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

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

To insert a small left-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 left 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="left"/></a>

Inserting images normally

To insert a small left-aligned image into a page, 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 “left”.

HTML code for inserting the above image

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

Right-aligned small image

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"/>

Adding large images

To insert a large image into a page or blog, you just need to use the “insert image” function in your toolbox. All Spiffy Stores themes however also have the ability to use the light-box function, so that images can be clicked on to view a larger “zoomed” image.

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

Inserting images using the light-box function

The image below 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="full"/></a>

Inserting images normally

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

HTML code for inserting the above image

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