Changeset 13670

Timestamp:

05/08/2024 03:56:04 AM (5 months ago)

Author:

dufresnesteven

Message:

Plugin-directory: Update plugin banner html to better support display on lower DPI screens.

See #7620

File:

• sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/class-template.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/class-template.php

@@ -495 +495 @@
         switch ( $output ) {
             case 'html':
-                $id    = "plugin-banner-{$plugin->post_name}";
-                $html  = "<style type='text/css'>";
-                $html .= "#{$id} { background-image: url('{$banner}'); }";
-                if ( ! empty( $banner_2x ) ) {
-                    $html .= "@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 120dpi) { #{$id} { background-image: url('{$banner_2x}'); } }";
-                }
-                $html .= '</style>';
-                $html .= "<div class='plugin-banner' id='{$id}'></div>";
-
-                return $html;
+                return sprintf(
+                    '<div class="plugin-banner" id="%1$s"><img decoding="async" fetchpriority="high" src="%2$s" %3$s %4$s></div>',
+                    esc_attr( "plugin-banner-{$plugin->post_name}" ),
+                    esc_url( $banner ),
+                    ! empty( $banner_2x ) ? "srcset='" . esc_url( $banner ) . " 772w, " . esc_url( $banner_2x ) . " 1544w'" : '',
+                    ! empty( $banner_2x ) ? 'sizes="(min-width: 900px) 1544px, 772px"' : ''
+                );
+
                 break;