PHPackages                             artemdanilov/flexipic - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. artemdanilov/flexipic

ActiveLibrary[Image & Media](/categories/media)

artemdanilov/flexipic
=====================

Statamic addon for generating responsive images

v1.1.1(1y ago)0472MITPHPPHP ^8.0

Since Apr 23Pushed 1y ago1 watchersCompare

[ Source](https://github.com/ArtemDanilov/flexipic)[ Packagist](https://packagist.org/packages/artemdanilov/flexipic)[ RSS](/packages/artemdanilov-flexipic/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (2)Versions (5)Used By (0)

Flexipic Statamic Addon
-----------------------

[](#flexipic-statamic-addon)

### Overview

[](#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

[](#installation)

Require it using Composer.

```
composer require artemdanilov/flexipic

```

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

### Usage

[](#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 `` tag with `` and `` 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

[](#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`.

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

[](#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

[](#support)

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

### License

[](#license)

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

###  Health Score

29

—

LowBetter than 60% of packages

Maintenance34

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~24 days

Total

4

Last Release

674d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/3f3923e7af8a80953c928e7121e238bc2740d38e1669b02a516d26883dd575b0?d=identicon)[ArtemDanilov](/maintainers/ArtemDanilov)

---

Top Contributors

[![ArtemDanilov](https://avatars.githubusercontent.com/u/36746496?v=4)](https://github.com/ArtemDanilov "ArtemDanilov (24 commits)")

### Embed Badge

![Health badge](/badges/artemdanilov-flexipic/health.svg)

```
[![Health](https://phpackages.com/badges/artemdanilov-flexipic/health.svg)](https://phpackages.com/packages/artemdanilov-flexipic)
```

###  Alternatives

[statamic-rad-pack/runway

Eloquently manage your database models in Statamic.

135192.6k5](/packages/statamic-rad-pack-runway)[justbetter/statamic-image-optimize

Image optimization after upload

1315.2k](/packages/justbetter-statamic-image-optimize)[visuellverstehen/statamic-picturesque

A Statamic tag for building HTML-only responsive images.

1016.9k](/packages/visuellverstehen-statamic-picturesque)[daun/statamic-placeholders

Generate low-quality image placeholders for lazyloading Statamic assets

106.6k](/packages/daun-statamic-placeholders)[daun/statamic-mux

Seamless video encoding and streaming using Mux on Statamic sites

132.3k](/packages/daun-statamic-mux)[alt-design/alt-sitemap

Alt Sitemap addon, create a sitemap from Statamic entries

1219.0k](/packages/alt-design-alt-sitemap)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)