Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 22 months ago

#55786 closed defect (bug) (fixed)

Thickbox gallery does not recognize webp images

Reported by: ilunabar's profile ilunabar Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.9.3
Component: External Libraries Keywords: good-first-bug has-patch add-to-field-guide
Focuses: javascript Cc:

Description (last modified by sabernhardt)

-- The line of code 79 of /wp-includes/js/thickbox/thickbox.js is:

var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

-- It should be something like this:

var urlString = /\.webp|\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

The line of code 82 of /wp-includes/js/thickbox/thickbox.js is:

if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images

-- It should be something like this:

if(urlType == '.webp' || urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images

I hope this will help.

Change History (12)

#1 @sabernhardt
2 years ago

  • Component changed from General to External Libraries
  • Description modified (diff)
  • Keywords needs-patch good-first-bug added; has-patch removed

Hi and welcome to Trac! Thanks for the report.

The patch will need to edit the thickbox.js file in the js/_enqueues directory.

This ticket was mentioned in PR #2748 on WordPress/wordpress-develop by graham73may.


2 years ago
#2

  • Keywords has-patch added; needs-patch removed

Applied the code changes suggested in the Trac ticket to enable thickbox.js .webp support.

Trac ticket: https://core.trac.wordpress.org/ticket/55786

# To Replicate

  1. Thickbox enqueued in TwentyTwentyTwo using:

{{{php
function include_thickbox_scripts() {

include the javascript
wp_enqueue_script('thickbox', NULL, jquery?);

include the thickbox styles
wp_enqueue_style('thickbox.css', '/' . WPINC . '/js/thickbox/thickbox.css', NULL, '1.0');

}

add_action('wp_enqueue_scripts', 'include_thickbox_scripts');
}}}

  1. Upload a test image to the media library

fallback-default.webp.zip
(.zip because github issues don't support .webp!)

  1. Test code added to any template for the purpose of replicating the issue:

{{{html
<a class="thickbox" href="/wp-content/uploads/2022/05/fallback-default.webp" title="Image 1">

<img alt="Image 1" src="/wp-content/uploads/2022/05/fallback-default.webp"/>

</a>
}}}

# Result before patch

Clicking on a .webp test image produces this result:

https://i0.wp.com/user-images.githubusercontent.com/6642498/170302414-a84542c3-e3e0-4c2a-ab91-89fecef908ef.png

# Result after patch

https://i0.wp.com/user-images.githubusercontent.com/6642498/170302917-a987c606-271e-4af0-873d-53e8451a4478.png

#3 @graham73may
2 years ago

Merge request submitted!

#4 @sabernhardt
2 years ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.1

#5 follow-up: @mukesh27
2 years ago

  • Keywords needs-testing removed

Hi there!

PR working fine for me in the 6.1-alpha-53449 version.

Small concern regarding changes. For consistency of image format can we add $ in webp format also?

var urlString = /\.webp|\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

Should be

var urlString = /\.webp$|\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

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

Hi @mukesh27!

Thanks, good point! I've added this in now.

#7 @mukesh27
2 years ago

Thanks for the update.

It looks good to me now. Let's wait for 2nd review on this if anyone finds any issue otherwise, it will marge in the core soon.

Ping @SergeyBiryukov for review.

#8 @SergeyBiryukov
2 years ago

  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#9 @SergeyBiryukov
2 years ago

This looks good to me too.

For reference, thickbox.js is an "adopted" library, which means it's no longer supported upstream and can be safely patched in core. Looking at the commit history, it has already been patched multiple times over the years.

#10 @SergeyBiryukov
2 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 53451:

Media: Add support for WebP images in the Thickbox library.

This ensures that .webp images are properly recognized and displayed in the modal as expected.

Follow-up to [50810], [51227], [52073].

Props ilunabar, graham73may, sabernhardt, mukesh27, SergeyBiryukov.
Fixes #55786.

#12 @milana_cap
22 months ago

  • Keywords add-to-field-guide added
Note: See TracTickets for help on using tickets.