0

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?

  • If 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 – Guillermo Carone Jul 19 '18 at 10:38
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/

| improve this answer | |
0

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;">

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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