Higher resolution tile images (for High-DPI)

Hi,

I was wondering how one would go about making the image tiles (displayed on the main page) generated by (what appears to be) the K2 item caching higher resolution to have better compatibility with retina display and other high DPI displays.


Thanks!

Hi,
K2 have some feature hidden in "K2 Parameters" named Image quality (%) used when processing images.
Where you can set quality. But as you see this is all you can do with K2 images.

p.s. You have to ask or beg K2 developers to make some changes because people started to use new iPads (and they moan?).

I've found some tips, read them and/or search more:

http://css-tricks.com/snippets/css/retina-display-media-query/

http://www.sitepoint.com/css-techniques-for-retina-displays/

EDIT:

Figured it out! K2 murders image quality regardless of setting if you upload very high res images. Just lowered the res a bit and everything's perfect now.


Thanks!

As you see K2 don't care still about retina screens, there is only one quality settings for all images.

For others who may run into this same issue:

I found a 'hacky' way of preventing this from happening without needing to ruin your image quality settings.

Navigate to your \components\com_k2\templates directory and edit your generic.php file. Search for a line that starts with: <img src="<?php echo $this->item->image; ?> and delete that whole line of code.

In its place, put the following lines:

Code: Select all

<?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 } ?>

This works because apparently K2 only sizes images by width normally, and this code instead allows for it to use width or height. This will also improve image quality on search and author pages as well.

Solution source: http://www.zandergraphics.net/index.php?option=com_k2&view=item&id=111:k2-images

Thanks for advice, I sent it to our developers - to check it out, maybe they use it next time.