mindkomm / timmy

Advanced image handling for Timber.
MIT License
170 stars 13 forks source link
responsive-images timber wordpress wordpress-library

Timmy

Timmy is an opt-in library/plugin to make it more convenient to work with responsive images. It was designed to be used with Timber, but should work with all your WordPress projects.

In your Twig template, you can do this:

<img{{ post.thumbnail|get_timber_image_responsive('custom-6') }}>

To get this:

<img srcset="https://www.example.org/wp-content/uploads/2016/02/header_example-480x206-c-default.jpg 480w,
    https://www.example.org/wp-content/uploads/2016/02/header_example-768x329-c-default.jpg 768w,
    https://www.example.org/wp-content/uploads/2016/02/header_example-1400x600-c-default.jpg 1400w,
    https://www.example.org/wp-content/uploads/2016/02/header_example-2800x1200-c-default.jpg 2800w"
src="https://github.com/mindkomm/timmy/raw/2.x/data:image/gif;base64,R0lGODlhAQABAAAAADs="
sizes="100vw"
alt="Your alt text"
>

Documentation

Features

Timber already comes with a set of really nice features for handling images. Especially the arbitrary resizing of images is very convenient. Whenever a page is accessed and the image size can’t be found, it will be created on the fly. You can use as many different image sizes as you like, without always having to use plugins like Regenerate Thumbnails when you make a change to the default WordPress image sizes.

Timmy uses Timber’s ImageHelper class to enhance this functionality even more.

Mimicks default WordPress image functionalities

Helps you with image HTML output

Reasonable image generation

Limitations