PNG Backgrounds Black?
Permalink
Am I missing something, do I need to push a button somewhere?
Went to build a new site with 8.1.0. Used the same logo as I used for 5.7.5.
Logo not transparent with 8.1.0?
Tested again with another 5.7.5, 5.7.5.13 and a new 8.1.0. Issue remains.
Is this a bug?
Does it need reporting?
See attached.
Went to build a new site with 8.1.0. Used the same logo as I used for 5.7.5.
Logo not transparent with 8.1.0?
Tested again with another 5.7.5, 5.7.5.13 and a new 8.1.0. Issue remains.
Is this a bug?
Does it need reporting?
See attached.
There are many bugs with thumbnailing in 8.1.
Thumbnailing?
Thumbnails and viewing in the file manager are fine. Bringing the image to the page is the problem??
Are these related issues?
Thumbnails and viewing in the file manager are fine. Bringing the image to the page is the problem??
Are these related issues?
Hi Steevb,
I was unable to reproduce this.
- I tested with these two images:
https://www.sideshowtoy.com/wp-content/uploads/2014/05/2172-product-...
https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Oreo_biscu...
- I placed them on a page using the Image block.
- The browser used was Chrome 56 on Windows 7.
What browser are you using?
Did you edit the image using the dashboard image editor?
Can you attach the image you used as an attachment, please.
I was unable to reproduce this.
- I tested with these two images:
https://www.sideshowtoy.com/wp-content/uploads/2014/05/2172-product-...
https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Oreo_biscu...
- I placed them on a page using the Image block.
- The browser used was Chrome 56 on Windows 7.
What browser are you using?
Did you edit the image using the dashboard image editor?
Can you attach the image you used as an attachment, please.
V8.1 is changing the image to a .jpg when constraining and comes from cache?
Edit, remove dimensions and all is well, image is not coming from cache?
So empty cache, apply image to image block, DO NOT set dimensions, all is good, image feeds from /application/files/*******/image.png.
Go back and edit block, set dimensions, all goes wrong again and image pops back into cache?
So DON'T set constraints I hear you shouting!
But I want to set constraints for page speed, etc, never had the problem before??
Okay, after comparing image block code in 5.7.5.13 and 8.1, there are a lot of differences!
Sure this is a bug, might look into code for errors when I get a chance.
Edit, remove dimensions and all is well, image is not coming from cache?
So empty cache, apply image to image block, DO NOT set dimensions, all is good, image feeds from /application/files/*******/image.png.
Go back and edit block, set dimensions, all goes wrong again and image pops back into cache?
So DON'T set constraints I hear you shouting!
But I want to set constraints for page speed, etc, never had the problem before??
Okay, after comparing image block code in 5.7.5.13 and 8.1, there are a lot of differences!
Sure this is a bug, might look into code for errors when I get a chance.
So...
Bug or not bug?
Need to know one way or the other.
I have things to do...
Is 8 the way to go or stick with 7?
Clients moaning, asking questioning, confused.....
How many versions do we need for f**k sake?
Clients starting to really get p*** off now...
What is the best way forward?
Bug or not bug?
Need to know one way or the other.
I have things to do...
Is 8 the way to go or stick with 7?
Clients moaning, asking questioning, confused.....
How many versions do we need for f**k sake?
Clients starting to really get p*** off now...
What is the best way forward?
@Steevb
After constraining the image size, I still can't reproduce this.
Can you attach the PNG file that you are working with, please.
After constraining the image size, I still can't reproduce this.
Can you attach the PNG file that you are working with, please.
Link to live demo. http://artemi-gibbs.55web.uk/
Drag images off page or view image to see the issue.
If you want access to login let me know, pm me.
Drag images off page or view image to see the issue.
If you want access to login let me know, pm me.
i can confirm this issue, - very annoying.
i use no constraints, put transparent png in nearest fitting responsive container, and use padding, then the image is staying transparent.
i use no constraints, put transparent png in nearest fitting responsive container, and use padding, then the image is staying transparent.
@Steevb
Using your example image, I was only able to reproduce the black background when constraining the image to its natural 320 x 100 dimensions. Constraining it to less than 320 for example, maintained the transparency. As a side note, the constrained image shows significant aliasing, producing unacceptable images.
I was able to reproduce the black background with another image if I only constrained it by a small amount. Constraining it past a certain percentage, the transparency was maintained.
The good news is that I tested your image and other images in the latest version of concrete5 on GitHub, and not only is the black background issue gone, but the constrained images are of vastly better quality.
Using your example image, I was only able to reproduce the black background when constraining the image to its natural 320 x 100 dimensions. Constraining it to less than 320 for example, maintained the transparency. As a side note, the constrained image shows significant aliasing, producing unacceptable images.
I was able to reproduce the black background with another image if I only constrained it by a small amount. Constraining it past a certain percentage, the transparency was maintained.
The good news is that I tested your image and other images in the latest version of concrete5 on GitHub, and not only is the black background issue gone, but the constrained images are of vastly better quality.
Thanks, good to know issue is fixed.
Wish I hadn't shown clients new version and having to hide from the lynch mob!
BTW: Things are fine with 5.7.5.13
Demo: http://55web.uk/test
Wish I hadn't shown clients new version and having to hide from the lynch mob!
BTW: Things are fine with 5.7.5.13
Demo: http://55web.uk/test
I'm seeing this issue with c5 v8.1.0.
An uploaded png looks really badly pixelated even though it was great before upload. The theme I'm using requires an 80 pixel high logo and the original is 81 pixels, so it's being scaled by the browser.
Resizing the image in a graphics package or with c5's built in image editor results in black background.
I'd like to launch the site, which is for a client, but can't unless I can get round this issue.
An uploaded png looks really badly pixelated even though it was great before upload. The theme I'm using requires an 80 pixel high logo and the original is 81 pixels, so it's being scaled by the browser.
Resizing the image in a graphics package or with c5's built in image editor results in black background.
I'd like to launch the site, which is for a client, but can't unless I can get round this issue.
@simonchilton
You can hard code your logo image into the theme itself, this would allow you to launch your site and avoid the thumbnail issues in 8.1.0.
"Resizing the image in a graphics package or with c5's built in image editor results in black background."
If you are having issues resizing your image in standard graphics programs, that sounds like a separate issue. Please attach the logo image in a reply and I can take a look at it.
You can hard code your logo image into the theme itself, this would allow you to launch your site and avoid the thumbnail issues in 8.1.0.
"Resizing the image in a graphics package or with c5's built in image editor results in black background."
If you are having issues resizing your image in standard graphics programs, that sounds like a separate issue. Please attach the logo image in a reply and I can take a look at it.
I should have been more clear. Resizing in the graphics package (Adobe Fireworks) worked fine. The black background issue was only present once the image was uploaded to c5. File attached, thanks!
[I've converted to jpeg for now to get around the problem]
[I've converted to jpeg for now to get around the problem]
It seems V8.2 is the true release of V8, hopefully it can't be far off release.
cant wait for 8.2!
Hi everyone,
I had the same issue with 8.4 RC2. I installed the Image Optimizer block, and after running it, all images that had the constrain size restriction showed up with a black halo. Strange thing is that it disapeared once you hover with the mouse, but it shows up again when you reload the page, despite that I have cleared the cache from the server.
You can see it onhttp://www.beautebook.com/design... . Look at the Go to catalog and Buy it now buttons. The one button that looks fine is because I took out the size constrain.
Any help?
Thank you!
V.
I had the same issue with 8.4 RC2. I installed the Image Optimizer block, and after running it, all images that had the constrain size restriction showed up with a black halo. Strange thing is that it disapeared once you hover with the mouse, but it shows up again when you reload the page, despite that I have cleared the cache from the server.
You can see it onhttp://www.beautebook.com/design... . Look at the Go to catalog and Buy it now buttons. The one button that looks fine is because I took out the size constrain.
Any help?
Thank you!
V.
The Go To Catalog button is showing one image on page load and a different image on hover.
See the two images in the attachments.
See the two images in the attachments.
Hi Weyboat,
Yes, they do have a hover image, they are different.
The yellow bigger button on the left has two images as well, but as it doesn't have the constrain size restriction, it doesn't have the black backgound problem.
Look as well to the image undesr Go to catalog button, it doen't have a hove image and sitll shows a black background, when it is supposed to have a translucent one...
Thank you for your reply...
V.
Yes, they do have a hover image, they are different.
The yellow bigger button on the left has two images as well, but as it doesn't have the constrain size restriction, it doesn't have the black backgound problem.
Look as well to the image undesr Go to catalog button, it doen't have a hove image and sitll shows a black background, when it is supposed to have a translucent one...
Thank you for your reply...
V.
@byvictoria
When the page loads the resized thumbnail image is displayed:
http://www.beautebook.com/application/files/cache/thumbnails/6c7f6a...
When the image is hovered, the non-resized original hover image is displayed:
http://www.beautebook.com/application/files/3415/2484/7461/OrderNow...
After the image is hovered, the non-resized original image is displayed:
Non-hover Image -http://www.beautebook.com/application/files/1415/2484/7461/OrderNow...
The OrderNowYellow.png image is a PNG8 file and that is likely the cause. There is bug in the Imagine PHP library that concrete5 uses. This bug prevents the proper display of transparency in PNG8 images when they are resized/processed.
The good news is that community member mlocati has fixed this bug and submitted the fix to the Imagine PHP library owner. The fix has not been accepted yet, so I highly recommend leaving a thumbsup and also a comment on this issue -https://github.com/avalanche123/Imagine/pull/585.... Leaving a thumbsup and comment is important in drawing attention to the fix and encouraging the library owner to accept it.
For more information and examples of the PNG8 bug, you can review this discussion -https://github.com/concrete5/concrete5/issues/3999...
When the page loads the resized thumbnail image is displayed:
http://www.beautebook.com/application/files/cache/thumbnails/6c7f6a...
When the image is hovered, the non-resized original hover image is displayed:
http://www.beautebook.com/application/files/3415/2484/7461/OrderNow...
After the image is hovered, the non-resized original image is displayed:
Non-hover Image -http://www.beautebook.com/application/files/1415/2484/7461/OrderNow...
The OrderNowYellow.png image is a PNG8 file and that is likely the cause. There is bug in the Imagine PHP library that concrete5 uses. This bug prevents the proper display of transparency in PNG8 images when they are resized/processed.
The good news is that community member mlocati has fixed this bug and submitted the fix to the Imagine PHP library owner. The fix has not been accepted yet, so I highly recommend leaving a thumbsup and also a comment on this issue -https://github.com/avalanche123/Imagine/pull/585.... Leaving a thumbsup and comment is important in drawing attention to the fix and encouraging the library owner to accept it.
For more information and examples of the PNG8 bug, you can review this discussion -https://github.com/concrete5/concrete5/issues/3999...
Thank you Karl!
