Ollie Theme Academy

Creating Performant Themes

Replacing legacy image URLs on the fly

Legacy content often contains images sized for old layout dimensions. Rather than manually updating every image, use the render_block hook to automatically upgrade image URLs during page rendering.

Target specific block types (like image blocks) and post types to avoid unnecessary processing. Check block attributes for image IDs and size classes to identify images that need updating.

Use WordPress’s HTML Tag Processor class for safe HTML manipulation instead of fragile string replacement or regex approaches. This provides reliable parsing and modification of block content.

Replace old image URLs with new sizes using wp_get_attachment_image_url() and return the modified block content. This on-the-fly approach updates content without touching the database, maintaining original content integrity while improving performance.

Back to: Ollie Theme Academy > Creating Performant Themes