PHPackages                             netgen/ngresponsiveimages - 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. [Utility & Helpers](/categories/utility)
4. /
5. netgen/ngresponsiveimages

AbandonedArchivedEzpublish-legacy-extension[Utility & Helpers](/categories/utility)

netgen/ngresponsiveimages
=========================

eZ Publish 4 extension that eases creation and usage of responsive images by leveraging eZ Publish image aliases

2.1.1(12y ago)6285GPL-2.0JavaScript

Since Oct 3Pushed 10y ago6 watchersCompare

[ Source](https://github.com/netgen/ngresponsiveimages)[ Packagist](https://packagist.org/packages/netgen/ngresponsiveimages)[ RSS](/packages/netgen-ngresponsiveimages/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependencies (1)Versions (5)Used By (0)

Netgen Responsive Images
========================

[](#netgen-responsive-images)

This extension uses [`picturefill.js`](https://github.com/scottjehl/picturefill) v1.2.0 as a base for loading different image sizes.

---

Usage 1st case:
---------------

[](#usage-1st-case)

```
# ngresponsive.ini
AlwaysResponsive=disabled
```

```
# full/article.tpl
...
{attribute_view_gui attribute=$node.data_map.image responsive_image_class=imagefull}
...

```

This use case **requires** that we **change the template files** and setup **ngresponsiveimages.ini** and **image.ini** file.

Usage 2nd case:
---------------

[](#usage-2nd-case)

```
# ngresponsive.ini
AlwaysResponsive=enabled
```

```
# full/article.tpl
...
{attribute_view_gui attribute=$node.data_map.image image_class=imagefull [responsive_disabled]}
...

```

This case allows you to override image aliases **without** need to **change the template files**. Everything you need to do is to setup **ngresponsiveimages.ini** and **image.ini** file to your needs.

Options
-------

[](#options)

- `image_class` - standard image\_alias. This image is not responsive unless AlwaysResponsive is set to enabled
- `responsive_image_class` - Responsive image alias. This image alias uses picturefill html output
- `responsive_disabled` - deactivate image responsiveness for current attribute(not for image alias)

ngresponsiveimages.ini
----------------------

[](#ngresponsiveimagesini)

In `ngresponsiveimages.ini`, you need to define the responsive breakpoints with media query expressions.

```
[Responsive]
MediaQueryExpressions[]
MediaQueryExpressions[desktop]=(min-width: 768)
```

After that you need to create the group in ngresponsiveimages.ini file for each image alias in your eZ Publish installation that you would like to make responsive.

In the following example, `imagefull` image alias will be replaced with `alias_768_3_2` on the desktop screen and for the mobile screen `default_alias` will be used because we didn't specified mapping for mobile screen `MediaQueryMappings[mobile]`:

```
[Responsive]
MediaQueryExpressions[]
MediaQueryExpressions[mobile]=(min-width: 480px)
MediaQueryExpressions[desktop]=(min-width: 768)

[imagefull]
DefaultMap=default_alias
MediaQueryMappings[]
MediaQueryMappings[desktop]=alias_768_3_2
```

This will output next html for **imagefull** alias:

```

```

#### Other aliases (eg. large, medium, small) will be intact because we didn't defined INI group for the.

[](#other-aliases-eg-large-medium-small-will-be-intact-because-we-didnt-defined-ini-group-for-the)

Installation instructions
-------------------------

[](#installation-instructions)

- Activate the extension
- Copy and uncomment image aliases from provided example `image.ini` to `image.ini` in your project extension. You can ofcouse map your own image aliases instead of using the example ones.
- Copy `ngresponsiveimages.ini` INI file to `ngresponsiveimages.ini.append.php` in your project extension and configure image aliases and responsive breakpoints to suit your needs.
- Add `viewport` meta tag to your page head if not already present:

```

```

Author
------

[](#author)

Netgen & Mario Ivančić

###  Health Score

32

—

LowBetter than 69% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity66

Established project with proven stability

 Bus Factor1

Top contributor holds 50.8% 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 ~60 days

Total

4

Last Release

4473d ago

Major Versions

1.1 → 2.02013-12-09

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/362286?v=4)[Edi Modrić](/maintainers/emodric)[@emodric](https://github.com/emodric)

![](https://avatars.githubusercontent.com/u/594589?v=4)[Netgen](/maintainers/netgen)[@netgen](https://github.com/netgen)

---

Top Contributors

[![mivancic](https://avatars.githubusercontent.com/u/2465814?v=4)](https://github.com/mivancic "mivancic (33 commits)")[![emodric](https://avatars.githubusercontent.com/u/362286?v=4)](https://github.com/emodric "emodric (32 commits)")

### Embed Badge

![Health badge](/badges/netgen-ngresponsiveimages/health.svg)

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

###  Alternatives

[ezsystems/eztags-ls

eZ Tags is an extension for eZ Publish, providing more functionality for tagging content objects than ezkeyword datatype included in eZ Publish kernel.

40204.0k3](/packages/ezsystems-eztags-ls)[ezsystems/ezautosave-ls

Content editing autosave extension for eZ Publish legacy

22426.3k3](/packages/ezsystems-ezautosave-ls)[ezsystems/legacy-bridge

eZ Platform bridge to eZ Publish Legacy

17118.8k5](/packages/ezsystems-legacy-bridge)

PHPackages © 2026

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