I searched on Google and found Sergio Villarreal’s article which shows a great way to put drop shadows on images using CSS. On first inspection the solution seemed to fit my requirements exactly, it is simple, easy to implement and offers a great looking result however I was looking for a method that would require the absolute minimum of ongoing config and maintenance and I decided to combine Segio’s CSS only solution with a slighly more complex CSS & Javascript solution that would in the end be a bit simpler to implement and maintain.

Here is a quick overview of how to put drop shadows on images the same as Wampago:

1. Insert this code between the html tags in your header or template (header.php in Wordpress). Note: You may already have jquery installed as part of your template or a plugin, for Wordpress users try looking in /wp-includes/js/jquery/


<script type="text/javascript" src="/path-to-jquery-folder/jquery.js"></script><script>    $(document).ready(function(){  $("img.dropshadow-right")  .wrap("
<div class='img-shadow' style='float:right;'>" + "</div>
");  });
 
$(document).ready(function(){  $("img.dropshadow-left")  .wrap("
<div class='img-shadow' style='float:left;'>" + "</div>
");  });</script>
 
2. Insert this code into your css file. Remember that if you change template you will have to update this. Alternatively you could set up a separate independant css file. Remember that you will need to have the shadow image files in place. You can get these here: shadowAlpha.png & shadow.gif


.img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}


3. Now to apply the drop shadow to your images using the following:


img 1 <img src="/path-to-images-folder/yourpicture.jpg" class="dropshadow-right" />
img 2 <img src="/path-to-images-folder/yourpicture.jpg" class="dropshadow-left" />
img 3 <img src="/path-to-images-folder/yourpicture.jpg" class="dropshadow-left" />


You can see the examples below:

Please note that when you want the text to wrap around the image you should put the image in the code first.

You can see here that the text wraps around the image on the left hand side. You can see here that the text wraps around the image on the left hand side.

You can see here that the text wraps around the image on the right hand side. You can see here that the text wraps around the image on the right hand side.

Sometimes you may not actually want the text to wrap around the image so you can add in the following straight after the image:

<br style="clear: left" />


This will clear the wrap effect as above.

You should note that the float right and float left options don’t show up properly in the WYSIWYG editor in Wordpress a minor problem that I don’t have an answer for.  I should also mention that to put code into Wordpress blogs is a real pain but you can make it simpler using the great Coffee2Code plugin.If you have any questions please let me know but first check the source code on the reference pages as Wordpress is really rubbish at displaying code and this post took 3 hrs to get right!