Ticket #5190: 5190.diff

themes/pub/wporg-plugins/client/components/plugin/sections/screenshots/image-gallery/index.jsx

@@ -435 +435 @@
         }
 
         _slideRight( event ) {
                 this.slideToIndex( this.state.currentIndex + 1, event );
         }
 
         _renderItem( item ) {
                 return (
                         <figure className="image-gallery-image">
                                 <a href={ item.original }>
                                         <img
                                                 src={ item.original }
                                                 alt={ item.originalAlt }
                                                 srcSet={ item.srcSet }
                                                 sizes={ item.sizes }
+                                                loading="lazy"
                                                 onLoad={ this.props.onImageLoad }
                                                 onError={ this._handleImageError.bind( this ) }
                                         />
                                 </a>
                                 {
                                         item.description &&
                                         <figcaption className="image-gallery-description">
                                                 { item.description }
                                         </figcaption>
                                 }
                         </figure>
                 );
         }
 
         render() {
@@ -501 +502 @@
                                         type="button"
                                         onMouseOver={ this._handleMouseOverThumbnails.bind( this, index ) }
                                         onMouseLeave={ this._handleMouseLeaveThumbnails.bind( this, index ) }
                                         key={ index }
                                         className={
                                                 'button-link image-gallery-thumbnail' +
                                                 ( currentIndex === index ? ' active' : '' ) +
                                                 thumbnailClass
                                         }
                                         onTouchStart={ event => this.slideToIndex.call( this, index, event ) }
                                         onClick={ event => this.slideToIndex.call( this, index, event ) }
                                 >
                                         <img
                                                 src={ item.thumbnail }
                                                 alt={ item.thumbnailAlt }
+                                                loading="lazy"
                                                 onError={ this._handleImageError.bind( this ) } />
                                         <div className="image-gallery-thumbnail-label">
                                                 { item.thumbnailLabel }
                                         </div>
                                 </button>
                         );
                 } );
 
                 return (
                         <section ref={ i => this._imageGallery = i } className="image-gallery">
                                 <div
                                         onMouseOver={ this._handleMouseOver.bind( this ) }
                                         onMouseLeave={ this._handleMouseLeave.bind( this ) }
                                         className="image-gallery-content">
                                         {

plugins/plugin-directory/shortcodes/class-screenshots.php

@@ -13 +13 @@
 
         /**
          * @return string
          */
         static function display() {
                 $output = '';
 
                 $screenshots = Template::get_screenshots();
 
                 if ( ! $screenshots ) {
                         return '';
                 }
 
                 foreach ( $screenshots as $image ) {
                         $screen_shot = sprintf(
-                                '<a href="%1$s" rel="nofollow"><img class="screenshot" src="%1$s" alt="" /></a>',
+                                '<a href="%1$s" rel="nofollow"><img class="screenshot" src="%1$s" alt="" loading="lazy" /></a>',
                                 esc_url( $image['src'] )
                         );
 
                         if ( $image['caption'] ) {
                                 $screen_shot .= '<figcaption>' . $image['caption'] . '</figcaption>';
                         }
 
                         $output .= '<li><figure>' . $screen_shot . '</figure></li>';
                 }
 
                 return '<ul class="plugin-screenshots">' . $output . '</ul>';
         }
 }