WordPress.org

Making WordPress.org


Ignore:
Timestamp:
04/06/2020 10:58:17 PM (8 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.