adding support for layload in WP 5.5, adding static plugin assets.

README.txt

@@ -53,6 +53,12 @@ The broader goal of PHOTOPRESS is to make WordPress easy to use for photographer
 * configurable caption display (can use image title, caption, and/or description)
 * Two caption layouts to choose from 
 
+== Screenshots ==
+
+1. Customizable Gallery Block with multiple styles
+2. Full Screen Slideshows
+3. Store image meta-data in taxonomies
+
 == Development ==
 
 Our development motto is "do no harm" which means that we leverage the patterns outlined in WordPress Core and the Gutenberg editor as opposed to creating proprietary features that impede the overall usability of WordPress.

modules/base/base.php

@@ -38,6 +38,11 @@ public function option_assets() {
 			array( 'wp-api', 'wp-i18n', 'wp-components', 'wp-element' ), '1.0.0', true 
 		);
 
+		wp_localize_script( 'photopress-options-script', 'photopress_options_conf', [
+
+			'plugin_url' => plugins_url( '', dirname(dirname(__FILE__)) )
+		] );
+
 		wp_enqueue_style( 
 			'photopress-options-style', 
 			plugins_url( '/', __FILE__ ) . '../../dist/blocks.style.build.css', 

modules/gallery/assets/js/gallery-masonry.js

@@ -6,7 +6,7 @@
 	const container = $( '.photopress-gallery-masonry' );
 
 	$( document ).ready( function() {
-		container.imagesLoaded().done( function() {
+		//container.imagesLoaded().done( function() {
 			container.masonry( {
 				itemSelector: '.photopress-gallery-item',
 				transitionDuration: '0',
@@ -17,6 +17,6 @@
 			} );
 
 			container.css({opacity: 1});
-		} );
+		//} );
 	} );
 }( jQuery ) );

modules/metadata/metadata.php

@@ -24,7 +24,7 @@ public function definePublicHooks() {
 		// add additional attributes to images
 		add_filter( 'wp_get_attachment_image_attributes', [$this, 'addAttributesToImages' ], 11, 2 );
 		add_filter( 'the_content', array( $this, 'addAttributesToImagesInContent' ) );
-
+		//add_filter( 'wp_calculate_image_srcset', [ $this, 'sortImageSrcset'], 10, 5 );
 		// stop wordpress from stripping image meta from resized images.
 		add_filter ('image_strip_meta', pp_api::getOption( 'core', 'metadata', 'strip_metadata_from_resized_image' ) );
 
@@ -162,6 +162,7 @@ function addAttributesToImages( $attr, $attachment = null ) {
 		//$attr['data-orig-size']         = $size;
 		$attr['data-image-title']       = esc_attr( htmlspecialchars( $attachment_title ) );
 		$attr['data-image-description'] = esc_attr( htmlspecialchars( $attachment_desc ) );	
+		$attr['srcset']	= wp_get_attachment_image_srcset( $attachment_id );
 
 		return $attr;
 	}
@@ -590,6 +591,13 @@ public function makeImagesVisibleToTaxQueries( $query ) {
 		return $query;
 
 	}
+
+	public function sortImageSrcset( $sources, $size_array, $image_src, $image_meta, $attachment_id ) {
+		//print_r($sources);
+		ksort( $sources );
+
+		return $sources;
+	}
 }
 
 ?>

modules/slideshow/assets/js/slideshow.js

@@ -343,6 +343,8 @@ photopress.slideshow.prototype = {
 			// add data sizes attribute
 			jQuery(ni).attr('sizes', `${thumbnailWidth}px`);
 
+			jQuery(ni).attr('src', '');
+
 			// update thumbnail count
 			that.thumbnails.count++;
 
@@ -351,8 +353,7 @@ photopress.slideshow.prototype = {
 
 			// append it to the thumbnail 
 			jQuery('.thumbnail-list').append( '<div class="thumbnail-item item">' + ni[0].outerHTML + "</div>" );
-
-
+
 		});
 
 

src/blocks/gallery/save.js

@@ -157,6 +157,47 @@ export default function save( { attributes } ) {
 		return size;
 	};
 
+	const getImageDimensions = (aspectRatio) => {
+
+		let size = {
+
+			width: 0,
+			height: 0
+		};
+
+		let cropSizeFactor = calcCropSizeFactor(aspectRatio);
+
+		switch(galleryStyle) {
+
+			case "mosaic":
+				// calculate image width and apply crop factor.
+				size.width = rowHeight * aspectRatio * cropSizeFactor;
+				size.height= rowHeight;
+				break;
+
+			case "rows":
+			// calculate image width
+				size.width = rowHeight * aspectRatio;
+				size.height = rowHeight
+				break;
+
+			case "masonry":
+				// do nothing as we get an explicit width
+				size.width = columnWidth;
+				size.height = columnWidth / aspectRatio;
+				break;
+
+			case "columns":
+				// calculate width based on column count and apply possible crop factor 
+				size.width = `( (100vw - ${themeHorizontalMargin} ) / ${columns} ) * ${cropSizeFactor}`;
+				break;
+		}
+
+		return size;
+	};
+
+
+
 	return (
 
 		<figure className={ 'photopress-gallery' } >
@@ -189,9 +230,11 @@ export default function save( { attributes } ) {
 							data-position={index}
 							data-full-url={ image.fullUrl }
 							data-link={ image.link }
-							className={ image.id ? `wp-image-${ image.id }` : null }
+							className={ image.id ? `wp-image wp-image-${ image.id }` : null }
 							//sizes={`(max-width: 700px) 100vw, calc( ${sizesAttrCalc} )`}
 							sizes={'(max-width: 700px) 100vw, calc(' + getImageSizeCalc( image.aspectRatio ) +')'}
+							width={ getImageDimensions( image.aspectRatio ).width }
+							height={ getImageDimensions( image.aspectRatio ).height }
 						/>
 					);
 

src/options.js

@@ -181,7 +181,7 @@ class SettingsPage extends Component {
 
 		)};
 
-
+		const logo_url = photopress_options_conf.plugin_url + '/static/images/logo-200w.png';
 
 		return (
 			<Fragment>
@@ -191,7 +191,9 @@ class SettingsPage extends Component {
 					<div className="masthead row">
 						<div className="masthead-container">
 							<div className="logo">
-								<h1>{ __( 'PhotoPress' ) }</h1>
+								<h1>
+									<img src={logo_url} alt={__( 'PhotoPress' ) } />
+								</h1>
 							</div>
 						</div>
 					</div>