This article shows how to automate the formatting of images in the articles your clients write in a content management system, like Adobe Business Catalyst.

A problem is helping clients learn how to format images they place into their articles. It's tricky for them to remember to do the little things, like adding the proper margin on the left of an image that is floated to the right of the text, so the text doesn't run into the image. Of course, images floated to the right need different styling and margins than images floated to the left.

A solution is to add some simple jQuery code so images are automatically formatted the way the web designer desires, without the client needing to remember anything except to place the image to the right or left of text. Here's how...

Step 1: CSS to Style Image Margins and More

The first step is to create CSS style sheet definitions to say how you want images formatted. What we usually do is create two, one for left images and one for right. These definitions can include any CSS you wish to apply, but in our case we're just setting the margins and borders....

.imgleft {
     margin:10px 20px 10px 0;
     border:none;
}
.imgright {
     margin:10px 0 10px 10px;
     border:none;
}

In imgleft we are setting a 20px margin to the right of the image to separate it from text. In imgright we set it to the left.

Step 2: Automatically Apply Styles to Images with jQuery

Now we create a simple jQuery script that will automatically assign the CSS classes we created to images.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content img").each(function (i) {
  if (jQuery(this).css('float') === 'left') { jQuery(this).addClass('imgleft'); }
  if (jQuery(this).css('float') === 'right') { jQuery(this).addClass('imgright'); }
});
});
</script>

Here's how this works...

Line 3 is the standard jQuery function that doesn't run the script until the document is ready (the web page has loaded in the browser.)

In Line 4 has jQuery searching for every <img> but only within a <div> with ID #content. We limit the search because we don't want to reformat images in the header, sidebar, footer, etc. but only those within the main content areas in our site. Change #content to whatever ID contains your page or blog articles. The jQuery each function makes it study each image within that ID.

In line 5 the jQuery checks if the writer assigned this image to float to the left of text, and if so, then the jQuery adds the CSS class .imgleft to the image. Line 6 checks for float right.

This script is usually inserted before the </body> in the template(s) used by all your web pages or blogs. Of course, since it uses jQuery your site must also load jQuery. See Loading jQuery.