I really like the flexibility that K2 has to offer without over-complicating things, but one of the things that has been bothering me is that image sizes are controlled by width only, so, depending on the original, you could end up with one image that is 200x400 sitting next to an image that is 200x100 and it just doesn't look right. I experimented with some hacks I found mentioned here and there but really wanted a "no hack" solution for this and here it is:

K2 Image Override to resize by width OR height:

Note: Whenever possible, we encourage you to use the built-in override system to implement changes such as the one we are showing you here.

This code was originally written to work with tags view (I also adjusted the width of the itemContainer to create a three column layout) and is implemented in templates/generic.php and as such, wil effect the layout of search and author pages as well. It is possible to assign this to a custom view class that is only used by tags view, but doing so requires a core hack). See below for implementing this override in other views or content templates.

Open the file generic.php inside your template folder of com_k2 and find:

1

<img src= "<?php echo $item->imageGeneric; ?>" alt="<?php if(!empty($item->image_caption)) echo $item->image_caption; else echo $item->title; ?>" style="width:<?php echo $item->params->get('itemImageGeneric'); ?>px; height:auto;" />

Replace this with:

1
2
3
4
5
6

<?php list($width, $height, $type, $attr) = getimagesize($item->imageGeneric);
if ($height > $width) { ?>
<img src= "<?php echo $item->imageGeneric; ?>" alt="<?php if(!empty($item->image_caption)) echo $item->image_caption; else echo $item->title; ?>" style="height:<?php echo $item->params->get('itemImageGeneric'); ?>px; width:auto;" />
<?php } else { ?>
<img src= "<?php echo $item->imageGeneric; ?>" alt="<?php if(!empty($item->image_caption)) echo $item->image_caption; else echo $item->title; ?>" style="width:<?php echo $item->params->get('itemImageGeneric'); ?>px; height:auto;" />
<?php } ?>

Voila! Now all of your images in the tabs view (and other views affected by generic.php such as author and search views) will be a consistent size. The larger value in this equation is set in the K2 Parameters under Image Settings where it says "Item generic image width (in px). Used in user pages as well as tag, search & date listings."

This same method can be used in your micro templates (com_k2/templates/default and variations thereof) by replacing the IMG SRC code such as:

1

<img src= "<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo $this->item->image_caption; else echo $this->item->title; ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />

inside the appropriate "itemImage" span in any of the ITEM template files (item.php, category_item.php, or latest_item.php) with the following:

1
2
3
4
5
6

<?php list($width, $height, $type, $attr) = getimagesize($this->item->image);
if ($height > $width ) { ?>
<img src= "<?php echo $this->item->image; ?>" alt="<?php if(!empty($item->image_caption)) echo $item->image_caption; else echo $item->title; ?>" style="height:<?php echo $this->item->imageWidth; ?>px; width:auto;" />
<?php } else { ?>
<img src= "<?php echo $this->item->image; ?>" alt="<?php if(!empty($item->image_caption)) echo $item->image_caption; else echo $item->title; ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
<?php } ?>

Note: For some reason the article editor has issues with the IMG SRC tags and I had to put an extra space in there, making it (like this: img src= "<?php). There really probably shouldn't be a space in there but the code should work with or without the extra space. It just doesn't display right on this page without the extra spaces.

Also: It has been brought to my attention that in certain spots (like K2 modules) the call for the image may be $item->image rather than $this->item->image. You can look at the original code on the page and see how the image is being called. The rest of the code should be the same.

The result should be images that are similarly sized regardless of whether the original image was horizontally or vertically oriented. In essence, what this code does is look at the image that is output from K2's resizing function and if the height of the image is greater than the amount set in the K2 parameters (originally for image width but used here to control both aspects) then the height is set to the parameter value and the width is set to auto. Essentially, the defined value in the K2 image size parameters becomes the value for the longest side of the resized image.

In a perfect world, this would all be done within the image resize function, but we all know how that goes....