png thumbnail has black background

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

http://www.codeblog.ch/2009/03/concrete5-templates/...

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:)

rockshox
View Replies:
c5mix replied on at Permalink Reply
c5mix
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
Remo
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
c5mix
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
aeroclown
Its an ie problem. ie 8 and 7 do not properly handle alpha channels in portable network graphics even though they claim to.

http://stackoverflow.com/questions/1204457/how-to-solve-hack-fading...

http://www.mooforum.net/discussion/issue-with-png-transparency-ie8-...

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
Remo
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
aeroclown
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
bcarone
here is the css fix for alpha trans in ie

http://css-tricks.com/rgba-browser-support/...
rockshox replied on at Permalink Reply
rockshox
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
Remo
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
rockshox
...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
griebel
I have seen similar problems with an old version of gdlib. Try upgrading gdlib

<?php
var_dump(gd_info());
?>
rockshox replied on at Permalink Reply
rockshox
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!

EEEEEKKKKKK:)
frz replied on at Permalink Reply
frz
good luck, congrats! Kiss sleep goodbye. ;)
-frz
AlbertPotato replied on at Permalink Reply
AlbertPotato
Here's a fix for PNGs. Now just need it for gifs

http://www.concrete5.org/community/bugs/transparent-png-thumbnails/...
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
rockshox
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
rockshox
Here's an image of the original problem.
rockshox replied on at Permalink Reply
rockshox
Does anyone have any ideas about this one? I desperately need some help with this!
rockshox replied on at Permalink Reply
rockshox
Bump -any help!!!
rockshox replied on at Permalink Reply 1 Attachment
rockshox
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.