Changeset 1238

Timestamp:

02/10/2015 12:18:47 AM (11 years ago)

Author:

obenland

Message:

WP.org Themes: Use Photon for theme screenshots.

The Theme Directory feeds off of images to illustrate themes, so we will always
have a sizable footprint. In listings, screenshots are retina, so four times
the size they could be, on single they are over 700px wide. No reason not to
try our best to keep it managable though!

Using Photon will cut page weight to about half of what it is now.
We're adjusting the size to only what we need and remove all meta data.

See ​https://wordpress.slack.com/archives/meta/p1423518323000926

Fixes #845.

Location:

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

Files:

• content-single.php (modified) (2 diffs)
• content.php (modified) (1 diff)
• functions.php (modified) (3 diffs)
• view-templates/theme-single.php (modified) (1 diff)
• view-templates/theme.php (modified) (1 diff)

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

@@ -1 @@
-<?php global $theme; ?>
+<?php
+    global $theme;
+    $theme = wporg_themes_photon_screen_shot( $theme );
+?>
 <div class="theme-wrap">
     <div class="theme-about">
@@ -10 +13 @@
 
         <div class="theme-screenshots">
-            <div class="screenshot"><?php the_post_thumbnail(); ?></div>
+            <div class="screenshot"><?php echo esc_url( $theme->screenshot_url . '?w=613&strip=all' ); ?></div>
 
             <div class="theme-actions">

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

@@ -1 @@
-<?php global $theme; ?>
+<?php
+    global $theme;
+    $theme = wporg_themes_photon_screen_shot( $theme );
+?>
 <article id="post-<?php echo $theme->slug; ?>" class="theme hentry">
     <div class="theme-screenshot">
-        <img src="<?php echo esc_url( $theme->screenshot_url ); ?>" alt="">
+        <img src="<?php echo esc_url( $theme->screenshot_url . '?w=286&strip=all' ); ?>" alt="">
     </div>
     <a class="more-details url" href="<?php echo esc_url( home_url( $theme->slug . '/' ) ); ?>" rel="bookmark"><?php _ex( 'More Info', 'theme' ); ?></a>

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

@@ -241 +241 @@
 
     foreach ( $api->themes as &$theme ) {
-        $theme->name        = wp_kses( $theme->name,        $themes_allowedtags );
-        $theme->author      = wp_kses( $theme->author,      $themes_allowedtags );
-        $theme->version     = wp_kses( $theme->version,     $themes_allowedtags );
-        $theme->description = wp_kses( $theme->description, $themes_allowedtags );
-        $theme->num_ratings = number_format_i18n( $theme->num_ratings );
-        $theme->preview_url = set_url_scheme( $theme->preview_url );
+        $theme->name           = wp_kses( $theme->name,        $themes_allowedtags );
+        $theme->author         = wp_kses( $theme->author,      $themes_allowedtags );
+        $theme->version        = wp_kses( $theme->version,     $themes_allowedtags );
+        $theme->description    = wp_kses( $theme->description, $themes_allowedtags );
+        $theme->num_ratings    = number_format_i18n( $theme->num_ratings );
+        $theme->preview_url    = set_url_scheme( $theme->preview_url );
+        wporg_themes_photon_screen_shot( $theme );
     }
 
@@ -264 +265 @@
     }
 
-    $theme->name        = wp_kses( $theme->name,        $themes_allowedtags );
-    $theme->author      = wp_kses( $theme->author,      $themes_allowedtags );
-    $theme->version     = wp_kses( $theme->version,     $themes_allowedtags );
-    $theme->description = wp_kses( $theme->description, $themes_allowedtags );
-    $theme->num_ratings = number_format_i18n( $theme->num_ratings );
-    $theme->preview_url = set_url_scheme( $theme->preview_url );
+    $theme->name           = wp_kses( $theme->name,        $themes_allowedtags );
+    $theme->author         = wp_kses( $theme->author,      $themes_allowedtags );
+    $theme->version        = wp_kses( $theme->version,     $themes_allowedtags );
+    $theme->description    = wp_kses( $theme->description, $themes_allowedtags );
+    $theme->num_ratings    = number_format_i18n( $theme->num_ratings );
+    $theme->preview_url    = set_url_scheme( $theme->preview_url );
+    wporg_themes_photon_screen_shot( $theme );
 
     wp_send_json_success( $theme );
@@ -275 +277 @@
 add_action( 'wp_ajax_theme-info',        'wporg_themes_theme_info' );
 add_action( 'wp_ajax_nopriv_theme-info', 'wporg_themes_theme_info' );
+
+/**
+ * Photon-ifies the screen shot URL.
+ *
+ * @param object $theme
+ * @return object
+ */
+function wporg_themes_photon_screen_shot( $theme ) {
+    if ( preg_match( '/screenshot.(jpg|jpeg|png|gif)/', $theme->screenshot_url, $match ) ) {
+        $theme->screenshot_url = sprintf( 'https://i0.wp.com/themes.svn.wordpress.org/%1$s/%2$s/%3$s',
+            $theme->slug,
+            $theme->version,
+            $match[0]
+        );
+    }
+    return $theme;
+}
 
 /**

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

@@ -16 +16 @@
                 <div class="theme-screenshots">
                     <# if ( data.screenshot_url ) { #>
-                        <div class="screenshot"><img src="{{ data.screenshot_url }}" alt=""/></div>
+                        <div class="screenshot"><img src="{{ data.screenshot_url }}?w=732&strip=all" alt=""/></div>
                     <# } else { #>
                         <div class="screenshot blank"></div>

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

@@ -2 +2 @@
     <# if ( data.screenshot_url ) { #>
     <div class="theme-screenshot">
-        <img src="{{ data.screenshot_url }}" alt="" />
+        <img src="{{ data.screenshot_url }}?w=572&strip=all" alt="" />
     </div>
     <# } else { #>