README

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.

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 artemdanilow@gmail.com

License

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