Jetpack Tiled Gallery Not Resizing Images Correctly

I’m using the Jetpack Tiled Gallery in my website: https://thepostmansknock.com/portfolio

I’m having two issues:

1. On a large screen, the tiles look “normal”, as you can see in this image:

https://thepostmansknock.com/wp-content/uploads/2014/05/gallery2.png

The positioning and display of the images is what you would expect from the gallery.

However, if the gallery is displayed from a smaller screen, the images lose their aspect ratio, and the gallery does not look aesthetically correct. See this image:

https://thepostmansknock.com/wp-content/uploads/2014/05/gallery1.png

I find it curious that the container, .tiled-gallery, is aware of the content width, but it does not use it (notice all the blank space at the right of the page). The images look skewed.

This behavior only occurs if I load the gallery on screens smaller than 768px.

I’m setting the $content_width value using the content_width filter provided by the Genesis framework.

2. My second problem is that Photon is not being used. On small and large screens, the images are being loaded full-size, and then resized by the browser. For example, an img tag has the following src attribute:

https://thepostmansknock.com/wp-content/uploads/2014/02/IMG_0373.jpg?w=440&h=294

The data-orig-size attribute that accompanies the image made me think that this behavior may be caused by a large image. I know that there is a 10 second window for my server (WPEngine, by the way) to upload the images to the WordPress.com servers, so I went and manually replaced all the large images by smaller versions by FTP. It seems that the WordPress servers cached somehow my image, because the data-orig-size attribute did not change, even though the image sizes did.

This issue makes the page load very slow.

I’m using a custom Genesis child theme built by me. For the template used in the page where the gallery is displayed I removed the default loop, and placed the following instead:

global $wp_query;

	// Get the posts in the loop.
	$posts = $wp_query->posts;

	// Count the number of posts.
	$counter = 0;

	$thumbnail_ids = "";
	foreach ( $posts as $post ) {

		// Increase the number of posts.
		$counter++;

		// Get the attachment ID.
		$attachment_id = get_post_thumbnail_id( $post->ID );

		// Store the IDs.
		$thumbnail_ids .= $attachment_id;

		// If not the last attachment, add a comma.
		if ( $counter < count( $posts ) ) {
			$thumbnail_ids .= ",";
		}
	}

	// JetPack masonry gallery shortcode.
	$gallery = '[gallery type="rectangular" link="none" ids="' . $thumbnail_ids . '"]';
	echo do_shortcode( $gallery );

Basically, what I do is loop over all the posts in the current archive loop, get the thumbnail IDs for each post, and then execute the Jetpack gallery shortcode. I have tried using ids and include in the shortcode, neither solved my problems.

I hope my problems are clear, and that you guys are able to help me figure out what is affecting my site.

Thank you! Any feedback is appreciated.

https://www.ads-software.com/plugins/jetpack/