How to show scaled featured image in template?

Question

I need to show the post featured image at the desired position on my theme template. At the same time, I need its width to be 300px and the height- adaptive.

What code should I add to my template?

Answer 1

You can create custom size image with add_image_size() in the functions.php

function add_custom_size_images() {
    // Add image size width 300 with unlimited height.
    add_image_size( 'featured-image-300', 300 );
}
add_action( 'after_setup_theme', 'add_custom_size_images' );

And in the template to get the size that you created with the_post_thumbnail()

the_post_thumbnail( 'featured-image-300' );

Notice: If you want it to work with the old images that you uploaded already you need to regenarate the thumbnails. There are some plugins for this.

Plugin for example https://wordpress.org/plugins/regenerate-thumbnails/

Answer 2

f you want the width of the image to be fixed and the height to change you should look into creating a div and adding your image as a cover in the background, otherwise you will be deforming your image.

Here is the code. You can also see it working here https://codepen.io/guillermo-carone/pen/zLKQON

<style>
.post_snap {
    width: 300px;
    height: 75vh;
}
</style>

<div class="post_snap" style="background: url(http://mirlostudio.com/mission-3/wp-content/uploads/sites/28/2016/07/Look-Up-Architecture-17.jpg) no-repeat center; background-size: cover;">