Replace plugin page banner markup

[jonoaldersonwp]

The hero banner image on plugin pages uses suboptimal markup, which has a negative impact on performance and SEO. The following minor changes should significantly benefit end-users.

• Remove the inline <style> tag (which sets the image as the background of the banner container).
• Remove all styling applied to .plugin-banner, except for the existing margin attribute(s).
• Add CSS targeting .plugin-banner img to set object-fit: cover; width: 100%;
• Add an <img> inside .plugin-banner, using the markup below.

Image markup

<img decoding="async" fetchpriority="high" src="%path-to-image%" width="930" height="304">

When a 1544x500 version is available, add a srcset attribute, to produce a result as follows:

<img decoding="async" fetchpriority="high" srcset="%path-to-2x-image% 2x" src="%path-to-image%" width="930" height="304">

[dd32]

FWIW I think the existing markup choice was due to the previous design where the Plugin Name text was overlaid on the image.

Can you validate the HMTL returned through the API and displayed within the iframe inside WordPress for plugin details too? That still uses the text-overlay design it appears. Ie. wp-admin/plugin-install.php?tab=plugin-information&plugin=wordpress-seo.

Edit: Core hard-codes it, it's not from the API. ​https://github.com/WordPress/wordpress-develop/blob/ec1110c719252c69559c7d3b5709a6dc914fd27b/src/wp-admin/includes/plugin-install.php#L616-L632

[jonoaldersonwp]

Ah, interesting!
We can do something similar here, I think, and just move the background into an <img> el in the existing structure.

• Remove the inline <style> tag (which sets the image as the background of #plugin-information-title.with-banner).
• Add CSS targeting .vignette > img to set min-width: 100%; object-fit: cover; object-position: top center;.
• Add an <img> inside .vignette, using the markup below.

Image markup

<img decoding="async" fetchpriority="high" src="%path-to-image%" width="755" height="250">

When a 1544x500 version is available, add a srcset attribute, to produce a result as follows:

<img decoding="async" fetchpriority="high" srcset="%path-to-2x-image% 2x" src="%path-to-image%" width="755" height="250">

[dufresnesteven]

I've added some of these changes for https://meta.trac.wordpress.org/ticket/7620.

I'm assuming we want to provide a specific width and height, correct?

[jonoaldersonwp]

Fantastic! Yeah, that'd be good; it seems like the aspect ratio remains consistent at all viewport sizes, so we can use 1170 / 376.

[dufresnesteven]

In 13689:

wporg-plugins-2024: Add aspect ratio to plugin banner image.

Fixes: #6617
Props: jonoaldersonwp, dd32