Changeset 9706 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php

Timestamp:

04/06/2020 10:58:17 PM (6 years ago)

Author:

coffee2code

Message:

Theme Directory: Load a more efficiently sized theme screenshot on theme permalink pages based on viewport size.

Props diddledan, jonoaldersonwp.
Fixes #4214.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php (modified) (1 diff)

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

@@ -79 +79 @@
             <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>
+                    <?php $escaped_screenshot_url = esc_url( $theme->screenshot_url ); ?>
+                    <div class="screenshot">
+                        <picture>
+                            <source media="(min-width: 782px)" srcset="<?php echo $escaped_screenshot_url; ?>?w=572&strip=all, <?php echo $escaped_screenshot_url; ?>?w=1144&strip=all 2x">
+                            <source media="(min-width: 481px) and (max-width: 782px)" srcset="<?php echo $escaped_screenshot_url; ?>?w=700&strip=all, <?php echo $escaped_screenshot_url; ?>?w=1400&strip=all 2x">
+                            <source media="(min-width: 401px) and (max-width: 480px)" srcset="<?php echo $escaped_screenshot_url; ?>?w=420&strip=all, <?php echo $escaped_screenshot_url; ?>?w=840&strip=all 2x">
+                            <source media="(max-width: 400px)" srcset="<?php echo $escaped_screenshot_url; ?>?w=344&strip=all, <?php echo $escaped_screenshot_url; ?>?w=688&strip=all 2x">
+                            <img src="<?php echo $escaped_screenshot_url; ?>?w=572&strip=all" srcset="<?php echo $escaped_screenshot_url; ?>?w=1144&strip=all 2x" loading="lazy" alt="">
+                        </picture>
+                    </div>
                 <?php } else { ?>
                     <div class="screenshot blank"></div>