:( I'm having a terrible time getting images to be responsive when using the 'Image' tab in K2. I'm setting up a small news site and just transferred all the articles from Joomla to K2. I'm running Joomla 3.1, K2 2.6.7 and using Rockettheme Voxel Responsive template.

If I enter the image into the article only and use the rt-image class for the image, they resize fine - but I can accomplish this with Joomla articles. Part of the beauty of K2 is the ease of use for my editorial department, the tabs at the top, Image, Image Gallery, Media. They are very excited with K2..... me on the other hand, I have to get the images to be responsive.... and I'm failing:( :pinch:
Please can someone help me get this figured out?

The site is csi.nethopper.net - in development

Your link returns 404 error.

Perhaps you can try removing the inline css width for images set in item.php

Remove
style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;"

and add the class for rt-image

Thank you for responding! Apologies, the site was down for a short time, but is back up now. I will try what you suggested, thank you!

Got an 403-Error

What a bad week.... Sorry, please can you try now? The items in question would be off the News> Latest Headlines link. That's what K2 is in control of. Or you can click one of the latest news links on the home page (they don't seem to be gabbing the attest articles tho..... A problem for another day :dry:

Thank you for looking

Thanks for the information - I tried that but it didn't change anything. I put it back the way it was because I don't want to forget what steps I've done. I have backups, but I need to keep track of my steps... been working long hours and memory is getting a little foggy.

It's been a couple weeks since anyone's said anything here and I don't know if you've found a solution but for anyone interested...

I had some luck with making the image responsive by editing the item.php file to use a percentage rather than a definitive px setting. First, on my server, I made a new folder in the components/com_K2/templates directory and copied the item.php file into it from the default folder. Next, In your itemImageBlock div in the item.php file, change this:to this:and save it to your new template folder to replace the default item.php copy.

In the admin backend for that category, I assigned this new template. Then for the global K2 Parameter settings for images, for whatever size you're using for your primary item image, change that pixel dimensions to a percentage that works for your page layout and just ignore that the language file is echoing the text for a dimension in px. You could change the language file to say "%" instead of "px" in your admin UI but it would just get overridden with any K2 update. The beauty of using your own template is that a K2 update won't overwrite your own template's changing the px to % in your item.php file.

Hi Rob!

I had success making the image from the K2 image tab responsive changing the code as you recommended in the item.php. but this change only affected the item view.
Where can I change the code so I can also see the pictures resonsives in my category listing?
Mi home menu is a Menu Item Type K2 Categories and I need to be responsive

thks!

@Reynaldo

Try this:

Hey Rob.

I tried this, and it works perfectly from a resizing perspective, but the resolution of the images was lost, and they became blurry.

Did you also experience this? What do you reckon I could change to avoid it?