[Resolved] Smaller Featured images not cropping

Home Forums Support Smaller Featured images not cropping

  • This topic has 10 replies, 3 voices, and was last updated 1 year ago by Tom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1004685
    David

    Hello

    I have set the featured images to 500px by 500px which crops them down nicely, but if the client uploads an image smaller than 500px wide, it doesn’t crop the image in archive view, so therefore the alignment is out. See number 310 here…

    https://www.markettownmemorials.co.uk/memorialcategories/cemetery-memorials/

    How can I get it to still resize to 500×500 even if a smaller image is uploaded.

    Thanks
    Dave

    #1004957
    David
    Staff
    Customer Support

    Hi there,

    The issue i am seeing is due to the Aspect Ratio being different, which means they are not cropped square. In the Layout > Blog > Featured Image settings did you set a size for the Archives?

    #1004965
    David

    Hi David

    I’ve got that set to 500px by 500px…

    https://ibb.co/y864WBj

    Which works fine unless you upload a featured image that is smaller than 500px wide on upload.

    Any ideas how to make it still crop to 500×500?

    Thanks
    Dave

    #1004975
    David
    Staff
    Customer Support

    You can force the images to a set height using this CSS and object-fit cover to stop then from distorting:

    .generate-columns-container .post-image img {
        max-height: 245px;
        object-fit: cover;
    }

    245px makes them all the same size. But your sizes are varied, as you can tell when you reduce the browser down to tablet – you’ll notice item 319 over fills the container. So you may need to add a media query version for the above. Or reduce your image sizes down.

    #1004997
    David

    That works well on desktop. Best thing seems to be to go down to 3 columns on tablet.

    I’ve changed the below code <div class="grid-25 tablet-grid-33 mobile-grid-50 spacer-bottom-20"> on the archive-memorials.php page but doesn’t seem to change it. Am I doing something wrong?

    <?php
    /**
     * The template for displaying Archive pages.
     *
     * @package GeneratePress
     */
    
    if ( ! defined( 'ABSPATH' ) ) {
    	exit; // Exit if accessed directly.
    }
    
    get_header(); ?>
    
    <div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
    <main id="main" <?php generate_do_element_classes( 'main' ); ?>>
    <?php
    // Get the taxonomy's terms
    $terms = get_terms(
    array(
    'taxonomy'   => 'memorialcategories',
    'hide_empty' => false,
    )
    );
    
    // Check if any term exists
    if ( ! empty( $terms ) && is_array( $terms ) ) {
    // Run a loop and print them all
    foreach ( $terms as $term ) { 
       
       // print_r($term); 
      
        $prefix = "memorialcategories";
        $term_with_prefix = $prefix."_".$term->term_taxonomy_id;
        $cat_image = get_field("category_image",$term_with_prefix);
        
        //echo "<pre>";
        //print_r($cat_image); exit;
        
        ?>
    <div class="grid-25 tablet-grid-33 mobile-grid-50 spacer-bottom-20">
        <a href="<?php echo esc_url( get_term_link( $term ) ) ?>"><img class="attachment-featured_image" src="<?php if($cat_image){ echo $cat_image['url']; } ?>" alt="<?php  echo $cat_image['original_image']['alt'];  ?>"><span class="taxonomy-title">
    <?php echo $term->name; ?></span>
    </a></div><?php
        }
    } 
    ?>
    </main><!-- #main -->
    </div><!-- #primary -->
    
    	<?php
    	/**
    	 * generate_after_primary_content_area hook.
    	 *
    	 * @since 2.0
    	 */
    	do_action( 'generate_after_primary_content_area' );
    
    get_footer();
    
    #1005037
    David
    #1005251
    Tom
    Lead Developer
    Lead Developer

    The resizer won’t work for images smaller than the destination size. If it did, the image would look super bad.

    David’s method is great. You can use media queries to adjust the height depending on the screen size.

    #1005433
    David

    Thanks both – any ideas how I can go to 3 columns on tablet though on this page…

    https://www.markettownmemorials.co.uk/memorialcategories/cemetery-memorials/

    #1005981
    Tom
    Lead Developer
    Lead Developer

    You could try this:

    add_filter( 'post_class', function( $classes ) {
        if ( is_tax( 'memorialcategories' ) ) {
            $classes = array_diff( $classes, array( 'tablet-grid-50' ) );
        }
    
        $classes[] = 'tablet-grid-33';
    
        return $classes;
    } );

    Let me know 🙂

    #1006461
    David

    Thanks Tom, I’ve added that plus also added this to the css and it’s now in 3 columns

    .generate-columns-container .grid-sizer,.generate-columns-container article {width: 33%;}
    .generate-columns-container .post-image img {max-height: 230px;object-fit: cover;}
    #1006941
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.