Why do the images only display in original size, not my custom size?

Question

I have few images on my theme library. These images have various sizes (640x480, 275x183 and 1920x1200). These images are part of the Theme Unit Test data that you can use to test your theme.

Now, I am building a slider using slick.js and I use Advanced Custom Fields gallery to get the images for this slider. Then I have the following code to display the slider on the front end:

<?php
    $images = get_field('gallery_post_format_slider');
    if ( $images ) : ?>
        <div class="slick-post-gallery">
            <?php foreach ( $images as $image ) : ?>
                <div>
                    <img src="<?php echo $image['sizes']['post-medium']; ?>" width="<?php echo $image['sizes']['post-medium-width'] ?>" heigth="<?php echo $image['sizes']['post-medium-height'] ?>" alt="<?php echo $image['alt']; ?>">
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

The problem I am having is I can't seem to be able to make WordPress use my custom image size (post-medium) for the images. I don't understand why it doesn't show the images with the post-medium sizes. The images show with their original sizes not with my custom size. Am I missing something here?

Answer 1

The reason is Wordpress makes different sizes of images(i.e thumbnail,medium,large & full) when you upload the image.

If image is already uploaded and after that you declare the new size then that image size is not going to be there.

So you can solve this by two ways

1. you need to regenerate the thumbnails using some plugin like Regenerate Thumbnails
2. Upload the image again

All the best