Making WordPress.org

Opened 18 months ago

Closed 5 weeks ago

#6617 closed enhancement (fixed)

Replace plugin page banner markup

Reported by: jonoaldersonwp's profile jonoaldersonwp Owned by: dufresnesteven's profile dufresnesteven
Milestone: Priority: low
Component: Plugin Directory Keywords: performance seo
Cc:

Description (last modified by 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">

Change History (10)

#1 @jonoaldersonwp
18 months ago

  • Description modified (diff)

#2 @jonoaldersonwp
18 months ago

  • Description modified (diff)

#3 @jonoaldersonwp
18 months ago

  • Description modified (diff)

#4 @dd32
18 months ago

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

Last edited 6 weeks ago by dd32 (previous) (diff)

#5 @jonoaldersonwp
18 months ago

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

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


18 months ago

This ticket was mentioned in Slack in #meta by dufresnesteven. View the logs.


6 weeks ago

#8 @dufresnesteven
5 weeks ago

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?

#9 @jonoaldersonwp
5 weeks ago

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

#10 @dufresnesteven
5 weeks ago

  • Owner set to dufresnesteven
  • Resolution set to fixed
  • Status changed from new to closed

In 13689:

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

Fixes: #6617
Props: jonoaldersonwp, dd32

Note: See TracTickets for help on using tickets.