I like big images on my website.

The easiest way to embed them nicely and centrally would be to expand the width of the main content container.

Sadly, I don’t like long lines of words, nor individually writing CSS codes for possible text i’ll be putting into the containers, to limit their width to a more readible 540px.

Therefore I have chosen to allow images to overflow.

However, overflown images are positioned based on the leftmost corner, so they spill out to the right only, resulting in very asymmetrical spacing. I’m a perfectionist so I hate that.

Therefore after trying to dump in CSS codes to shift the images to the left using relative positioning, I realize something bad – I had to manually do this for all future images I’d like to put in.

.flickr640 {position: relative;right: 50px;}
.flickr1024 {position: relative;right: 230px;}

So I figured a way to insert jQuery/javascript to dynamically insert CSS codes above to images that are sized 640px or 1024px from flickr (those are the standard sizes flickr resizes my images to). It took me about 8 hours because I started from scratch programming javascript and jQuery.

jQuery.noConflict();
jQuery(document).ready(function() {
var iCount = jQuery('.entry-content div.wp-caption').css('border','5px solid red').length;
jQuery("body").prepend("<h3>" + iCount + " elements found</h3>");
for (n=0;n<iCount;n++) {
var iWidth = jQuery('.entry-content div.wp-caption a img').eq(n).width();
if (iWidth > 600 && iWidth < 700) {
jQuery('.entry-content div.wp-caption').eq(n).addClass('flickr640').prepend(iWidth);
}}
});

Then I realized – hey how about future images which are sized differently, or vertically oriented images which have no fixed width?

Oh crap.

This is to be continued.

After another hour of fixing.

If you can see this properly centered. It means this has worked.

As you can see, the 4 elements found was part of the count code to properly count how many captioned images there are in the whole page. Then I highlighted them to make them more visible that the selecting code part of jQuery worked.

I used a the .eq() matching index and a for() condition to select each image and check whether their widths were more than 550. (initially I used :eq() and :nth-child() but they didn’t work. I don’t know why. I don’t have coding basics so there’s lot of trial and error)

I worked calculating the widths (use .width() ) of the images, then minus the content width, divide it by 2. It should be sorta properly centered.

I used .prepend() to publish the width and “righted” amount so I can see it’s all working well.

Final code looks like below

jQuery.noConflict();
jQuery(document).ready(function() {
var iCount = jQuery('.entry-content div.wp-caption').length;
for (n=0;n<iCount;n++) {
  var iWidth = jQuery('.entry-content div.wp-caption a img').eq(n).width();
  if (iWidth > 550) {
	var iRight = (iWidth - 540)/2
	jQuery('.entry-content div.wp-caption').eq(n).css({'position':'relative','right':iRight});
}}});

I think that’s all. Crazy codes.