PHPackages                             aoe/imgix - 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. aoe/imgix

ActiveTypo3-cms-extension[Image & Media](/categories/media)

aoe/imgix
=========

Provides the Auto Responsive Images feature of imgix called imgix.fluid()

11.2.0(2y ago)6735GPL-3.0JavaScriptPHP ^8.0

Since Mar 22Pushed 2y ago20 watchersCompare

[ Source](https://github.com/AOEpeople/TYPO3-Imgix)[ Packagist](https://packagist.org/packages/aoe/imgix)[ Docs](https://github.com/AOEpeople/TYPO3-Imgix)[ RSS](/packages/aoe-imgix/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (10)Versions (46)Used By (0)

TYPO3-Imgix
===========

[](#typo3-imgix)

[![Build Status](https://github.com/AOEpeople/TYPO3-Imgix/workflows/CI/badge.svg?branch=main)](https://github.com/AOEpeople/TYPO3-Imgix/actions)[![Code Coverage](https://camo.githubusercontent.com/aa58222be9499b7fd1676ce05d64a911c37ae644d635c13e831ddb6adf0f1cdc/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f414f4570656f706c652f5459504f332d496d6769782f6261646765732f636f7665726167652e706e673f623d6d61696e)](https://scrutinizer-ci.com/g/AOEpeople/TYPO3-Imgix/?branch=main)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/daa48aae4d21dce6085d34f7863672b774f5c5a702f599c71fd7b23699ed4727/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f414f4570656f706c652f5459504f332d496d6769782f6261646765732f7175616c6974792d73636f72652e706e673f623d6d61696e)](https://scrutinizer-ci.com/g/AOEpeople/TYPO3-Imgix/?branch=main)

The "imgix" TYPO3 extension provides the Auto Responsive Images feature of [imgix](https://www.imgix.com/) called [imgix.fluid()](https://www.imgix.com/imgix-js#section-3). This allows you to deliver perferctly custom sized images for the client without using local capaticities. For more details have a look at [imgix](https://www.imgix.com/), [imgix.fluid()](https://www.imgix.com/imgix-js#section-3) and the JS library [imgix.js](https://github.com/imgix/imgix.js/).

In addition this extension provides some additional features like:

- Supports different integrations (jQuery and AngularJS)
- Fallback scenario if you disable the fluid feature
- Observation of asynchronously added images

Missing/Upcoming features:
--------------------------

[](#missingupcoming-features)

- Currently this extension is limited to images on which you have access to manipulate the way the image is outputted to the browser. The reason for that is that img tags must have a specific class set and a data-src attribute in which the image url is stored. In future releases we will implement this in TYPO3´s standard rendering.
- Version 3 of [imgix.js](https://github.com/imgix/imgix.js/) is not supported yet

Download / Installation
-----------------------

[](#download--installation)

```
composer require aoe/imgix
```

Documentation
-------------

[](#documentation)

### Activate Extension

[](#activate-extension)

Once the "imgix" extension is installed you have to activate the extension in the TYPO3 "Extension Manager". You can do that by using the the TYPO3 Backend Module or using the comand line tool.

### Configure Extension

[](#configure-extension)

Click the "configure" action button to open the configuration. You can also do that by clicking the extension title.

The configuration is seperated in two parts: "basic" and "imgix"

#### basic

[](#basic)

The basic configuration includes specific settings of the extension which you need to set up for your project.

##### basic.apiKey

[](#basicapikey)

This is the apiKey you have specified in the imgix webapp. The API-key must be configured when you want to purge images in imgix. For further information have a look at the [imigx doumentation](https://docs.imgix.com/setup/purging-images).

##### basic.host

[](#basichost)

This is the host you have specified in the imgix webapp as source for your project. Be aware that you have to use the "Web Folder" source in imgix. For further information have a look at the [imigx doumentation](https://docs.imgix.com/setup/creating-sources#source-web-folder).

##### basic.enabled

[](#basicenabled)

If basic.enabeld is set to false, the JS will never be rendered into browser.

##### basic.enableFluid

[](#basicenablefluid)

Check this configuration if the image urls should be replaced by the configured basic.host configuration. If basic.enabeld is set to false, it will cause a fallback behavior: all image urls will be used as they are. This is helpful if you want to disable the responsive images from imgix using a simple checkbox without having broken or missing images.

##### basic.enableObservation

[](#basicenableobservation)

If your JS adds images dynamically/asynchroniously, this setting will observe these changes to the DOM and will add the responsive image feature to new HTML image tags. Be careful by enabling this option. This feature is realized by [Mutation Observers](http://caniuse.com/#feat=mutationobserver) which is not supported by all browsers at the moment.

#### imgix

[](#imgix)

The imigx configurations are [imgix.js](https://github.com/imgix/imgix.js/) related settings. For a detailed description about the options, take a look at the [documentation](http://github.com/imgix/imgix.js/blob/main/docs/api.md#imgix.fluid).

##### imgix.defaultUrlParameters

[](#imgixdefaulturlparameters)

If some of the [URL API Parameters](https://docs.imgix.com/apis/url) should be set by default, list them here as a GET-Parameter string, e.g. q=75&fit=max

### Include

[](#include)

To use this extension you have to add a static template file to your template record.

1. "imgix: Common Constants (imgix)"

Now you have to take a decision for one of the supported integrations:

#### AngularJS

[](#angularjs)

For AngularJS you have to add these two static template files to your template record:

1. imgix: Load Angular Extbase-Plugin for further usage (imgix)
2. imgix: Include Angular-Module files into page (imgix)

#### jQuery

[](#jquery)

For jQuery you have to add these two static template files to your template record:

1. imgix: Load Jquery Extbase-Plugin for further usage (imgix)
2. imgix: Include Jquery-Plugin files into page (imgix)

### Usage

[](#usage)

#### AngularJS Module

[](#angularjs-module)

##### Add the module dependency

[](#add-the-module-dependency)

```
angular.module('your-module', ['aoe.imgixify']);
```

##### Use the "aoe-imgix" directive for images

[](#use-the-aoe-imgix-directive-for-images)

```

```

#### jQuery Plugin

[](#jquery-plugin)

To use responsive images you have to add the following class and attribute to you HTML image tag:

- add the "image-fluid" class defined in [fluidClass](http://github.com/imgix/imgix.js/blob/main/docs/api.md#imgix.fluid)
- add the the data-src attribute.

```

```

License
-------

[](#license)

License: GPLv3 or later. See LICENSE.

Contributing
------------

[](#contributing)

```
1. Fork the repository on Github
2. Create a named feature / bugfix branch (like `feature/add-something-new` or `bugfix/thing-which-does-not-work`)
3. Write your change
4. Write tests for your change (if applicable)
5. Run the tests, ensuring they all pass
6. Submit a Pull Request using Github

```

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity18

Limited adoption so far

Community19

Small or concentrated contributor base

Maturity81

Battle-tested with a long release history

 Bus Factor2

2 contributors hold 50%+ of commits

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 ~72 days

Recently: every ~92 days

Total

42

Last Release

793d ago

Major Versions

2.0.1 → 3.0.02018-12-19

3.0.1 → 8.0.02020-08-26

8.3.0 → 11.0.02022-05-23

8.3.1 → 11.0.12022-09-08

8.3.3 → 11.0.42022-12-12

PHP version history (6 changes)0.1.0PHP >=5.5.0

3.0.0PHP ^7.0

8.0.0PHP ^7.1

11.0.0PHP ^7.4

11.0.1PHP ^7.4 || ^8.0

11.1.0PHP ^8.0

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/6331769?v=4)[AOE](/maintainers/AOEpeople)[@AOEpeople](https://github.com/AOEpeople)

---

Top Contributors

[![kschu91](https://avatars.githubusercontent.com/u/5566756?v=4)](https://github.com/kschu91 "kschu91 (24 commits)")[![fbrandel](https://avatars.githubusercontent.com/u/201162?v=4)](https://github.com/fbrandel "fbrandel (19 commits)")[![tlayh](https://avatars.githubusercontent.com/u/285669?v=4)](https://github.com/tlayh "tlayh (12 commits)")[![aoekrz](https://avatars.githubusercontent.com/u/49280056?v=4)](https://github.com/aoekrz "aoekrz (5 commits)")[![sourcesoldier](https://avatars.githubusercontent.com/u/4140294?v=4)](https://github.com/sourcesoldier "sourcesoldier (3 commits)")[![TomSchenk](https://avatars.githubusercontent.com/u/12969197?v=4)](https://github.com/TomSchenk "TomSchenk (3 commits)")[![sandritter](https://avatars.githubusercontent.com/u/9157713?v=4)](https://github.com/sandritter "sandritter (2 commits)")[![felixsemmler](https://avatars.githubusercontent.com/u/9789350?v=4)](https://github.com/felixsemmler "felixsemmler (2 commits)")[![hacksch](https://avatars.githubusercontent.com/u/5759188?v=4)](https://github.com/hacksch "hacksch (1 commits)")

---

Tags

imgixtypo3typo3-extension

###  Code Quality

Static AnalysisPHPStan, Rector

Code StyleECS

Type Coverage Yes

### Embed Badge

![Health badge](/badges/aoe-imgix/health.svg)

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

###  Alternatives

[friendsoftypo3/content-blocks

TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML

103519.9k51](/packages/friendsoftypo3-content-blocks)[pagemachine/typo3-formlog

Form log for TYPO3

23238.6k8](/packages/pagemachine-typo3-formlog)[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

611.1M8](/packages/netresearch-rte-ckeditor-image)[web-vision/deepltranslate-core

DeepL Translate (CORE) - This extension provides option to translate content element, and TCA record texts to DeepL supported languages.

33142.5k8](/packages/web-vision-deepltranslate-core)[eliashaeussler/typo3-warming

Warming - Warms up Frontend caches based on an XML sitemap. Cache warmup can be triggered via TYPO3 backend or using a console command. Supports multiple languages and custom crawler implementations.

22260.2k](/packages/eliashaeussler-typo3-warming)[eliashaeussler/typo3-form-consent

Extension for TYPO3 CMS that adds double opt-in functionality to EXT:form

1595.5k](/packages/eliashaeussler-typo3-form-consent)

PHPackages © 2026

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