The English Guy’s Personal Blog

I was porting the Expression Blue WordPress Theme over to the Thesis framework (released on Thesis Themes here) and started work on the #multimedia_box which controls pieces of multimedia content above the sidebars.

I noticed that if you changed the size of the #multimedia_box itself, the image still came through as large as it wanted. Bit of an issue that though, especially if you style the #multimedia_box and subsequent #custom_box, #image_box, #video_box inside it (and subsequently content further inside that, such as an image). So in my case the image was sticking out the side rightways because I had added margin to #multimedia_box and padding to #image_box.

The solution to this is a bit of jquery inside the header, which of course you have to put in the custom_functions.php and use a hook to access the wp_head(), like so:

<script src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
<!–
$(document).ready(function() {
  $(“div#multimedia_box”).ready(function() {
    var imageBoxWidth = $(“div#multimedia_box > div”).width();
    $(“div#multimedia_box > div”).css(‘padding’,'10px’);
    $(“div#multimedia_box > div img”).width(imageBoxWidth – 24);
  });
});
//–>
</script>

In my case I had added 10px padding, then there’s 1px padding and 1px border on the image itself giving you the 24 that you see in the code snippet above.

Tags: jquery, multimedia_box, thesis