0

I'm trying to create a related post file with squares images.

In the functions.php I've added the following code:

function my_theme_setup() {
    add_theme_support('post-thumbnails');
    
    // Add Image Sizes  
    add_image_size( 'related-posts', 200, 200, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

In my related-posts.php, I've added the code:

<?php 
$recent_args = array(
    'posts_per_page' => 3, // Number of posts to display
    'orderby'        => 'date',
    'order'          => 'DESC',
);      

$recent_posts = new WP_Query( $recent_args );
 
if ( $recent_posts ->have_posts() ) {
    echo '<ul class="list-unstyled d-flex text-center">';
    while ( $recent_posts->have_posts() ) {
        $recent_posts->the_post(); ?>
            <li class="border col-md-4 d-flex flex-wrap justify-content-center">
                <div class="relatedthumb">
                    <a href="<?php esc_url( the_permalink() )?>" title="<?php the_title(); ?>">
                        <?php if ( has_post_thumbnail() ) : ?>
                            <a href="<?php esc_url( the_permalink() ); ?>" title="<?php the_title_attribute(); ?>">
                                <div class="related-post-thumb">
                                    <?php the_post_thumbnail('related-posts'); ?>
                                </div>
                            </a>
                        <?php endif; ?>
                    </a>
                </div>
                <div class="relatedcontent">
                    <h3>
                        <a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                    </h3>
                </div>        
            </li>
    <?php } 
    echo '</ul>';

    /* Restore original Post Data */
    wp_reset_postdata();
}
?>

For example, I have an original image: 1600 x 1067 pixels. But the hard cropping is not working. The image has the size 200 x 133 px but not 200 x 200 as I expected. To check if the problem is my code I've tried different things like:

 <?php the_post_thumbnail('thumbnail'); ?>

But I got a 150x100px image size.

<?php the_post_thumbnail('medium'); ?>

But I got a 300x200px image size. I also tried to regerate thumbnails via plugins, but nothing works. The /wp-admin > Settings > Media method seems to have no effect on my thumbnails.

I am not sure what I am doing wrong.

enter image description here

16
  • Welcome! As far as I can tell from the documentation on the add_image_size() function, "related-posts" is not a valid input for the first parameter (unless you've defined it elsewhere). I believe "custom-size" is the one you're looking for.
    – YourManDan
    Feb 28, 2023 at 15:14
  • Hi @YourManDan, but what would be the valid input in this case? add_image_size( 'custom-size', 200, 200, true ); ?
    – Mari
    Feb 28, 2023 at 15:19
  • Actually, I think I may have been hasty in commenting, my apologies. Looking it over once more it does follow the documentation. I'll leave it to someone more experience to help you out :)
    – YourManDan
    Feb 28, 2023 at 15:25
  • how are you checking the image dimensions? Are you inspecting the <img> tags dimensions, or the actual image itself when visited directly? It could be that no resizing is taking place, or that the code is set to show the full sized image and CSS is scaling it down to fit the container
    – Tom J Nowell
    Feb 28, 2023 at 15:28
  • @YourManDan no problem!
    – Mari
    Feb 28, 2023 at 15:39

1 Answer 1

1

I found the solution. The problem was not in my code, but in the xampp! The GD extension was missing

1
  • 1
    for future reference this should show up in site health in WP Admin
    – Tom J Nowell
    Feb 28, 2023 at 20:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.