Ticket #4214: 4214.diff

wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php

@@ -78 +78 @@
 
                         <div class="theme-info">
                                 <?php if ( $theme->screenshot_url ) { ?>
-                                        <div class="screenshot"><img src="<?php echo esc_url( $theme->screenshot_url ); ?>?w=1142&strip=all" alt=""/></div>
+                                        <div class="screenshot">
+                                                <picture>
+                                                        <source media="(min-width: 782px)" srcset="{{ data.screenshot_url }}?w=576&strip=all, {{ data.screenshot_url }}?w=1152&strip=all 2x">
+                                                        <source media="(min-width: 481px) and (max-width: 782px)" srcset="{{ data.screenshot_url }}?w=700&strip=all, {{ data.screenshot_url }}?w=1400&strip=all 2x">
+                                                        <source media="(min-width: 401px) and (max-width: 480px)" srcset="{{ data.screenshot_url }}?w=420&strip=all, {{ data.screenshot_url }}?w=840&strip=all 2x">
+                                                        <source media="(max-width: 400px)" srcset="{{ data.screenshot_url }}?w=344&strip=all, {{ data.screenshot_url }}?w=688&strip=all 2x">
+                                                        <img src="{{ data.screenshot_url }}?w=1200&strip=all" srcset="{{ data.screenshot_url }}?w=2400&strip=all 2x" alt="">
+                                                </picture>
+                                        </div>
                                 <?php } else { ?>
                                         <div class="screenshot blank"></div>
                                 <?php } ?>

wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php

@@ -57 +57 @@
 
                         <div class="theme-info">
                                 <# if ( data.screenshot_url ) { #>
-                                <div class="screenshot"><img src="{{ data.screenshot_url }}?w=1142&strip=all" alt=""/></div>
+                                <div class="screenshot">
+                                        <picture>
+                                                <source media="(min-width: 782px)" srcset="{{ data.screenshot_url }}?w=576&strip=all, {{ data.screenshot_url }}?w=1152&strip=all 2x">
+                                                <source media="(min-width: 481px) and (max-width: 782px)" srcset="{{ data.screenshot_url }}?w=700&strip=all, {{ data.screenshot_url }}?w=1400&strip=all 2x">
+                                                <source media="(min-width: 401px) and (max-width: 480px)" srcset="{{ data.screenshot_url }}?w=420&strip=all, {{ data.screenshot_url }}?w=840&strip=all 2x">
+                                                <source media="(max-width: 400px)" srcset="{{ data.screenshot_url }}?w=344&strip=all, {{ data.screenshot_url }}?w=688&strip=all 2x">
+                                                <img src="{{ data.screenshot_url }}?w=1200&strip=all" srcset="{{ data.screenshot_url }}?w=2400&strip=all 2x" alt="">
+                                        </picture>
+                                </div>
                                 <# } else { #>
                                 <div class="screenshot blank"></div>
                                 <# } #>