WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 12 months ago

#40967 closed defect (bug) (invalid)

Transparent images loose transparency in WP 4.8 image widget

Reported by: jpnl Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.8
Component: Media Keywords:
Focuses: Cc:
PR Number:

Description

If you add a transparent .png image to the image widget that was introduced in WordPress version 4.8, it looses it's transparency. In the attached screenshot you see the same transparent image that has been added to a footer widget.

The first one has been added with the Simple Image Widget plugin. The second one is the same image ut it has been added with the native image widget that has been introduced in 4.8.

At first this was caused by the image having a caption, but after removing that, the image still isn't transparent.

Attachments (3)

image widget.jpg (57.4 KB) - added by jpnl 2 years ago.
Screenshot 2017-06-09 14:54:45.png (212.1 KB) - added by subrataemfluence 2 years ago.
Screenshot 2017-06-09 16:37:40.png (65.9 KB) - added by subrataemfluence 2 years ago.
Transparency is retained with caption and with a darker background

Download all attachments as: .zip

Change History (11)

@jpnl
2 years ago

#1 in reply to: ↑ description @jpnl
2 years ago

Replying to jpnl:

At first this was caused by the image having a caption, but after removing that, the image still isn't transparent.

Had a closer look and it's caused by CSS class .wp-caption which is also applied when the image does not have a caption. It does that in the image widget, it doesn't do it in a normal post.

Normally, when you add an image to a post, it gets a different markup depending on whether it does or does not have a caption:

Without caption
<img class="alignnone wp-image-117868 size-medium" src="http://mydomain.nl/wordpress/wp-content/uploads/image.png" alt="" width="300" height="180" />

With caption
[caption id="attachment_117868" align="alignnone" width="300"]<img class="wp-image-117868 size-medium" src="http://mydomain.nl/wordpress/wp-content/uploads/image.png" alt="" width="300" height="180" /> with captioncaption

And that triggers this css
.wp-caption {

max-width: 96%;
margin-bottom: 10px;
padding: 8px;
padding-top: 4px;
border: 1px solid #ddd;
background-color: #f3f3f3;
text-align: center;

}

#2 follow-up: @subrataemfluence
2 years ago

Hi @jpnl,
I just tried to reproduce the issue using 4.8 native Image Widget plugin but it came along nicely for me. Please see the screenshot. Just out of curiosity, could there be any CSS or some plugin in your application responsible for this?

Last edited 2 years ago by subrataemfluence (previous) (diff)

#3 in reply to: ↑ 2 ; follow-up: @jpnl
2 years ago

Replying to subrataemfluence:

Hi @subrataemfluence,

Could it be because your page background is gray, same as the image background color?
What happens when you add a caption to the image? Does it show a background color then?

Thanks!
JP

#4 in reply to: ↑ 3 @subrataemfluence
2 years ago

Replying to jpnl:
I just checked by adding a caption and changing my background color to dark green. The transparency still works. Please see screenshot.

Replying to subrataemfluence:

Hi @subrataemfluence,

Could it be because your page background is gray, same as the image background color?
What happens when you add a caption to the image? Does it show a background color then?

Thanks!
JP

@subrataemfluence
2 years ago

Transparency is retained with caption and with a darker background

#5 follow-up: @jpnl
2 years ago

  • Resolution set to invalid
  • Status changed from new to closed

Mmm...
I looked a bit deeper and it's the theme that adds the background color.
I am sorry, I should have looked further before reporting this.
Thank you for your time!

JP

#6 in reply to: ↑ 5 @subrataemfluence
2 years ago

Replying to jpnl:
No problem. Glad I could help! I had a feeling that CSS or some plugin in your application was responsible for this. :) good that it has now been sorted out.

Mmm...
I looked a bit deeper and it's the theme that adds the background color.
I am sorry, I should have looked further before reporting this.
Thank you for your time!

JP

#7 @netweb
2 years ago

  • Milestone Awaiting Review deleted

#8 @SergeyBiryukov
12 months ago

  • Component changed from General to Media
  • Summary changed from Transparent images loose transparency in WP 4.8 image widger to Transparent images loose transparency in WP 4.8 image widget
Note: See TracTickets for help on using tickets.