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

Home Forums Support Make a thumbnail square with object-fit cover

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1239678
    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

    #1239728
    David
    Staff
    Customer Support

    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.

    #1239767
    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 ?

    #1239818
    David
    Staff
    Customer Support

    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/

    #1240871
    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' ),
        ) );
    }
    #1241364
    David
    Staff
    Customer Support

    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

    #1242324
    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.

    #1242610
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.