Reading list Switch to dark mode

    Generating multiple image sizes in wordPress

    Updated 3 April 2024

    Hello everyone today we will discuss about generating multiple image sizes for a single uploaded image. But now the question is why do someone need more than one image size for a single uploaded image. It is very obvious that nowadays wordPress theme developers or designers are dealing with different kind of layouts where a single image is presented in different ways. like for eg. may be in post page the blog image is a small one and in single page the same image is large in size. You can check Uvdesk Blog as an example where we have used same image with different sizes.

    Let’s start with writing the code :-

    <?php 
     add_theme_support( 'post-thumbnails' ); // support of post thumbnails 
    ?>

    You have to

    now for adding multiple image sizes use below function provided by wordpress

    <?php
    add_image_size( 'author-page-thumbnail', 140, 140, true ); // Hard Crop Mode
    add_image_size( 'post-page-thumbnail', 240, 280 ); // Soft Crop Mode
    add_image_size( 'single-page-thumbnail', 600, 9999 ); // Unlimited Height Mode
    ?>

    please look at the comments specified three different sort of image sizes.tree different images with different modes such as hard crop, soft crop, and unlimited height.

    Searching for an experienced
    WordPress Company ?
    Find out More

    Hard Crop:- It tells wordPress that to crop the image to the size that we have defined. it is basically used when you want every image of same proportion or size

    Soft Crop :- By Default this option is on for wordPress. According to this option image is resized and disortion of any imge is removed . it basically updates the width and height of the image is changed according to proportion with the width.

    Height Infinity :-  In this option The width of the image is changed but the height remains what it was orignally there will be no changes in what so ever the width changes.

    Now the last question is how to use these various sizes of images on different pages . Here is the code below

    <?php 
     the_post_thumbnail( 'your-specified-image-size' ); 
    ?>

    use this method in post page or author page or single page with the specified image size name.

    Once you have done this process and someone uploads an image for a blog then that image will automatically gene

    That’s all for Generating multiple image sizes in wordPress, still have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    1 comments

  • Varun Vashistha
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home