How to auto add width and height for external images in GenerateBlocks

  • Suman
    March 24, 2026 at 5:43 am

    Hi,

    When I add images from the Media Library in GenerateBlocks, the original width and height are automatically applied inline, which helps avoid CLS issues in PageSpeed.

    However, when I add external images via URL (e.g., Amazon images), the width and height are not added automatically.

    Is there any built-in way in GenerateBlocks (or GeneratePress) to automatically fetch and apply width/height for external images?
    If not, what’s the recommended approach to handle this properly for CLS?

  • George
    March 24, 2026 at 5:50 am

    Hi Suman,

    There’s no built-in way in GenerateBlocks or GeneratePress to automatically fetch dimensions for external images. When you use the Media Library, WordPress already has that metadata stored from the upload — but for external URLs, that information simply isn’t available to GB at render time.

    The most straightforward approach is to set the dimensions manually in the block’s sizing controls. If you don’t know the exact dimensions, you can right-click the image in your browser, inspect it, and grab the natural width/height from there.

    Alternatively, if you know the general aspect ratio of the images (Amazon product images are often close to 1:1), you can add an aspect-ratio rule via CSS to the image. That reserves the correct space in the layout and prevents CLS without needing exact pixel values:

    .your-image-class img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}

    Adjust the ratio to match your images.

    Those values can also be inserted from the block editor in GB.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.