Images with opposing orientations and the Gallery Block #12258

Activity

1. designsimply

   added

   [Type] EnhancementA suggestion for improvement.A suggestion for improvement.

   Needs TestingNeeds further testing to be confirmed.Needs further testing to be confirmed.

   [Block] GalleryAffects the Gallery Block - used to display groups of imagesAffects the Gallery Block - used to display groups of images

   on Nov 23, 2018
3. youknowriad commented on Oct 2, 2019

   

   youknowriad

   on Oct 2, 2019

   Contributor

   More actions

   Thanks for your suggestion, I wonder if this should be something for an advanced third-party Gallery plugin. Thoughts on this @mapk @jasmussen
4. youknowriad

   removed

   Needs TestingNeeds further testing to be confirmed.Needs further testing to be confirmed.

   on Oct 2, 2019
5. jasmussen commented on Oct 2, 2019

   

   jasmussen

   on Oct 2, 2019

   Contributor

   More actions

   I believe, correct me if I'm wrong, that this is exactly what the Jetpack Tiled Gallery does. Alternately you can try a little custom CSS, I think what's on http://moc.co/2018/02/masonry-galleries-gutenberg/ might work for this.

   I do agree that the un-cropped version of images in the stock gallery is a little uninspired, so I wouldn't be opposed to improving that aspect of the gallery. In your example you'll see that all 3 columns are exactly 33% wide, causing items inside to scale suboptimally.

   In any case it would be somewhat difficult to refactor the gallery block to do this, which means were we to do it it would take some time. For that reason you might want to look into some plugin blocks in the mean time.

   👍React with 👍1Reacted by Mark Uraine
6. mapk commented on Oct 3, 2019

   

   mapk

   on Oct 3, 2019

   Contributor

   More actions

   I agree that the Gallery block without the "crop images" toggle turned on, it looks awkward. In the future, an option to tile the gallery might be a cool style variation, but it would be down the road.

   I'll move this to the future milestone.
7. mapk

   added this to the Future milestone on Oct 3, 2019
8. pfroud commented on Apr 18, 2020

   

   pfroud

   on Apr 18, 2020

   More actions

   +1 for this Gutenberg enhancement. I cooked up some CSS to make the Gallery block work better with images of opposing orientations / aspect ratios:

   /* Manually set the gallery heights depending on how many columns */
   figure.wp-block-gallery.columns-2 figure {
   	height: 300px;
   }
   figure.wp-block-gallery.columns-3 figure {
   	height: 250px;
   }
   figure.wp-block-gallery.columns-4 figure {
   	height: 200px;
   }
   figure.wp-block-gallery.columns-5 figure {
   	height: 150px;
   }
   figure.wp-block-gallery.columns-6 figure {
   	height: 150px;
   }
   
   
   figure.wp-block-gallery ul.blocks-gallery-grid {
   	/* In some cases, makes the images evenly distributed horizontally */
   	width: 100%;
   }
   
   figure.wp-block-gallery figure {
   	/* Vertically center images in container */
   	align-items: center !important;
   }
   
   figure.wp-block-gallery img {
   	/* Make images stay inside container */
   	max-width: 100%;
   	max-height: 100%;
   	
   	/* Horizontally center images in container */
   	margin-left: auto;
   	margin-right: auto;
   }
   

   Joen, the CSS you linked to didn't work for me, but it turns out the Jetpack Tiled Gallery does this very well. However a big plugin seems like a lot just to use the gallery.

   Screenshot of the Jetpack Tiled Gallery:
   

   Screenshot of the Gutenberg Gallery block without custom CSS:
   

   Screenshot of the Gutenberg Gallery block with my custom CSS:
   

    

   Also for comparison, here's a screenshot of the Grid Gallery available in Squarespace:
   

   I tried to copy the Squarespace gallery when doing my CSS.

   The controls let you choose how many columns, like the Gutenberg gallery. However you also choose the aspect ratio for the thumbnails which is weird.
   

   
9. mtias commented on Nov 28, 2025

   

   mtias

   on Nov 28, 2025

   Member

   More actions

   The new aspect ratio controls should allow this to work. Please reopen if there are still cases to address.
10. mtias

    closed this as completedon Nov 28, 2025