Changeset 1705

Timestamp:

07/05/2015 07:26:25 PM (10 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:

• archive.php (modified) (1 diff)
• functions.php (modified) (2 diffs)
• page-home.php (modified) (3 diffs)
• single.php (modified) (1 diff)

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

@@ -18 +18 @@
 
                 <div class="story-excerpt">
-                    <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>
-
+                    <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
+                        <?php site_screenshot_tag( 145, 'screenshot alignleft' ); ?>
+                    </a>
                     <h5><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
                     <div class="excerpt"><?php the_content_limit(200); ?></div>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-showcase/functions.php

@@ -31 +31 @@
     }
 
-    if ( !empty( $_COOKIE['devicePixelRatio'] ) && $_COOKIE['devicePixelRatio'] >= 1.5 ) {
-        $width = $width * 2;
-    }
-
     if ( '' != $width ) {
         $screenshot .= '?w=' . $width;
@@ -46 +42 @@
         return $screenshot;
     }
+}
+
+// build the whole img tag properly for the screenshot, with srcset support
+function site_screenshot_tag( $width = '', $classes='screenshot' ) {
+    global $post;
+
+    $screenshot = get_post_meta($post->ID, 'screenshot', true);
+    if ( empty( $screenshot ) ) {
+        $screenshot = 'https://wordpress.com/mshots/v1/http%3A%2F%2F' . get_site_domain( true, false );
+        $srcset = $screenshot;
+    }
+
+    if ( '' != $width ) {
+        $screenshot .= '?w=' . $width;
+        $srcset .= '?w=' . $width*2;
+    }
+
+    // mshot images have a 4/3 ratio
+    $height = (int)( $width * (3/4) );
+
+    $img = "<img src='{$screenshot}' srcset='$srcset 2x' width='{$width}' height='{$height}' alt='". the_title_attribute(array('echo'=>false)) . "' class='{$classes}' />";
+
+    echo $img;
 }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-showcase/page-home.php

@@ -18 +18 @@
                         <div class="wpsc-hero-slide-content">   
                             <a href="<?php the_permalink(); ?>" class="wpsc-hero-slide-img">
-                                <img src="<?php site_screenshot_src( 487 ); ?>" alt="<?php the_title_attribute(); ?>" width="487" height="365" />
+                                <?php site_screenshot_tag( 457 ); ?>
                             </a>
                             <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
@@ -63 +63 @@
                     <li>                    
                         <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
-                            <img src="<?php site_screenshot_src( 215 ); ?>" width="215" height="161" alt="<?php the_title_attribute(); ?>" class="screenshot" />
+                            <?php site_screenshot_tag( 215 ); ?>
                         </a>
                         <h5><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h5>
@@ -86 +86 @@
                 <li>                    
                     <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
-                        <img src="<?php site_screenshot_src( 215 ); ?>" width="215" height="155" alt="<?php the_title_attribute(); ?>" class="screenshot" />
+                        <?php site_screenshot_tag( 215 ); ?>
                     </a>
                     <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

@@ -12 +12 @@
                                 <?php breadcrumb(); ?>
                                 <a href=' http://<?php get_site_domain( false ); ?>'>
-                                    <img src="<?php site_screenshot_src( 340 ); ?>"  class='site-screenshot' title='<?php the_title(); ?>' width='340' height='255' />
+                                    <?php site_screenshot_tag( 340, 'screenshot site-screenshot'); ?>
                                 </a>
                                 <?php the_content(); ?>