Ticket #26695: 26695.diff

wp-includes/class-wp-theme.php

@@ -904 +904 @@
         }
 
         /**
+         * Returns an array with all the theme's screenshots, checking for files
+         * in the form of 'screenshot-n' at the root of a theme directory.
+         *
+         * Maximum allowed is five screenshots total.
+         *
+         * @todo Hardcoded to pngs -- support jpg, etc.
+         * @todo Set up caching.
+         *
+         * @see WP_Theme::get_screenshot()
+         *
+         * @param a theme object
+         * @return array Screenshots. First element is default screenshot.
+         */
+        public function get_multiple_screenshots() {
+                $base = $this->get_stylesheet_directory_uri();
+                $set = array( 2, 3, 4, 5 );
+
+                // Return early if there is no main screenshot
+                if ( $this->get_screenshot() ) {
+                        return false;
+                }
+
+                // Screenshots array starts with default screenshot at position [0]
+                $screenshots = array( $this->get_screenshot() );
+
+                // Check how many other screenshots a theme has
+                foreach ( $set as $number ) {
+                        // Hard-coding file path for pngs...
+                        $file = '/screenshot-' . $number . '.png';
+                        $path = $this->template_dir . $file;
+
+                        if ( ! file_exists( $path ) )
+                                continue;
+
+                        $screenshots[] = $base . $file;
+                }
+
+                return $screenshots;
+        }
+
+        /**
          * Return files in the theme's directory.
          *
          * @since 3.4.0

wp-admin/includes/theme.php

@@ -411 +411 @@
                 $prepared_themes[ $slug ] = array(
                         'id'           => $slug,
                         'name'         => $theme->display( 'Name' ),
-                        'screenshot'   => array( $theme->get_screenshot() ), // @todo multiple
+                        'screenshot'   => $theme->get_multiple_screenshots(),
                         'description'  => $theme->display( 'Description' ),
                         'author'       => $theme->display( 'Author', false, true ),
                         'authorAndUri' => $theme->display( 'Author' ),

wp-admin/js/theme.js

@@ -363 +363 @@
                 if ( image.width && image.width <= 300 ) {
                         el.addClass( 'small-screenshot' );
                 }
+        },
+
+        // Setups an image gallery using the theme screenshots supplied by a theme
+        screenshotGallery: function() {
+                var el, img,
+                        screenshots = $( '.theme-screenshots' );
+
+                // Select the first item
+                screenshots.find( '.thumb' ).first().addClass( 'selected' );
+
+                // Clicking on a screenshot thumbnail drops it
+                // at the top of the stack in a larger size
+                screenshots.on( 'click', 'div.thumb', function() {
+                        el = $( this );
+                        img = $( this ).find( 'img' ).attr( 'src' );
+
+                        // Change src attribute of first image
+                        screenshots.find( '.screenshot' ).first().find( 'img' ).attr( 'src', img );
+                        // Mark the new image as 'selected'
+                        el.siblings( '.selected' ).removeClass( 'selected' );
+                        el.addClass( 'selected' );
+                });
         }
 });
 
@@ -538 +560 @@
 
                 this.overlay.render();
                 this.$overlay.html( this.overlay.el );
+                this.overlay.screenshotGallery();
 
                 // Bind to theme:next and theme:previous
                 // triggered by the arrow keys

wp-admin/css/wp-admin.css

@@ -6877 +6877 @@
         margin: 0 30px 0 0;
         width: 55%;
         max-width: 880px;
-        text-align: center;
 }
 
 /* First screenshot, shown big */
@@ -6918 +6917 @@
 /* Other screenshots, shown small and square */
 .theme-overlay .screenshot.thumb {
         background: #ccc;
-        border: 1px solid #eee;
+        border: 2px solid #fff;
         float: none;
         display: inline-block;
-        margin: 10px 5px 0;
-        width: 140px;
-        height: 80px;
+        margin: 10px 5px 0 0;
+        width: 80px;
         cursor: pointer;
+        padding: 3px;
 }
 
 .theme-overlay .screenshot.thumb:after {
@@ -6935 +6934 @@
 
 .theme-overlay .screenshot.thumb img {
         cursor: pointer;
+        width: 300px;
         height: auto;
         position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: auto;
+                left: 0;
+                top: 0;
+        box-sizing: border-box;
 }
 
 .theme-overlay .screenshot.selected {
-        background: transparent;
-        border: 2px solid #2ea2cc;
+        background: #0074a2;
+        border-color: #0074a2;
+        box-shadow: none;
 }
 
 .theme-overlay .screenshot.selected img {
-        opacity: 0.8;
+        opacity: 0.6;
 }
 
 /* No screenshot placeholder */

wp-admin/themes.php

@@ -317 +317 @@
                         <div class="theme-screenshots">
                         <# if ( data.screenshot[0] ) { #>
                                 <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
+                                <#
+                                        if ( _.size( data.screenshot ) > 1 ) {
+                                                _.each ( data.screenshot, function( image ) {
+                                #>
+                                        <div class="screenshot thumb"><img src="{{ image }}" alt="" /></div>
+                                <#
+                                                });
+                                        }
+                                #>
                         <# } else { #>
                                 <div class="screenshot blank"></div>
                         <# } #>