Ticket #7620: 7620.diff

class-template.php

@@ -482 +482 @@
                                 }
                         );
 
                         $banner_rtl    = $banner_rtl    ? array_shift( $banner_rtl )    : false;
                         $banner_2x_rtl = $banner_2x_rtl ? array_shift( $banner_2x_rtl ) : false;
                 }
 
                 // Resolve the URLs.
                 $banner        = $banner        ? self::get_asset_url( $plugin, $banner )        : false;
                 $banner_2x     = $banner_2x     ? self::get_asset_url( $plugin, $banner_2x )     : false;
                 $banner_rtl    = $banner_rtl    ? self::get_asset_url( $plugin, $banner_rtl )    : false;
                 $banner_2x_rtl = $banner_2x_rtl ? self::get_asset_url( $plugin, $banner_2x_rtl ) : false;
 
                 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>',
+                                        "plugin-banner-{$plugin->post_name}",
+                                        $banner,
+                                        ! empty( $banner_2x ) ? "srcset='$banner 772w, $banner_2x 1544w'" : '',
+                                        ! empty( $banner_2x ) ? 'sizes="(min-width: 900px) 1544px, 772px"' : ''
+                                );
                                 break;
 
                         case 'raw':
                         case 'raw_with_rtl':
                         default:
                                 return compact( 'banner', 'banner_2x', 'banner_rtl', 'banner_2x_rtl' );
                 }
         }
 
         /**
          * Retrieve the Plugin asset that matches the requested resolution, locale, and RTL.
          *
          * @static
          *
          * @param \WP_Post $plugin     The plugin.