Took me a bit to figure out what was going on here.

If you upload a PNG with transparency for the main item image it get's converted into a JPG and arbitrarily masks to white. Looses it's transparency in all resolutions, (I'm assuming).

This is a bit of a bummer. I was about to build a gallery of public art that had all clipped images for the main item image.

Anyone know if it's possible to choose a different file format for main image conversions.

An alternative might be to manually edit the tables and upload the PNG versions of the files to the same folder. (not a fun prospect because the filenames get rewritten in the process too.

I am also having this issue, anyone solved this?

The problem is that when the images are getting uploaded, they are being converted to the JPEG format, and when converted to that, the upload class has a default image back ground color of white. JPEG doesn't support transparency, so this is why all your transparent PNG's are getting uploaded with a white background.

This is a big PITA in my book. If I wanted the things converted, I'd convert them. I really hate that this on-the-fly, didn't-ask-for-it conversion is taking place. Yeah, yeah, I know all about the fact that IE does a lousy job of displaying PNG's - maybe I dont' care, maybe I wanted it that way - regardless, the software took away that choice from me.

That said, I need my client's site to work now, and I've got too many K2 items created to rip it all out and go with something else. My client has a foreground color of light gray (#f5f5f5), and all the graphics I'm uploading started out as transparent PNG's so what I did to compensate for the software's forced conversion was to modify this file:

administrator/components/com_k2/models/item.php

Search for "upload" - you'll quickly see the spots where the various image sizes are created. You'll see where the conversion happens too (all those $handle->image_convert = 'png'; statements).

Just add a line below the statements that create each particular image size which specifies a background color. In my case, I used this:

$handle->image_background_color = '#f5f5f5';

Then when the photos got uploaded, the background color of the image was set to what I was using for the foreground color on the website, and everything blended in nicely.

Yes, I did try changing the $handle->image_convert = 'jpg'; to just '' and 'png' - took out the piece that set the image quality for the jpeg too, no effect. There was some code just below the uploading that created the cache copies and appended a '.jpg' to the cache filename. Because I'm short on time, I didn't feel like fooling around with the code to append whatever the extension was of the uploaded filename.

Maybe someone else will and will upload a patch so this forced, unwanted image conversion will come to an end.

Besides this annoyance, I really like K2 - just getting beaten up by my client, so I'm pissy right now...

Hit send too quick... The lines are around Line 165 in the file, and the renaming for the cache copies are around line 308

Yes, this is a bummer!

In my version of K2 (2.2), this function is in

/administrator/components/com_k2/lib/class.upload.php ... line 3338

Interestingly, in line 981 there is a variable called $image_convert, where it seems that one can change the filetype and it actually states that "Default value is '' (no conversion)", which isn't true. Maybe whoever wrote the class or whatever could comment?

Even more interestingly, changing ANYTHING in this file is totally disregarded, so this class might not even be used?

Ok, next update.

In /administrator/components/com_k2/models/item.php from line 181

Here the above mentioned classes attributes (namely image_convert) is set for every image and image size. If you comment out this line for every image (original, XLarge through XSmall)

$handle->image_convert = 'jpg';

The file will be saved in the original format.

Now my problem is that K2 is trying to access the *.jpg when accessing $this->item->image in the template but this is (obviously) null, so the image is not displayed ... any ideas?

After delving into the code, I have found out that K2 does not store the actual file names of the images. What it does is create a md5 using the item's id and then append both the size ('_XS', '_L', etc) and '.jpg' to the end. So in the current version there is no possibility of storing the image types of seperate items.

I am pretty sure that I can manhandle the system so that it uses pngs exclusively, but it would be great to see the possibility of at least keeping the original in the original format or - even better - save the file type for later reference.

I have seen this first hand and it is a pain, so I have added this to a our list of requested features for K2 for the core team.

Simon
K2 Support

Thanks David,

Your solution worked perfectly, let's just hope this will be sorted out in the next release, on a side note, love K2, keep up the good work.

Hi Simon,
is there any way to see when this will be implemented?

Roland


Simon Wells (K2 Support) said:I have seen this first hand and it is a pain, so I have added this to a our list of requested features for K2 for the core team.
Simon
K2 Support

Roland Jungwirth said:Hi Simon, is there any way to see when this will be implemented?

Roland


Simon Wells (K2 Support) said:I have seen this first hand and it is a pain, so I have added this to a our list of requested features for K2 for the core team. Simon
K2 Support




Any update? I have K2 2.3 and there is no workaround. I wanted to put the article images in a table that alternates row colors from Gray to white but now I am unable to do that because my images change to jpgs. This is very annoying.

Let me know when you are planning to do this. If not soon, then I will have to change the design of the site :(

I've got a solution for this. its not super sexy, but it works.

in /components/com_k2/models/item.php replace the if chain starting on line 110 with:

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_XS.png'))
$item->imageXSmall = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_XS.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_XS.jpg'))
$item->imageXSmall = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_XS.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_S.png'))
$item->imageSmall = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_S.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_S.jpg'))
$item->imageSmall = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_S.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_M.png'))
$item->imageMedium = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_M.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_M.jpg'))
$item->imageMedium = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_M.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_L.png'))
$item->imageLarge = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_L.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_L.jpg'))
$item->imageLarge = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_L.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_XL.png'))
$item->imageXLarge = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_XL.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_XL.jpg'))
$item->imageXLarge = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_XL.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_Generic.png'))
$item->imageGeneric = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_Generic.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_Generic.jpg'))
$item->imageGeneric = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_Generic.jpg';

In /administrator/components/com_k2/models/item.php insert this after the Generic image processing section line ~295:

/////////////////////PNG
//Original image
$savepath = JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'src';
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = md5("Image".$row->id);
$handle->Process($savepath);

$filename = $handle->file_dst_name_body;
$savepath = JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache';

//XLarge image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_XL';
if (JRequest::getInt('itemImageXL')) {
$imageWidth = JRequest::getInt('itemImageXL');
} else {
$imageWidth = $params->get('itemImageXL', '800');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//Large image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_L';
if (JRequest::getInt('itemImageL')) {
$imageWidth = JRequest::getInt('itemImageL');
} else {
$imageWidth = $params->get('itemImageL', '600');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//Medium image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_M';
if (JRequest::getInt('itemImageM')) {
$imageWidth = JRequest::getInt('itemImageM');
} else {
$imageWidth = $params->get('itemImageM', '400');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//Small image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_S';
if (JRequest::getInt('itemImageS')) {
$imageWidth = JRequest::getInt('itemImageS');
} else {
$imageWidth = $params->get('itemImageS', '200');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//XSmall image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_XS';
if (JRequest::getInt('itemImageXS')) {
$imageWidth = JRequest::getInt('itemImageXS');
} else {
$imageWidth = $params->get('itemImageXS', '100');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//Generic image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_Generic';
$imageWidth = $params->get('itemImageGeneric', '300');
$handle->image_x = $imageWidth;
$handle->Process($savepath);

Finally, wherever you are using an image from the k2 item, replace the .jpg extension with .png (if you need transparancy).

In short, technique writes an additional set of png (alpha intact) to the cache directory, and makes them available to the application via the same name as the jpg counterpart. No existing functionality should be broken by this since it is an additive change. I'll post a more thorough blog about this at some point.

One final note, if you need to implement the png version, a simple string replace looks something like this:


I'm a c# guy, not really php, and being as lazy as I am, I'm not going to look up how to do a proper substring trim... just dont name your image blah.png.png.png....
Good Luck!

This really needs to be adapted for 2.4.1 already!

Also to Stephen: Is this fix something that will work for new images to uploaded, besides existing images.

We have been holding off uploading images until a fix has been worked. Thanks for your support!

Hi guys,

The bad news is that seems not to be corrected in 2.5 SVN

Olivier

It should work for any image, but I haven't tested that specifically.


j37h3r said:Also to Stephen: Is this fix something that will work for new images to uploaded, besides existing images.
We have been holding off uploading images until a fix has been worked. Thanks for your support!

Actually it works brilliantly moving forward, your mention of the application towards existing images was very helpful.

Also, tested this with 2.4.1, works without issue.


Stephen Austin said:It should work for any image, but I haven't tested that specifically.

j37h3r said:Also to Stephen: Is this fix something that will work for new images to uploaded, besides existing images. We have been holding off uploading images until a fix has been worked. Thanks for your support!

Great, glad to help.


j37h3r said:Actually it works brilliantly moving forward, your mention of the application towards existing images was very helpful.
Also, tested this with 2.4.1, works without issue.


Stephen Austin said:It should work for any image, but I haven't tested that specifically.
j37h3r said:Also to Stephen: Is this fix something that will work for new images to uploaded, besides existing images. We have been holding off uploading images until a fix has been worked. Thanks for your support!

I'm using K2 2.4.1, and having major issues with this.  I am trying to publish a Rokstories module, and can't get transparency working because of this.  I've tried all the mentioned edits to no avail, and rebuilt my image cache, but they are still caching as .jpg.  I don't see any of the referenced "$handle->image_convert" in the item.php file at all, anywhere.  Does someone have the edited files that will work with the latest version?

I'm not seeing Generic image processing around line 295?  Running K2 2.4.1.

Stephen Austin said:
I've got a solution for this. its not super sexy, but it works.
in /components/com_k2/models/item.php replace the if chain starting on line 110 with:

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_XS.png'))
$item->imageXSmall = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_XS.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_XS.jpg'))
$item->imageXSmall = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_XS.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_S.png'))
$item->imageSmall = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_S.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_S.jpg'))
$item->imageSmall = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_S.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_M.png'))
$item->imageMedium = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_M.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_M.jpg'))
$item->imageMedium = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_M.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_L.png'))
$item->imageLarge = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_L.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_L.jpg'))
$item->imageLarge = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_L.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_XL.png'))
$item->imageXLarge = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_XL.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_XL.jpg'))
$item->imageXLarge = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_XL.jpg';

if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_Generic.png'))
$item->imageGeneric = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_Generic.png';
else if (JFile::exists(JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache'.DS.md5("Image".$item->id).'_Generic.jpg'))
$item->imageGeneric = JURI::root().'media/k2/items/cache/'.md5("Image".$item->id).'_Generic.jpg';

In /administrator/components/com_k2/models/item.php insert this after the Generic image processing section line ~295:

/////////////////////PNG
//Original image
$savepath = JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'src';
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = md5("Image".$row->id);
$handle->Process($savepath);

$filename = $handle->file_dst_name_body;
$savepath = JPATH_SITE.DS.'media'.DS.'k2'.DS.'items'.DS.'cache';

//XLarge image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_XL';
if (JRequest::getInt('itemImageXL')) {
$imageWidth = JRequest::getInt('itemImageXL');
} else {
$imageWidth = $params->get('itemImageXL', '800');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//Large image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_L';
if (JRequest::getInt('itemImageL')) {
$imageWidth = JRequest::getInt('itemImageL');
} else {
$imageWidth = $params->get('itemImageL', '600');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//Medium image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_M';
if (JRequest::getInt('itemImageM')) {
$imageWidth = JRequest::getInt('itemImageM');
} else {
$imageWidth = $params->get('itemImageM', '400');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//Small image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_S';
if (JRequest::getInt('itemImageS')) {
$imageWidth = JRequest::getInt('itemImageS');
} else {
$imageWidth = $params->get('itemImageS', '200');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//XSmall image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_XS';
if (JRequest::getInt('itemImageXS')) {
$imageWidth = JRequest::getInt('itemImageXS');
} else {
$imageWidth = $params->get('itemImageXS', '100');
}
$handle->image_x = $imageWidth;
$handle->Process($savepath);

//Generic image
$handle->image_resize = true;
$handle->image_ratio_y = true;
$handle->image_convert = 'png';
$handle->file_auto_rename = false;
$handle->file_overwrite = true;
$handle->file_new_name_body = $filename.'_Generic';
$imageWidth = $params->get('itemImageGeneric', '300');
$handle->image_x = $imageWidth;
$handle->Process($savepath);

Finally, wherever you are using an image from the k2 item, replace the .jpg extension with .png (if you need transparancy).

In short, technique writes an additional set of png (alpha intact) to the cache directory, and makes them available to the application via the same name as the jpg counterpart. No existing functionality should be broken by this since it is an additive change. I'll post a more thorough blog about this at some point.

One final note, if you need to implement the png version, a simple string replace looks something like this:


I'm a c# guy, not really php, and being as lazy as I am, I'm not going to look up how to do a proper substring trim... just dont name your image blah.png.png.png....
Good Luck!