problems with transparent png's

Get help with installation and running phpBB 3.2.x here. Please do not post bug reports, feature requests, or extension related questions here.
DWFII
Registered User
Posts: 344
Joined: Fri Oct 20, 2006 2:17 am
Name: D.W.
Contact:

problems with transparent png's

Post by DWFII » Fri Nov 08, 2019 8:16 pm

I know this is crazy but...I am just a clueless user (although I have been for several iterations of phpbband a number of years). I administer a 3.2.0 board.

Recently I have been having problems with transparent pings. For some years I have created drawing in CorelDraw X4 and exported them to .png format, transparent.

these drawing posted fine and displayed as transparent on the tan background of my board. lately it is almost hit or miss...although mostly miss.Drawing that i convert to png don't display as transparent anymore. the post as white rectangles or squares with the drawing properly within.

I have checked this on tow computers--a Win 7 pro and a Win 10 pro. I have tried this same process by converting my cdr (coreldraw) to svg and then opening them in Inkscape and converting to png. No joy.

I have spent several days on this and tried a multitude of settings and approaches. Converting cdr's to svg in-app, converting with online converters, exporting to png in-app in both CorelDraw and Inscape as well as Paint.net. I am feeling a little desperate.

Today i tried posting the same pngs that failed on my phpbb board on several other forums with coloured backgrounds. All the pngs I tested displayed correctly on these other forums.

I am hoping against hope that someone can tell me how to fix this problem, I don't know where else to turn.
DWFII
In the High Desert of Central Oregon

User avatar
EA117
Registered User
Posts: 1081
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: problems with transparent png's

Post by EA117 » Fri Nov 08, 2019 10:10 pm

So on just one site (your site) the PNG image with a transparent background will not show as transparent, but when you post that same PNG file to some other web site (not your site) it correctly displays transparent.

We probably need a link to the example of "does not correctly display when posted to your site", to make any kind of definitive assessment. And to confirm whether the issue really does happen outside of the computers you've tested from, too.

But two guesses: On your site, the area behind all images (even those without a transparent background) has been assigned a solid color background from CSS, and the transparent images are simply allowing this otherwise obscured background to show through, instead of the background you thought would have shown through.

Less likely: Some kind of image processing or image type configuration on your server is making the image ultimately display as something other than PNG, or using something other than the bytes which were originally uploaded and no longer contains transparency.

DWFII
Registered User
Posts: 344
Joined: Fri Oct 20, 2006 2:17 am
Name: D.W.
Contact:

Re: problems with transparent png's

Post by DWFII » Fri Nov 08, 2019 10:48 pm

Well, I appreciate you taking the time to respond to me.

What is it you want exactly? Do you want a copy of one of the pngs? A screen capture of it 'misbehaving' on my site? Another of it displaying correctly on another site or even on, again my site (I can probably find or generate one).I can probably provide any or all. Although I do not see a way to add attachments here???

When I convert to png I am converting by colour, ie. white--that's the way the png converter is set up. The background that I am posting it too is, in the case of my site a fairly solid tan. the backgrounds I've been posting to where it works are often very dark--grey or blue.

Regarding "Some kind of image processing or image type configuration on your server" why then do the self-same pngs display correctly on other sites?--they all have to go through 'my server'.
DWFII
In the High Desert of Central Oregon

User avatar
EA117
Registered User
Posts: 1081
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: problems with transparent png's

Post by EA117 » Sat Nov 09, 2019 12:11 am

A link to where you see this issue happening. Since if it's the CSS on the site, or if the image data being served by the site isn't PNG for whatever reason, no amount of "showing us the image" or "attaching the original image" is going to clarify that.

If even you are only seeing the issue when the image is posted to one specific site (your site) -- and the image works fine when posted to a different site -- then a link to where you've posted this on your own site & you are seeing the unexpected behavior is what needs to be provided & examined.

Both so we can confirm "it's looks wrong at our end, too" (and isn't just some issue unique to the computer(s) where you're testing from), and so that we can then further explore the CSS and other network responses involved in serving up the image.
DWFII wrote:
Fri Nov 08, 2019 10:48 pm
Regarding "Some kind of image processing or image type configuration on your server" why then do the self-same pngs display correctly on other sites?--they all have to go through 'my server'.
I'm not sure what you mean by that. If you're posting the same PNG file to another site where it displays fine, how is that "still going through your server." When you said "Today i tried posting the same pngs that failed on my phpbb board on several other forums with coloured backgrounds", that doesn't imply any process that "would still be going through your server." So perhaps just more clarification is needed there.


User avatar
EA117
Registered User
Posts: 1081
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: problems with transparent png's

Post by EA117 » Sat Nov 09, 2019 4:44 am

Those forums don't allow for public display of the attachments, but I have a user account registration pending if you want to approve that long enough so that I can view them to take a look.

DWFII
Registered User
Posts: 344
Joined: Fri Oct 20, 2006 2:17 am
Name: D.W.
Contact:

Re: problems with transparent png's

Post by DWFII » Sat Nov 09, 2019 5:04 am

Will do...it's all the same board, though, FWIW.
DWFII
In the High Desert of Central Oregon

User avatar
EA117
Registered User
Posts: 1081
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: problems with transparent png's

Post by EA117 » Sat Nov 09, 2019 7:25 am

Of the images which were not transparent, only in the http://www.thehcc.org/forum/viewtopic.p ... 686#p42686 post was it "expected." That attachment was actually .JPG, and therefore was not being "incorrectly displayed as non-transparent." So ignore that example for the remainder of the discussion.

For the other two posts, the .PNG images are correctly transparent in the image files themselves. The reason the .PNG isn't displaying as transparent is a combination of two things:
  • The image is being presented as a thumbnail, which shows the thumbnail image wrapped in a link which invokes viewing the full image via the /ext/vse/lightbox/ extension.
  • The /styles/custom/ style you're using (as a child of /styles/AllanStyle-SUBSILVER/) has an explicit solid white background color set specifically for thumbnail displays, as opposed to non-thumbnail image displays.
In /styles/custom/theme/colours.css, the background color set in this block is what makes the image become displayed as though it is non-transparent:

Code: Select all

dl.thumbnail img {
    border-color: #666666;
    background-color: #FFFFFF;
}
You simply remove the background-color: #FFFFFF; line from that block, perform a CTRL-F5 refresh in your web browser to make sure the updated .CSS file is downloaded, and the image in these two posts will now be displayed with a transparent background as expected.

So your method of creating the transparent .PNG files was not at fault. You were seeing a different result based on how large the image was in terms of height and width. Which controlled whether or not the image must be displayed using a thumbnail, versus being able to directly display the image without a thumbnail.

And possibly, if you've been creating larger images in the past without this issue too, maybe the white background asserted for the dl.thumbnail img path is some kind of new or updated behavior in the custom style, and started causing thumbnails to display this way whenever the modification was introduced.

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21681
Joined: Fri Aug 29, 2008 9:49 am
Location: Cardiff

Re: problems with transparent png's

Post by Mick » Sat Nov 09, 2019 9:20 am

Out of curiosity, have you had any issues with transparent .gif’s?
"The more connected we get the more alone we become" - Kyle Broflovski

DWFII
Registered User
Posts: 344
Joined: Fri Oct 20, 2006 2:17 am
Name: D.W.
Contact:

Re: problems with transparent png's

Post by DWFII » Sat Nov 09, 2019 2:13 pm

EA117 wrote:
Sat Nov 09, 2019 7:25 am

Of the images which were not transparent, only in the http://www.thehcc.org/forum/viewtopic.p ... 686#p42686 post was it "expected." That attachment was actually .JPG, and therefore was not being "incorrectly displayed as non-transparent." So ignore that example for the remainder of the discussion.
Right you are,my mistake. Apologies.
For the other two posts, the .PNG images are correctly transparent in the image files themselves. The reason the .PNG isn't displaying as transparent is a combination of two things:
  • The image is being presented as a thumbnail, which shows the thumbnail image wrapped in a link which invokes viewing the full image via the /ext/vse/lightbox/ extension.
I think I am beginning to understand. Is this extension the culprit then? I didn't intentionally make those drawings thumbnails, and now that I think about it many of the pngs that did work are small and may go back beyond a certain date...possibly before I installed Lightbox.

But in post http://www.thehcc.org/forum/viewtopic.p ... 630#p13630 fig. 19 works and seems to be a thumbnail in that light box will expand it...albeit very little. Does it work because the expanded view is within some parameter of size? The fact that it does work, makes me wonder if there is some size limitation and what it is and if it can be changed.

  • The /styles/custom/ style you're using (as a child of /styles/AllanStyle-SUBSILVER/) has an explicit solid white background color set specifically for thumbnail displays, as opposed to non-thumbnail image displays.
In /styles/custom/theme/colours.css, the background color set in this block is what makes the image become displayed as though it is non-transparent:

Code: Select all

dl.thumbnail img {
    border-color: #666666;
    background-color: #FFFFFF;
}
You simply remove the background-color: #FFFFFF; line from that block, perform a CTRL-F5 refresh in your web browser to make sure the updated .CSS file is downloaded, and the image in these two posts will now be displayed with a transparent background as expected.
So where do I find /styles/custom/theme/colours.css? Obviously on the server...and what do I edit it with? Will Notepad++ work? Or code based html editor? Anything I need to know to edit this file without damaging my board?

As I mentioned I am a user and, for the most part not really involved in the inner works of the board. I know that's a bit contrary to what the creators and most members here would wish but there it is. My only excuse is that I'm 73 years old and have other fish to fry.

That said, I feel a need to say "thank you" again...you have gone to considerable trouble to help me. I appreciate it.
So your method of creating the transparent .PNG files was not at fault. You were seeing a different result based on how large the image was in terms of height and width. Which controlled whether or not the image must be displayed using a thumbnail, versus being able to directly display the image without a thumbnail.
That's a relief! I was at a loss for an explanation thinking it was somehow Windows 10 fault.
Last edited by DWFII on Sat Nov 09, 2019 2:18 pm, edited 1 time in total.
DWFII
In the High Desert of Central Oregon

DWFII
Registered User
Posts: 344
Joined: Fri Oct 20, 2006 2:17 am
Name: D.W.
Contact:

Re: problems with transparent png's

Post by DWFII » Sat Nov 09, 2019 2:16 pm

Mick wrote:
Sat Nov 09, 2019 9:20 am
Out of curiosity, have you had any issues with transparent .gif’s?

I haven't tried. Just from a cursory look at other transparent formats, I am thinking that implementing them may be a bit beyond my paygrade. I know that there is a transparent jpg format, as well, but I don't think it is supported by ppbb. And I am faily certain there is no an internal export filter in either CorelDraw or Inkscape for those formats.
DWFII
In the High Desert of Central Oregon

User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 3356
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.
Contact:

Re: problems with transparent png's

Post by thecoalman » Sat Nov 09, 2019 2:32 pm

DWFII wrote:
Sat Nov 09, 2019 2:13 pm
So where do I find /styles/custom/theme/colours.css? Obviously on the server...and what do I edit it with?
http://www.thehcc.org/forum/styles/cust ... olours.css
Will Notepad++ work?
Yes, once you edit and upload that file will still be cached in your browser, hit refresh, may have to hit refresh a few times to see any changes. You can also hold ctrl and hit f-5 which usually works first time.

------------------------

Optionally once you have it working as you want open:

http://www.thehcc.org/forum/styles/cust ... esheet.css

Find this line near the top:

Code: Select all

@import url("colours.css");
Change it to:

Code: Select all

@import url("colours.css?v=1");
Purge the cache in the ACP and your visitors should be getting new version without having to refresh page. It's optional but if you don't do this it may be a while before your visitors see any difference.
“Results! Why, man, I have gotten a lot of results! I have found several thousand things that won’t work.”

Attributed - Thomas Edison

User avatar
EA117
Registered User
Posts: 1081
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: problems with transparent png's

Post by EA117 » Sat Nov 09, 2019 3:05 pm

DWFII wrote:
Sat Nov 09, 2019 2:13 pm
I think I am beginning to understand. Is this extension the culprit then? I didn't intentionally make those drawings thumbnails, and now that I think about it many of the pngs that did work are small and may go back beyond a certain date...possibly before I installed Lightbox.
Thumbnails are something phpBB is able to present even without any extension installed. Your phpBB settings allow you to control how large and image is allowed to be within the message body, and that a thumbnail should be generated if the image is over the phpBB-configured size. The smaller thumbnail image is shown in the message body, and the image is presented as a link which you can click on to see the full attached image.

I'm not aware of everything this particular extension does, but one of its overt actions is making the "view full image" action occur in a visually-pleasing lightbox. Its possible the extension could have also affected exactly when thumbnails would be used and/or exactly when the dl.thumbnail img CSS came into play, but I don't know that. Whether it did or not, the fix for the current site CSS is still the same.

DWFII wrote:
Sat Nov 09, 2019 2:13 pm
Does it work because the expanded view is within some parameter of size? The fact that it does work, makes me wonder if there is some size limitation and what it is and if it can be changed.
The thumbnail in that case is displaying at 400px wide, and the full image displays as 553px wide. This implies that in your phpBB ACP General, Board Configuration, Attachment Settings section, thumbnail generation is turned on and is set to 400px wide. And the image in this case must have been larger than the size limit for thumbnails which can be set there. "Size limit" in this case meaning "if the image is already smaller than this size, don't bother creating a thumbnail image."

But I just want to reiterate, although these were factors in the "when do I see the issue, when do I not see the issue" based on whether and how the thumbnail was being shown, its actually fine and expected that these conditional actions and thumbnail decisions were happening. It was the CSS that became applied "if and when" the thumbnail ended up being displayed which then caused an otherwise transparent .PNG from being displayed as transparent in the thumbnail.

"To thumbnail or not to thumbnail" is not the issue. Not withstanding that "when a thumbnail was displayed" is when the issue will occur.

DWFII wrote:
Sat Nov 09, 2019 2:13 pm
But in post http://www.thehcc.org/forum/viewtopic.p ... 630#p13630 fig. 19 works and seems to be a thumbnail in that light box will expand it...albeit very little.
I agree that this example doesn't conform to what "should have been" a non-working example.

The reason this post with 2688.gif attached isn't subject to the issue -- even though it has a thumbnail display and full image link -- is because the thumbnail image display has been classed with .attach-image img, which does not have a background color asserted in the style's CSS files. As opposed to the problem case, where the thumbnail image is being classed as dl.thumbnail img, which has the white background asserted.

This potentially is a decision being affected by the extension; I haven't downloaded the extension in order to confirm or deny. But something made the decision to use .attach-image img versus dl.thumbnail img when displaying the thumbnail. It happens to be a GIF image instead of a PNG image; don't know if that's the reason behind why Mick asked about whether GIF images ever gave you the same problem.

Regardless though, solving the problem case when a thumbnail is being displayed using dl.thumbnail img still requires exactly the solution described.

DWFII wrote:
Sat Nov 09, 2019 2:13 pm
So where do I find /styles/custom/theme/colours.css? Obviously on the server...and what do I edit it with? Will Notepad++ work? Or code based html editor? Anything I need to know to edit this file without damaging my board?
The actions needed will be similar to when an updated version of the "AllanStyle-SUBSILVER" or "custom" styles needed to be placed on the server. You will want to download the current http://www.thehcc.org/forum/styles/cust ... olours.css file using FTP, edit the colours.css file using Notepad++ or any other UTF8-aware text editor, and then re-upload the updated colours.css file to overwrite the current one.

If maintaining the styles is "not normally your job", maybe the best way to achieve this is to simply provide the attached colours.css file to whomever does normally FTP the updates to the site, and tell them "we need to update the http://www.thehcc.org/forum/styles/cust ... olours.css file with this fixed version." And let whomever does normally FTP up to the site deal with it. Note phpBB.com/community doesn't allow attaching .CSS files, so I had to rename the file to colours.css.txt. It will need to be renamed back to colours.css after you download this attachment.

If you need to perform the FTP file transfer yourself, I can't tell you "exactly what path this will appear to you as" using FTP, because that depends on your hosting service. e.g. It could be in a folder named for your hosting user account, and/or named for your domain name, and/or include a folder such as "public_html", etc. But ultimately we're talking about the same /forum/styles/ folder within that area as where you (or someone) has had to upload updated versions of the "AllanStyle-SUBSILVER" and/or "custom" styles before, in the "styles" folder under your "forum" folder.

I see thecoalman gave already gave you the good advice, and I had neglected to mention, after fixing the /styles/custom/theme/colours.css file, go ahead and invoke the phpBB ACP Purge Cache.

A style's CSS isn't actually something that is part of the phpBB cache directly. But using the ACP Purge Cache also increments the phpBB "asset version number", which for some CSS files can help users' web browsers load the updated CSS file without having to perform the CTRL-F5 refresh. It doesn't affect every CSS file though, so you can still end up needing to press CTRL-F5 in order to see a change in CSS files.
Attachments
colours.css.txt
(25.67 KiB) Downloaded 1 time

User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 3356
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.
Contact:

Re: problems with transparent png's

Post by thecoalman » Sat Nov 09, 2019 4:42 pm

EA117 wrote:
Sat Nov 09, 2019 3:05 pm
A style's CSS isn't actually something that is part of the phpBB cache directly. But using the ACP Purge Cache also increments the phpBB "asset version number",


It only does it for the ones linked in the head tag like stylesheet.css, colours.css is not linked in the head tag. You need to edit stylesheet.css as I noted above to trigger the browser to download new version of colours.css . Also note purging phpBB's cache is the very last thing you do.

Just a side note, this is not something you need to do because eventually the cached version for the browser will be replaced with newer version. If however you want your visitors to immediately see results then go ahead and do it.
“Results! Why, man, I have gotten a lot of results! I have found several thousand things that won’t work.”

Attributed - Thomas Edison

DWFII
Registered User
Posts: 344
Joined: Fri Oct 20, 2006 2:17 am
Name: D.W.
Contact:

Re: problems with transparent png's

Post by DWFII » Sat Nov 09, 2019 5:16 pm

EA117,

When I was younger I messed with all sorts of things--read the DOS manual cover to cover, upgraded to Windows early on, edited the registry, wrote the html code in a text editor for my personal webpage, as well as the Guild's webpage, and created the forum in Discus. Which in turn, through a number of iterations, evolved into the present forum.

But as i said, I've been away from that mindset for so long I don't think I am capable anymore. I had someone else customize the forum simply because I wanted it to look like it had always looked, back to the early days close to 20 years ago. I am even reluctant to upgrade to the latest version because I know the forum is customized and I also know I am not capable of fixing it if that customization breaks.

That said, I followed your instructions and edited the colour.css files in Notepad++...downloaded it through ftp, saved a copy, edited it, and uploaded it. Everything worked a treat.

Thank you and thanks to thecoalman as well.
DWFII
In the High Desert of Central Oregon

Post Reply

Return to “[3.2.x] Support Forum”