[Resolved] Smaller Featured images not cropping

[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

[David]

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?

[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

[David]

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.

[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();

[David]

That code is for this page…

https://www.markettownmemorials.co.uk/memorials/

Does change the layout of this one though…

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

[Tom]

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.

[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/

[Tom]

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 🙂

[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;}

[Tom]

Awesome 🙂

[Author]

Posts