Adding image sizes

Using different image sizes is pretty important. This allows us to serve smaller images to phones, and larger images to retina MacBooks.

Adding image sizes

• Go to Grrr\Theme\Setup
• Add new add_image_size entry next to the existing ones

Template defaults

By default, we're using 5 sizes in cropped (16:9) and uncropped formats:

add_image_size('image--tiny', 640, 0, false);
add_image_size('image--small', 960, 0, false);
add_image_size('image--medium', 1280, 0, false);
add_image_size('image--large', 1920, 0, false);
add_image_size('image--huge', 2560, 0, false);

add_image_size('image-cropped--tiny', 640, 360, true);
add_image_size('image-cropped--small', 960, 540, true);
add_image_size('image-cropped--medium', 1280, 720, true);
add_image_size('image-cropped--large', 1920, 1280, true);
add_image_size('image-cropped--huge', 2560, 1440, true);

Usage in templates

In templates you can define the default fallback size for the src and srcset attributes. The latter will be filled with a automatically generated srcset.

<img
    src="{{ image.src('image--tiny') }}"
    srcset="{{ image.srcset('image--tiny') }}"
    sizes="(min-width: 530px) 530px, 100vw"
    alt="{{ image.alt }}"/>

Note: don't forget to specify the sizes attribute. Forgetting this might render the srcset attribute useless, resulting in larger images than needed being downloaded!

Scaling/cropping on the fly

It's possible to scale/crop images on the fly in templates, via the resize filter. Note that is not always possible due to caching or serving you pages statically. Performance issues are also to be considered.

Usage with Timber

• See the Timber\Image and Timber\ImageHelper documentations for more options
• See the Image Cookbook for some usage examples