How to resize an Image from a Theme folder with Twig/Timber in Wordpress

Question

I am having great difficulties getting an image resized using Twig/Timber in Wordpress, here is my code - is there something I am missing?

<img src="{{ theme.path ~ '/images/dog.jpg' | resize(250) }}"> it just outputs wordpress.local/wp-content/themes/custom-theme/images/dog.jpg instead of wordpress.local/wp-content/themes/custom-theme/images/dog-250x0.jpg

Any suggestions appreciated!

Answer 1

Your image doesn't part of WordPress theme, I mean, it is but it's not been handled by WordPress Media Library using wp_handle_upload or similar approach.

Timber documentation says

All of these filters [* - resize, letterbox] are written specifically to interact with WordPress’s image API. So don’t worry, no weird TimThumb stuff going on—this is all using WordPress’s internal image sizing stuff.

That mean your images need to be uploaded by WordPress itself with all picture metadata - not just present inside your theme or even uploads directory.