Yet Another Software Blog

I run into a problem with fitting big images into a single post page. I thought that just using a max-width in a CSS file to limit the image width will be enough, and the browsers will automajically scale the image to a proper dimension which will fit the available space.

I was wrong. The result was images which which where in the proper width but look stretched in their height. It took some time to figure out that the cause of it is that the height attribute set for the image with the original height.

It took some poking into the wordpress code to understand that the width and height attributes are set when the images are inserted into the editor, so I just wrote some lines of code to remove the attributes when the image is being inserted in its full size.

Too lazy to do a proper plugin out of this, but here is the code

add_filter( 'get_image_tag', 'bg_image_downsize',10,6);

function bg_image_downsize($html, $id, $alt, $title, $align, $size) {

 if ($size=='full') {
$pattern = '#width="([a-zA-Z0-9]+)"#';
$html = preg_replace($pattern, '', $html);
$pattern = '#height="([a-zA-Z0-9]+)"#';
$html = preg_replace($pattern, '', $html);
 }

 return $html;
}

I don’t like to add special effects when a link is being hovered, as I think that the reader should be able to identify links without moving the mouse, and when the courser is over a link it should be enough that the cursor changes from an “arrow” to a “hand”.  Some people think otherwise and most of them like to add some kind of border around the link when it is being hovered.

The problem with adding a border around a link is that it expends the area the browser reserves for the link and cause a redraw of the content. Most of the times when the link is a textual link there is no ill effect, but when the link is actually an image the content around it will “jump” to accommodate the new size of the link (image + border).

The best way to avoid the “jump” is to preallocate an empty space around the image which will be used to display the border.

For example if our current CSS rules are

a:hover  {text-decoration:none;}
.entry a:hover {border-bottom:1px dotted; }

Should be changed to

a:hover  {text-decoration:none;}
 .entry a:hover {border-bottom:1px dotted; padding-bottom:0;}
 .entry a {padding-bottom:1px;}