Question 29981 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Displaying a custom image size in wordpress

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 class="one-third">
    <?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 class="one-third">
      <?php the_post_thumbnail('thumbnail'); ?>
    </div>

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 class="one-third">
        <?php the_post_thumbnail('medium'); ?>
     </div>
    1. Go to your WordPress dashboard and log in.
    2. Select Media in the Settings menu. Change the width and height dimensions in Media Settings to fit your needs.
    3. 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 class="bg-image">
  <img src="https://mdbcdn.b-cdn.net/img/new/standard/city/053.webp" class="w-100" />
  <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search