PHPackages                             makinacorpus/drupal-iresponsive - 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. makinacorpus/drupal-iresponsive

ActiveDrupal-module[Image & Media](/categories/media)

makinacorpus/drupal-iresponsive
===============================

Image field formatter and theme functions for rendering responsive images using image styles

1.0.1(10y ago)1791GPL-2PHP

Since May 24Pushed 9y ago7 watchersCompare

[ Source](https://github.com/makinacorpus/drupal-iresponsive)[ Packagist](https://packagist.org/packages/makinacorpus/drupal-iresponsive)[ Docs](http://github.com/makinacorpus/drupal-iresponsive)[ RSS](/packages/makinacorpus-drupal-iresponsive/feed)WikiDiscussions master Synced 4w ago

READMEChangelog (2)DependenciesVersions (3)Used By (0)

Responsive image formatter for Drupal
=====================================

[](#responsive-image-formatter-for-drupal)

This module brings theme functions and a field formatter to display responsive images. It supports two different HTML tags:

- **<IMG>** tag using *srcsrc* attribute;
- **<PICTURE>** tag using *<SOURCE>* elements.

The <IMG> tag supports the *sizes* attribute allowing to set a relative viewport sizes for images at the field display configuration level, allowing the browser to proceed with better image selection for download.

This modules won't allow you to provide your own image styles, it only provides two different modes:

- Image keeps the original image ratio;
- Square image.

Future plans is to support more complex image styles (maybe by merging this module own styles using a user provided one).

This ships the [Picturefill 2.0](https://scottjehl.github.io/picturefill/)polyfill to ensure graceful downgrade for old browsers.

Installation
------------

[](#installation)

Just download and enable the module.

Confguration
------------

[](#confguration)

You may want to override available sizes for images, default is:

`[285, 570, 855, 1140, 1440]`

In order to override it, just add in your settings.php file:

```
$conf['iresponsive_image_size_list'] = [200, 300, 500, 1400, ...];
```

Usage
-----

[](#usage)

### For image fields

[](#for-image-fields)

Select *Responsive image* as display formatter, quite straightforward ?

### Displaying manually an image

[](#displaying-manually-an-image)

Use one of `ireponsive_img` or `iresponsive_picture` theme hooks and proceed this way with render arrays:

```
// Considering that $file is loaded file_managed.
$build['my_image'] = [
  '#theme'        => 'iresponsive_picture',
  '#image_uri'    => $file->uri,
  '#image_width'  => $file->width,
  '#image_height' => $file->height,
  '#image_alt'    => t("Some alternative text"),
  '#image_title'  => t("Some HTML title tag"),
  // Note that 'w' is the default, and keeps ratio while 's' is for square.
  '#modifier'     => 'w',
  // Default size must exist in iresponsive_image_size_list() function defaults
  // the 'iresponsive_image_size_list' variable if you overrided it.
  '#default_size' => $settings['default_size'],
  // If you set to true, this will include the original image, but without
  // any transformation (no square, etc...) in the image sources.
  '#include_full' => false,
  // Targetted image size in viewport percent (aka 'vh' unit in CSS).
  '#viewport'     => 50,
];
```

Or if you write Drupal 6 old school code (but you should never do this):

```
// Considering that $file is loaded file_managed.
theme(''iresponsive_picture', [
  'image_uri'    => $file->uri,
  'image_width'  => $file->width,
  'image_height' => $file->height,
  'image_alt'    => t("Some alternative text"),
  'image_title'  => t("Some HTML title tag"),
  // Note that 'w' is the default, and keeps ratio while 's' is for square.
  'modifier'     => 'w',
  // Default size must exist in iresponsive_image_size_list() function defaults
  // the 'iresponsive_image_size_list' variable if you overrided it.
  'default_size' => $settings['default_size'],
  // If you set to true, this will include the original image, but without
  // any transformation (no square, etc...) in the image sources.
  'include_full' => false,
  // Targetted image size in viewport percent (aka 'vh' unit in CSS).
  'viewport'     => 50,
]);
```

###  Health Score

30

—

LowBetter than 62% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 75% 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 ~30 days

Total

2

Last Release

3659d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/69252826f3a70a19fc5dcefb7ef9d26d465bb300245641abb4dd89d0ec391a66?d=identicon)[pounard](/maintainers/pounard)

![](https://www.gravatar.com/avatar/d21b98752b406528da88850922b1061f39bf72eb2126b413d5c12e275811a40b?d=identicon)[Makina Corpus](/maintainers/Makina%20Corpus)

---

Top Contributors

[![pounard](https://avatars.githubusercontent.com/u/341855?v=4)](https://github.com/pounard "pounard (6 commits)")[![SebCorbin](https://avatars.githubusercontent.com/u/645207?v=4)](https://github.com/SebCorbin "SebCorbin (2 commits)")

### Embed Badge

![Health badge](/badges/makinacorpus-drupal-iresponsive/health.svg)

```
[![Health](https://phpackages.com/badges/makinacorpus-drupal-iresponsive/health.svg)](https://phpackages.com/packages/makinacorpus-drupal-iresponsive)
```

###  Alternatives

[goat1000/svggraph

Generates SVG graphs

133890.0k3](/packages/goat1000-svggraph)[imagekit/imagekit

PHP library for Imagekit

46877.3k10](/packages/imagekit-imagekit)[gravatarphp/gravatar

Gravatar URL builder which is most commonly called as a Gravatar library

12644.1k2](/packages/gravatarphp-gravatar)

PHPackages © 2026

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