WordPress.org
Get WordPress

Making WordPress.org

Ticket #4214: 4214.diff

File 4214.diff, 2.9 KB (added by diddledani, 5 years ago)

Replace theme preview img tag with picture element with appropriate intermediate sizes for differing screens

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php wordpress.org/public_html/wp-content/themes/pub/wporg-themes/theme-single.php
index 2c681fc29..756fc16e6 100644
     
    7878
    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                                        <div class="screenshot">
     82                                                <picture>
     83                                                        <source media="(min-width: 782px)" srcset="{{ data.screenshot_url }}?w=576&strip=all, {{ data.screenshot_url }}?w=1152&strip=all 2x">
     84                                                        <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">
     85                                                        <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">
     86                                                        <source media="(max-width: 400px)" srcset="{{ data.screenshot_url }}?w=344&strip=all, {{ data.screenshot_url }}?w=688&strip=all 2x">
     87                                                        <img src="{{ data.screenshot_url }}?w=1200&strip=all" srcset="{{ data.screenshot_url }}?w=2400&strip=all 2x" alt="">
     88                                                </picture>
     89                                        </div>
    8290                                <?php } else { ?>
    8391                                        <div class="screenshot blank"></div>
    8492                                <?php } ?>

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

    diff --git wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php wordpress.org/public_html/wp-content/themes/pub/wporg-themes/view-templates/theme-single.php
index 69d98f010..d933005b6 100644
     
    5757
    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=576&strip=all, {{ data.screenshot_url }}?w=1152&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=1200&strip=all" srcset="{{ data.screenshot_url }}?w=2400&strip=all 2x" alt="">
     67                                        </picture>
     68                                </div>
    6169                                <# } else { #>
    6270                                <div class="screenshot blank"></div>
    6371                                <# } #>