Make WordPress Core

Opened 12 months ago

Closed 12 months ago

Last modified 8 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
12 months 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.

12 months ago

  • Keywords has-patch added; needs-patch removed

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

Trac ticket:

# To Replicate

  1. Thickbox enqueued in TwentyTwentyTwo using:

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
(.zip because github issues don't support .webp!)

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

<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"/>


# Result before patch

Clicking on a .webp test image produces this result:

# Result after patch

#3 @graham73may
12 months ago

Merge request submitted!

#4 @sabernhardt
12 months ago

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

#5 follow-up: @mukesh27
12 months 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
12 months ago

Hi @mukesh27!

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

#7 @mukesh27
12 months 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
12 months ago

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

#9 @SergeyBiryukov
12 months 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
12 months 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
8 months ago

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