Displaying a custom image size in wordpress-CodePudding

In functions.php i have,

function university_features() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_image_size('professorLandscape', 400, 260, true);
add_image_size('professorPortrait', 480, 650, true);
add_image_size('pageBanner', 1500, 350, true);
}
add_action('after_setup_theme', 'university_features');

In single-professor.php, I have:

<div >
    <?php the_post_thumbnail('professorPotrait'); ?>
 </div>

But the image size doesn't change. But, if I put the default size of "thumbnail" or any of the others like this:

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

it works. What could be the issue? I'm working on localhost.

CodePudding user response：

I have checked your code and it seems everything is working perfectly. I think what you missed that after setting the new image sizes you did not regenerate those images. You can try to upload a new image and check; make sure you have uploaded a large size more than 480px X 650px for checking purpose, because WordPress will crop a image if you upload larger than that. For existing images which you have already uploaded in the admin panel you can use a third party plugin like "Regenerate Thumbnails", I have checked with this plugin, you can try this if you want. Hope it will work.

CodePudding user response：

Try to edit the default image sizes in the admin panel

And instead of the post_thumbnail custom class added .

use the default ones and edit them in the wordpress admin panel

The default values for wordpress images are

Thumbnail size (150 x 150 pixels)
Medium size (maximum 300 x 300 pixels)
Large size (maximum 1024 x 1024 pixels)
Full size (the original size of the uploaded image)

According to https://enginescout.com.au/wordpress-image-sizes/

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

Go to your WordPress dashboard and log in.
Select Media in the Settings menu. Change the width and height dimensions in Media Settings to fit your needs.
Confirm your changes by clicking Save Changes.

Checkout this example by visual composer https://visualcomposer.com/blog/wordpress-image-sizes-guide/#changing-wordpress-default-image-sizes

Another possible solution would be You can add a mask for the posts themselves so the image itself will be locked to a certain width and height of the mask for example 100vh and 100vw

Checkout the example in Material Design bootstrap5 you can apply the same thing by utilizing their styling in your theme or recreate another like it https://mdbootstrap.com/docs/standard/content-styles/masks/

Code example

<div >
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp"  />
  <div  style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>