[Resolved] Make a thumbnail square with object-fit cover

[Tim]

Hello

In the example page, I’m trying to make a list of thumbnails square, no matter what the source aspect ratio is.

I’m trying to use object-fit: cover; but what should I set the height to, and/or is there something else I need to do?

Thanks

[David]

Hi there,

not easily done especially if you want to maintain a responsive square aspect ratio.

Personally i would look at registering a new cropped thumbnail size that fits your requirements. And then call that thumbnail size – if its for then CC Child Pages – check there documentation i believe you can set which size to use.

[Tim]

Hi David

Wouldn’t this work though ? https://codepen.io/mosbth/pen/KdQzKq

Or something like that to keep it responsive ?

Like changing the width height to be width: 23vw; height: 23vw;

As for registering a new cropped thumbnail size, do you mean following this method:
https://developer.wordpress.org/reference/functions/add_image_size/

Which leads me to wonder, isn’t there already a 1:1 aspect ratio thumbnail generated for Featured Images ?

Are you suggesting that in CC child Pages that I reference a “custom” thumbnail, which is actually a standard wp thumbnail size/crop ?

[David]

Yeah viewport widths (VW) units are the only ‘reliable’ method – they work best when you have a fullwidth page divided into equal squares. But when you have columns with gutters inside a container it can get a bit messy and be mindful that some browsers interpret them differently when zoom is in use.

Yep thats the function. And yes WP has the Thumbnail size which generally is set to 150px but can be amended in Settings > Media.

Looks like CC Supports it:

[child_pages thumbs='large']
https://en-gb.wordpress.org/plugins/cc-child-pages/

[Tim]

Hi David

With CC Child Pages the default is thumbs="medium" and I had also tried large. Yes these are the standard WP sizes, but it appears medium and large are not hard cropped, but thumbnail is hard cropped:

//Default WordPress
the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

So now I have my 1:1 aspect ratio crops using thumbnail. However, the 150px is not going to be large enough. So I guess I could just increase this value and reprocess the images or do as you suggest and register a new image size.

When reading that page https://developer.wordpress.org/reference/functions/add_image_size/ it seems that further comments discuss potential issues and improvements to the code to be employed. Do you already have a best practice snippet of code for adding a new hard cropped image size ?

Should I add like this, or is there an omission or redundant addition ? :

function wpse_setup_theme() {
   add_theme_support( 'post-thumbnails' );
   add_image_size( 'medium-hard-cropped', 300, 300, true );
}
 
add_action( 'after_setup_theme', 'wpse_setup_theme' );

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
 
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'medium-hard-cropped' => __( 'Medium Hard Cropped' ),
    ) );
}

[David]

This article explains how to add them:

https://docs.generatepress.com/article/adding-image-sizes/

So you can simply define your own custom size and call that in the shortcode

[Tim]

Hi David

Thank you for pointing me to that article.

add_action( 'init', function() {
    add_image_size( 'medium-cropped', 300, 300, true ); // 300 width, 300 height, crop
} );

The example is much simpler and worked.

[David]

Glad to be of help

[Author]

Posts