WordPress.org
Get WordPress

Making WordPress.org

Changeset 9706


Ignore:
Timestamp:
04/06/2020 10:58:17 PM (4 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.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r9533 r9706  
    7979            <div class="theme-info">
    8080                <?php if ( $theme->screenshot_url ) { ?>
    81                     <div class="screenshot"><img src="<?php echo esc_url( $theme->screenshot_url ); ?>?w=1142&strip=all" alt=""/></div>
     81                    <?php $escaped_screenshot_url = esc_url( $theme->screenshot_url ); ?>
     82                    <div class="screenshot">
     83                        <picture>
     84                            <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">
     85                            <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">
     86                            <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">
     87                            <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">
     88                            <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="">
     89                        </picture>
     90                    </div>
    8291                <?php } else { ?>
    8392                    <div class="screenshot blank"></div>

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

    r9533 r9706  
    5858            <div class="theme-info">
    5959                <# if ( data.screenshot_url ) { #>
    60                 <div class="screenshot"><img src="{{ data.screenshot_url }}?w=1142&strip=all" alt=""/></div>
     60                <div class="screenshot">
     61                    <picture>
     62                        <source media="(min-width: 782px)" srcset="{{ data.screenshot_url }}?w=572&strip=all, {{ data.screenshot_url }}?w=1144&strip=all 2x">
     63                        <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">
     64                        <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">
     65                        <source media="(max-width: 400px)" srcset="{{ data.screenshot_url }}?w=344&strip=all, {{ data.screenshot_url }}?w=688&strip=all 2x">
     66                        <img src="{{ data.screenshot_url }}?w=572&strip=all" srcset="{{ data.screenshot_url }}?w=1144&strip=all 2x" loading="lazy" alt="">
     67                    </picture>
     68                </div>
    6169                <# } else { #>
    6270                <div class="screenshot blank"></div>
Note: See TracChangeset for help on using the changeset viewer.