WordPress.org

Making WordPress.org

Changeset 1705


Ignore:
Timestamp:
07/05/2015 07:26:25 PM (5 years ago)
Author:
Otto42
Message:

Add srcset to screenshot images, move img tag building into functions.php

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

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-showcase/archive.php

    r1474 r1705  
    1818
    1919                <div class="story-excerpt">
    20                     <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><img src="<?php site_screenshot_src(145); ?>" class="alignleft" width="145" height="110" alt="<?php the_title_attribute(); ?>" /></a>
    21 
     20                    <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
     21                        <?php site_screenshot_tag( 145, 'screenshot alignleft' ); ?>
     22                    </a>
    2223                    <h5><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
    2324                    <div class="excerpt"><?php the_content_limit(200); ?></div>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-showcase/functions.php

    r1474 r1705  
    3131    }
    3232
    33     if ( !empty( $_COOKIE['devicePixelRatio'] ) && $_COOKIE['devicePixelRatio'] >= 1.5 ) {
    34         $width = $width * 2;
    35     }
    36 
    3733    if ( '' != $width ) {
    3834        $screenshot .= '?w=' . $width;
     
    4642        return $screenshot;
    4743    }
     44}
     45
     46// build the whole img tag properly for the screenshot, with srcset support
     47function site_screenshot_tag( $width = '', $classes='screenshot' ) {
     48    global $post;
     49
     50    $screenshot = get_post_meta($post->ID, 'screenshot', true);
     51    if ( empty( $screenshot ) ) {
     52        $screenshot = 'https://wordpress.com/mshots/v1/http%3A%2F%2F' . get_site_domain( true, false );
     53        $srcset = $screenshot;
     54    }
     55
     56    if ( '' != $width ) {
     57        $screenshot .= '?w=' . $width;
     58        $srcset .= '?w=' . $width*2;
     59    }
     60
     61    // mshot images have a 4/3 ratio
     62    $height = (int)( $width * (3/4) );
     63
     64    $img = "<img src='{$screenshot}' srcset='$srcset 2x' width='{$width}' height='{$height}' alt='". the_title_attribute(array('echo'=>false)) . "' class='{$classes}' />";
     65
     66    echo $img;
    4867}
    4968
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-showcase/page-home.php

    r1474 r1705  
    1818                        <div class="wpsc-hero-slide-content">   
    1919                            <a href="<?php the_permalink(); ?>" class="wpsc-hero-slide-img">
    20                                 <img src="<?php site_screenshot_src( 487 ); ?>" alt="<?php the_title_attribute(); ?>" width="487" height="365" />
     20                                <?php site_screenshot_tag( 457 ); ?>
    2121                            </a>
    2222                            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
     
    6363                    <li>                   
    6464                        <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
    65                             <img src="<?php site_screenshot_src( 215 ); ?>" width="215" height="161" alt="<?php the_title_attribute(); ?>" class="screenshot" />
     65                            <?php site_screenshot_tag( 215 ); ?>
    6666                        </a>
    6767                        <h5><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
     
    8686                <li>                   
    8787                    <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
    88                         <img src="<?php site_screenshot_src( 215 ); ?>" width="215" height="155" alt="<?php the_title_attribute(); ?>" class="screenshot" />
     88                        <?php site_screenshot_tag( 215 ); ?>
    8989                    </a>
    9090                    <h5><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-showcase/single.php

    r1474 r1705  
    1212                                <?php breadcrumb(); ?>
    1313                                <a href=' http://<?php get_site_domain( false ); ?>'>
    14                                     <img src="<?php site_screenshot_src( 340 ); ?>"  class='site-screenshot' title='<?php the_title(); ?>' width='340' height='255' />
     14                                    <?php site_screenshot_tag( 340, 'screenshot site-screenshot'); ?>
    1515                                </a>
    1616                                <?php the_content(); ?>
Note: See TracChangeset for help on using the changeset viewer.