Flexipic

Addon by Artem Danilov

Flexipic Main Screenshot

Generate responsive images with placeholders and lazy loading on the fly

Flexipic Statamic Addon

Overview

Flexipic is a Statamic addon designed to effortlessly generate responsive images on-the-fly using Glide and integrate them seamlessly into your Statamic projects using the picture tag.

Installation

Require it using Composer.

composer require artemdanilov/flexipic

After installation, Flexipic will create config/statamic/flexipic.php file.

Usage

To enable Flexipic and generate responsive images, simply insert the following line of code wherever you intend to display an image:

{{ flexipic :src="assets" }}

or

{{ flexipic src="url_to_image" }}

It will generate a <picture> tag with <source> and <img> tags inside.

In example above, images are generated based on parameters from the config file. These parameters are necessary for global usage. However, you are free to rewrite these parameters directly in your tag:

{{ flexipic
    :src="image"
    :width="[320, 640]"
}}

In the example above, the tag will generate two images with widths of 320px and 640px respectively. As you may notice, we do not specify a height property, as the height is calculated automatically based on meta tags. If you want to set another height for your image, feel free to do so:

{{ flexipic
    :src="image"
    :width="[320, 640]"
    height="400"
}}

The tag will set a height of 400px for the first value from the width array and calculate the height for the second value.

Of course, there are more parameters you can use inside.

! If your image URL is from an external source, you need to specify a height. !

Available parameters

Flexipic supports various parameters that you can include in your tag, each of which will be generated as HTML attributes. However, certain parameters are excluded from generating attributes, like quality, fit or placeholder.

Parameters Values description
src url or path Specifies the source URL or path of the image
width [480, 768, 1024, ...] Specifies the width(s) of the image in pixels
height number Specifies the height of the image in pixels
sizes (max-width: 320px) 480px, 768px Specifies the sizes of the image in a responsive context
quality 0-100 Specifies the image quality, which affects file size and compression level
fit contain, max, fill, fill-max, stretch, crop, crop-focal Sets how the image is fitted to its target dimensions
loading eager or lazy Specifies whether the image should be loaded immediately (eager) or lazily (lazy).
placeholder "blur", "false" or your custom value Specifies whether a placeholder should be generated for lazy loading purposes
class string of classes Specifies additional CSS classes to apply to the image element.
wrapper_class string of classes Specifies additional CSS classes to apply to the picture element.

Lazyloading

If you set loading and placeholder parameters for smooth lazyload effect, you should to pass a JS function to your resources/js/site.js file

import flexipicLazyload from '../../vendor/artemdanilov/flexipic/dist/flexipicLazyload.min';

window.addEventListener('DOMContentLoaded', () => {
    flexipicLazyload('.flexipic');
})

Support

If you encounter any issues or have questions about using Flexipic, please don't hesitate to reach out to me [email protected]

License

Flexipic is licensed under the MIT License. Feel free to use, modify, and distribute it according to your needs.