Image alignment & Drop shadows

Mark posted a while back (link) a quicktags improvement that included the ability to have drop shadows around your image.
Visit that link to get the code and follow the instructions for adapting your current setup.

I’ve adapted it so that the image can now be left or right aligned with text wrapping, and I’m assuming that you have added the CSS from that link to your ‘wp-layout.css’.

Add the following to your wp-layout.css;

.img-shadow1 {
clear: both;
float:right;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 20px 0 0 17px !important;
margin: 20px 0 0 8px;
}

.img-shadow1 img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

div.clearer {
clear: left;
line-height: 0;
height: 0;
}

The instruction <div class=”img-shadow”> will produce a left aligned image.

The instruction <div class=”img-shadow1″> will produce a right aligned image.

While the Quicktag will insert the top of those 2 codes, it will not produce the second. You will have to add the ‘1’ manually.

A couple of points;
– You must have a carriage return after the closing </div> and before your text. If you do not, your text will be in bold This will not unduly affect your text wrap.
– If when you view your entry, the image has ‘broken through’ and is affecting the entry below it, you will need to use the clearer div. This needs to go after the last image in your post, but before any text that follows it. An example:

You post a picture, with text, and the image breaks through. You need to alter your post to insert the clearer:
<div class="img-shadow1"><img src="ducks.jpg" alt="" /></div><div class="clearer">&nbsp;</div>
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation …

Information on this is also at www.tamba2.org.uk/graphicalcss