Swapped out Flynt's resizeDynamic() filter for Timber's resize()

[shrinkray]

Hey y'all, I just want to shoutout the Flynt team, this has been a terrific platform to build with, but yesterday I hit a snag. This is meant to share my findings.

Recently I upgraded Timber 2.1 to 2.3. Shortly after that I noticed all the image-based components I was building were not showing their images.

• resizeDynamic was a custom Flynt wrapper around Timber's image resizing
• It relied on ImageHelper::resize() which was deprecated in Timber 2.0+
• Timber's native |resize() filter is the official, supported method in Timber 2.x
• The native approach is reliable, and will be maintained

I was wondering if anyone else might have stumbled across this. I documented these migration steps for myself and will share them here.

The Readme docs for the current version of FlyntWP appears to document resizeDynamic() wrapper. Please consider moving to this alternative method.

Migration Steps

1. Basic Image Resize

Before:

{{ post.thumbnail.src|resizeDynamic(768, 512) }}

After:

{{ post.thumbnail.src|resize(768, 512) }}

2. With Crop Position

Before:

{{ image.src|resizeDynamic(1920, 1080, 'center') }}

After:

{{ image.src|resize(1920, 1080, 'center') }}

3. Responsive Srcsets

Before:

<img 
  src="{{ image.src|resizeDynamic(768, 512) }}"
  srcset="{{ placeholderImage(768, 512) }}"
  data-srcset="
    {{ image.src|resizeDynamic(1920, 1280) }} 1920w,
    {{ image.src|resizeDynamic(1600, 1066) }} 1600w,
    {{ image.src|resizeDynamic(1440, 960) }} 1440w,
    {{ image.src|resizeDynamic(768, 512) }} 768w"
  data-sizes="auto">

After:

<img 
  src="{{ image.src|resize(768, 512) }}"
  srcset="{{ placeholderImage(768, 512) }}"
  data-srcset="
    {{ image.src|resize(1920, 1280) }} 1920w,
    {{ image.src|resize(1600, 1066) }} 1600w,
    {{ image.src|resize(1440, 960) }} 1440w,
    {{ image.src|resize(768, 512) }} 768w"
  data-sizes="auto">

4. Using Timber's Built-in Srcset (Recommended)

For even better performance, let Timber generate the srcset automatically:

{# In functions.php, ensure images are Timber objects #}
$data['image'] = Timber::get_image($imageId);

{# In Twig template #}
<img 
  src="{{ image.src|resize(768, 512) }}"
  srcset="{{ image.srcset }}"
  sizes="(max-width: 768px) 100vw, 768px"
  alt="{{ image.alt }}">

WordPress Method vs Timber Method

❌ WordPress Hybrid (Avoid)

// In functions.php
$timberImage = Timber::get_image($imageId);
$timberImage->srcset = wp_get_attachment_image_srcset($imageId, 'full');

Issues:

• Mixing WordPress and Timber approaches
• Less consistent with theme architecture
• More complex to maintain

✅ Pure Timber (Recommended)

// In functions.php
$data['image'] = Timber::get_image($imageId);

{# In Twig template - Timber handles everything #}
<img 
  src="{{ image.src|resize(800) }}"
  srcset="{{ image.srcset }}"
  alt="{{ image.alt }}">

Benefits:

• Consistent Timber approach throughout theme
• Simpler code
• Timber automatically generates appropriate srcsets
• Better performance and caching

Filter Parameters

Both filters accept the same parameters:

|resize(width, height, crop)

• width (int): Target width in pixels
• height (int, optional): Target height in pixels (0 = auto)
• crop (string, optional): Crop position ('default', 'center', 'top', 'bottom', 'left', 'right')

Examples

{# Width only (height auto) #}
{{ image.src|resize(1920) }}

{# Width and height #}
{{ image.src|resize(1920, 1080) }}

{# With crop position #}
{{ image.src|resize(1920, 1080, 'center') }}

{# Calculated dimensions #}
{{ image.src|resize(768, (768 / 3 * 2)|round, 'center') }}

Quick Reference Card

Task	Old Way	New Way
Resize by width	|resizeDynamic(1920)	|resize(1920)
Resize with height	|resizeDynamic(1920, 1080)	|resize(1920, 1080)
Resize with crop	|resizeDynamic(1920, 1080, 'center')	|resize(1920, 1080, 'center')
Get srcset	wp_get_attachment_image_srcset()	{{ image.srcset }}

Additional Resources

• Timber Image Documentation
• Timber 2.0 Upgrade Guide
• Timber ImageHelper Reference