← All posts

Dynamic Image Resize in WordPress with FanCoolo WP

fancoolo

WordPress creates several resized copies of every image you upload, and most of them are never used. In this short video we show FanCoolo WP's dynamic image resize function. You turn off the default WordPress image sizes, and FanCoolo generates only the exact pixel size your block asks for, at the moment the block uses the image. You store fewer files on the server, and the page loads an image cut to the size it displays.

Step 1: Set every default image size to zero

  1. Go to Settings → Media in WP Admin.
  2. Under Image sizes, set Thumbnail size Width and Height to 0.
  3. Set Medium size Max Width and Max Height to 0.
  4. Set Large size Max Width and Max Height to 0.
  5. Click Save Changes.

Now WordPress doesn't create extra sizes on upload. The uploads folder only holds the original files.

Step 2: Request the exact size inside your block

In FanCoolo WP, we opened a block called Hero Image that has an image attribute named heroImage. In the block's Content tab, fancoolo_dynamic_image_resize() takes the image ID, a width, a height and a crop flag, and returns the URL of the resized file:

<?php

// Add attribute "image" and name it "Hero Image"

$image_id = $attributes['heroImage']['id'] ?? null;

if ($image_id) :
    // Get image data
    $image_data = fancoolo_get_image_data($image_id);

    // Generate custom size
    $hero_url = fancoolo_dynamic_image_resize($image_id, 1200, 900, true);
    ?>

    <figure <?php echo get_block_wrapper_attributes(); ?>>
        <img
            src="<?php echo esc_url($hero_url); ?>"
            alt="<?php echo esc_attr($image_data['alt']); ?>"
            width="1200"
            height="900"
        />
        <?php if ($image_data['caption']) : ?>
            <figcaption><?php echo esc_html($image_data['caption']); ?></figcaption>
        <?php endif; ?>
    </figure>

<?php endif; ?>

fancoolo_get_image_data() returns the image's alt text and caption, so the markup stays accessible.

Step 3: Add the image and check the uploads folder

  1. Add the Hero Image block to a page. Nothing new appears in the uploads folder yet.
  2. In the block settings, pick an image (we used a mushroom photo).
  3. Check the uploads folder again. There is now exactly one new file, named after the requested size: …-w1200-h900-crop.jpg.

If your design needs a thumbnail, a card image or any other specific size, register that size in the block. FanCoolo creates it only when a block actually uses the image. You don't keep unused copies, and each image is served at the exact pixel size your layout needs.

Let us know in the comments if you want more helper functions like this in FanCoolo.

Get FanCoolo WP → dplugins.com

Related posts