Thickbox gallery does not recognize webp images

[ilunabar]

-- 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.

[sabernhardt]

Hi and welcome to Trac! Thanks for the report.

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

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');
}}}

2. Upload a test image to the media library

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

3. 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:

# Result after patch

[graham73may]

Merge request submitted!

[mukesh27]

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$/;

[graham73may]

Hi @mukesh27!

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

[mukesh27]

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.

[SergeyBiryukov]

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.

[SergeyBiryukov]

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.

Thanks for the PR! Merged in https://core.trac.wordpress.org/changeset/53451.