1:1 aspect ratio featured images

Hi @adrean –

Is there a way to set a parameter for every featured image to be shown square?

Not currently, but it’s coming in a future update of the editor, see:

https://github.com/WordPress/gutenberg/issues/47274

https://github.com/WordPress/gutenberg/pull/47854

https://github.com/WordPress/gutenberg/issues/47963

Since this feature is not yet available, a workaround could be to add some custom CSS. If you’re interested in that approach and need a hand with it, please provide a link to your site’s page with the post grid so I can take a peek directly.

Thanks a lot @zoonini

Amazing to hear that the feature will be implemented. Great.

I also would really like to try css until then, but my website is in maintainance mode, so it can sadly not be accessed from outside.

Could i provide any other information that would lead to working code?

Otherwise i will find a work around until the upcoming feature will roll out.

Thanks a lot. Already very helpful.

You’re welcome!

On my test site with a three-column grid in the Query Loop, the following CSS mostly does the trick. (They still may not be perfect squares at every screen size.) Normally we want to avoid using !important in custom CSS, but it’s needed here to override everything that needs to be overridden.

/* Query Loop - Featured Images */
.wp-block-query .wp-block-post-featured-image img {
  height: 200px !important;
  width: 200px !important;
}

While the Customizer is not exposed by default when using Site Editing, you can still access it manually by adding /wp-admin/customize.php after your URL. You can then add custom CSS in the Additional CSS area.

Thanks a lot again.

The code works on desktop, but not so much on mobile. There the Feed is offset.

But no problem. I was now able to tweek the featured image size settings in the editor with a mix of something like “200 px hight” and “100% width” or so. Now they are not square, but still useable and responsive, until the update is coming.

Thanks a lot for your effort. Have a great day.

Hi @adrean – yep, the CSS option is definitely not perfect on mobile, but I’m glad you came up with a workaround you’re satisfied with for now!

Hello, I neet to define a fixed ration for the featured images too, but I’ve added the code in the css field and it doesn’t work

@ictgo please go ahead and start your own thread in your theme’s forum and provide a link your site so folks can help you more easily. Thanks!