3

I just want to share a quick fix for the Gutenberg gallery since I couldn't find the fix anywhere else. What will fix:

  • Problem: If you upload images to your gallery that have different sizes, the thumbnails are displayed in different heights on each row. Fix: All images will have a squared shape.
  • Problem: When adding 4 photos to a 3 rows Gutenberg Gallery Block, always the 4th picture takes the entire width of the container. Fix: Each image will keep the same width.

Gutenberg Gallery Block 4th row image size issue:

gutenberg gallery image 4th row size issue

Gutenberg Gallery Block same size fix:

gutenberg gallery image 4th row size fix

COS
  • 505
  • 2
  • 4
  • 22

1 Answers1

4

Simple CSS Fix:

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  aspect-ratio: 1; /* squared size thumbnails */ 
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0; /* width fix */ 
}
COS
  • 505
  • 2
  • 4
  • 22
  • I was struggling with max-width calculations for every n-columns use case. Your solution is much more clever and more simple. Thank you for sharing! – Rafiozoo Jun 07 '22 at 12:29
  • Works great but my thumbnails were distorted. Adding object-fit helped: `.wp-block-gallery.has-nested-images figure.wp-block-image img { aspect-ratio: 1; /* squared size thumbnails */ object-fit: cover; }` – user3009320 Nov 04 '22 at 17:40