png thumbnail has black background

I have created a page-list template based on Remos tutorial.

I have added an extra thumbnail so I now have two thumbnails/images. One is a picture (jpg) of a property for sale and the other picture (png) is supposed to be a sash with a transparent background that (using z-index) gets placed over the top left corner of the jpg. The sash reads "For Sale".

The problem I am having is when I upload an image to C5 in converts my transparent png to a jpg. The result being a black non-transparent background. The transparency gets lost in conversion. Does anyone know of a way to stop this conversion?

As usual, any help would be greatly appreciated:)

View Replies:
c5mix replied on at Permalink Reply
It's possible there is a CSS image styling within your theme that gives images a black backgound. I would check that first.
Remo replied on at Permalink Reply
no Chris, this is a c5 issue. I'm surprised no one reported that earlier..

When you check the image helper (concrete/helpers/image.php) you'll see in line 73 what's going on.

You could try to change the code there but I'm not sure about the sideffects of that....
c5mix replied on at Permalink Reply 2 Attachments
I see where it puts a black background on the thumbnail of a png within the file manager or within a block image upload area but it doesnt output it with a black background (at least not on my site). Attached are screenshots.
jhart replied on at Permalink Reply
anyone with a fix? running into the same issue. thumbnail as png or gif does not appear correctly--black bg.
aeroclown replied on at Permalink Reply
Its an ie problem. ie 8 and 7 do not properly handle alpha channels in portable network graphics even though they claim to.

Just google around a bit and you are bound to find lots of people complaining about it. I haven't found a solution to it, but maybe a developer can come to the rescue.The above links are not as related to the specific issue listed here. But I am almost positive I ran across issues like this with layered items and png. The problem was there in 5.3.2 as well, but I don't think it is isolated to C5.
Remo replied on at Permalink Reply
sorry, you're also wrong..

The thumbnail is a jpg file and not a png... It's therefore not related to this IE problem.

It's not that easy to fix!
aeroclown replied on at Permalink Reply
I certainly didn't know it was a jpg, so we are getting a black matte around the image I suppose.

But with that said when you actually use the png on your site its alpha transparency won't work right in ie8. so while you will fix the thumbnail your actual image is still going to have issues in the page layout if it uses alpha channels for layered effects. The issue appears to extend to items using z-index to.
bcarone replied on at Permalink Reply
here is the css fix for alpha trans in ie
rockshox replied on at Permalink Reply
OK. Just to confirm: This is not an IE or CSS issue. I import the image as a png, and when I preview the image in Firefox using Firebug it says the thumbnail is now a jpg. Somewhere this image has been converted into a different file format.

Sometimes when you convert a png into a jpg the transparency is seen as black. So my solution is to find a way of stopping this png>>>jpg conversion.
Remo replied on at Permalink Reply
as I said in my first post, this is by design..

Check the code line I've mentioned and try to modify it and see what happens.
rockshox replied on at Permalink Reply
...will have to try this tomorrow now because I have left work.

I will let everyone know first thing:)
griebel replied on at Permalink Reply
I have seen similar problems with an old version of gdlib. Try upgrading gdlib

rockshox replied on at Permalink Reply
I am going to have to leave you to it, my girlfriend has just gone in to labor.

Feel free to carry on with this thread, if not I will pick it up when I can!

frz replied on at Permalink Reply
good luck, congrats! Kiss sleep goodbye. ;)
AlbertPotato replied on at Permalink Reply
Here's a fix for PNGs. Now just need it for gifs
jg1000 replied on at Permalink Reply
I looked at "/concrete/helpers/image.php" on line 37.... changed where it has:
$res2 = @imageJPEG($image, $newPath, 80);

changed the "JPEG" to "PNG" and that seemed to work. But the only thing that messes up now is that you cannot see the thumbnail image preview in the file manager.
rockshox replied on at Permalink Reply 2 Attachments
FRZ, thanks for the above comment, you where right about the sleepless nights, I have kissed sleep good bye.

Any how. I have tried the suggestions from Remo and JG1000, and yes that kinda solves the problem of PNG conversion, in terms of having a PNG with a transparent BG.

But, not only is the image NOT visible in the image preview manager there is also another problem that has now arisen; The second image ("For Sale/Let" sash) I import is not showing at all in the main site, the only reference to the image is some text that reads "Property One" (which is also the title of the page).

I have attached two images, one is the current problem and the other is the desired end result.
rockshox replied on at Permalink Reply 1 Attachment
Here's an image of the original problem.
rockshox replied on at Permalink Reply
Does anyone have any ideas about this one? I desperately need some help with this!
rockshox replied on at Permalink Reply
Bump -any help!!!
rockshox replied on at Permalink Reply 1 Attachment
Ok, so it looks as if I am speaking to myself now.

Maybe I should rephrase the original question:

How would you create a property listing page that listed multiple properties?

Each listing would contain a thumbnail with an editable "for sale/sold" sash over the top corner (the sash could be updated from "for sale" to "sold"). Each listing would also have a title, description and a more info link.

The link would then take the end users through to the "property detail" page, this page would contain the galleria module and a detailed description of the property.

I have got so close to getting this done, but the fact that the sash does not work, leaves the entire job redundant.

Has anyone created anything similar to this? Your help would be really appreciated.

Please see attached image for an example of what I mean.