BehindTheRabbit

Notice: this tutorial is intended for Sandvox 1; Sandvox 2 has a new and improved image management.

If you put a picture into a text field, Sandvox gives you three options:

• to show it in a line itself
• to show it inline with text
• to make the text flow around it (alongside text), aligning the image at one side of the page

Unfortunately, Sandvox decides if the image has to be aligned on the left side or on the right side of the page.

Actually it’s not Sandvox, is the designer of that specific theme: if you switch theme, you’ll see how each design has its own setting. This choice is made for you and usually is the most appropriated to mantain a good balance in the graphics of your website.

For example, Carbone aligns the floating images to the right side of the page:

Sometimes you may want to override this decision: either if you simply don’t like this choice or if you have many images and don’t want them to stick altogether on the same side. With Sandvox Pro and few lines of code you can change this quite easily.

The first option – changing the default for every image – is the easiest. Just use this code:

Probably, the designer left some whitespace between the image and the text alongside it. Using again Carbone as an example, floating images have a 10px-wide left-margin. Now your image is left-aligned, but its left side is 10px too far from the margin of the page and the text flowing around it on the right side is definitely too close. So you have to add another parameter to make things right:

Be more selective

If you want more power, you can even set a specific alignment for each image! Take a look again at the Inspector for your image: you can see a “Description” field. Put the name of your image there (a different name for each image). You can now use a specific code for each image you want to behave differently:

This code means: align to the left side every image inserted alongside a text whose name is “MyPic” and change its margin as specified.