Changeset 3889 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx

Timestamp:

08/31/2016 03:49:39 AM (10 years ago)

Author:

obenland

Message:

Plugin Directory: First pass at a screenshot slider.

Testable at: ​https://wordpress.org/plugins-wp/shortcode-ui/?react

See #1828.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/index.jsx

@@ -1 +1 @@
 import React from 'react';
+import values from 'lodash/values';
+
+import ImageGallery from './image-gallery';
 
 export default React.createClass( {
@@ -5 +8 @@
 
     render() {
+        let items = values( this.props.screenshots ).map( screenshot => {
+            return {
+                original: screenshot.src,
+                thumbnail: screenshot.src + '&width=100',
+                description: screenshot.caption || false
+            }
+        } );
+
+        if ( ! items ) {
+            return <div />;
+        }
+
         return (
-            <div id="screenshots" className="read-more" aria-expanded="false">
+            <div id="screenshots" className="plugin-screenshots">
                 <h2>Screenshots</h2>
-                <ul className="plugin-screenshots">
-                    <li>
-                        <figure>
-                            <a href="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-5.png?strip=all" rel="nofollow">
-                                <img className="screenshot" src="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-5.png?strip=all" />
-                            </a>
-                            <figcaption>An example of a front-end widget configuration.</figcaption>
-                        </figure>
-                    </li>
-                    <li>
-                        <figure>
-                            <a href="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-6.png?strip=all" rel="nofollow"><img className="screenshot" src="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-6.png?strip=all" /></a>
-                            <figcaption>An example of a front-end widget configuration.</figcaption>
-                        </figure>
-                    </li>
-                    <li>
-                        <figure>
-                            <a href="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-4.png?strip=all" rel="nofollow"><img className="screenshot" src="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-4.png?strip=all" /></a>
-                            <figcaption>An example of a front-end widget configuration.</figcaption>
-                        </figure>
-                    </li>
-                    <li>
-                        <figure>
-                            <a href="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-2.png?strip=all" rel="nofollow"><img className="screenshot" src="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-2.png?strip=all" /></a>
-                            <figcaption>The top half of the settings page.</figcaption>
-                        </figure>
-                    </li>
-                    <li>
-                        <figure>
-                            <a href="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-3.png?strip=all" rel="nofollow"><img className="screenshot" src="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-3.png?strip=all" /></a>
-                            <figcaption>The configuration options for the front-end widget.</figcaption>
-                        </figure>
-                    </li>
-                    <li>
-                        <figure>
-                            <a href="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-1.png?strip=all" rel="nofollow"><img className="screenshot" src="https://i0.wp.com/plugins.svn.wordpress.org/!svn/bc/1477794/google-analyticator/trunk/screenshot-1.png?strip=all" /></a>
-                            <figcaption>An example of the admin dashboard widget displaying stats pulled from Google
-                                Analytics.
-                            </figcaption>
-                        </figure>
-                    </li>
-                </ul>
+                <ImageGallery items={ items } />
             </div>
         )