PHPackages inspiredminds/contao-image-alternatives - 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. inspiredminds/contao-image-alternatives ActiveContao-bundle[Image & Media](/categories/media) inspiredminds/contao-image-alternatives ======================================= Contao extension to provide the possibility of defining alternative images to be used on different output devices. 1.3.1(7mo ago)121.9k—0%1LGPL-3.0-or-laterPHPPHP >=8.2 Since May 30Pushed 7mo ago4 watchersCompare [ Source](https://github.com/inspiredminds/contao-image-alternatives)[ Packagist](https://packagist.org/packages/inspiredminds/contao-image-alternatives)[ Docs](https://github.com/inspiredminds/contao-image-alternatives)[ GitHub Sponsors](https://github.com/sponsors/fritzmg)[ RSS](/packages/inspiredminds-contao-image-alternatives/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (8)Versions (13)Used By (0) [![](https://camo.githubusercontent.com/0c37c576a2d43cfc571710e0a2aa99098725361ce34017ed842f4084471e501c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f696e7370697265646d696e64732f636f6e74616f2d696d6167652d616c7465726e6174697665732e737667)](https://packagist.org/packages/inspiredminds/contao-image-alternatives)[![](https://camo.githubusercontent.com/bd29a101fd8b228dc34043d6e0fc462e4714190bc36ea5054ce37a78dc7e4f10/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f696e7370697265646d696e64732f636f6e74616f2d696d6167652d616c7465726e6174697665732e737667)](https://packagist.org/packages/inspiredminds/contao-image-alternatives) Contao Image Alternatives ========================= [](#contao-image-alternatives) This extensions expands the capabilities of using responsive images with art direction in Contao. You will have the possibility to define a set of alternatives which will then allow you to define the respective alternatives per image in the file manager. Suppose you want to use different images for a certain image size depending on the output device, i.e. a specific image for desktop, for tablets and for mobile. You can define a set of alternatives called `mobile` and `tablet` for example (desktop will be the fallback - the original image): ``` # config/config.yaml contao_image_alternatives: alternatives: - tablet - mobile ``` Now you can choose the alternatives for each image separately in Contao's file manager: [![](https://raw.githubusercontent.com/inspiredminds/contao-image-alternatives/main/filemanager.png)](https://raw.githubusercontent.com/inspiredminds/contao-image-alternatives/main/filemanager.png) The back end labels for each alternative can be translated via the `image_alternatives` translation domain: ``` # translations/image_alternatives.en.yaml tablet: Tablet mobile: Mobile ``` Within your image size settings you can then choose per media query item, whether an alternative image should be chosen for this particular image size: [![](https://raw.githubusercontent.com/inspiredminds/contao-image-alternatives/main/imagesizeitem.png)](https://raw.githubusercontent.com/inspiredminds/contao-image-alternatives/main/imagesizeitem.png) [![](https://raw.githubusercontent.com/inspiredminds/contao-image-alternatives/main/imagesize.png)](https://raw.githubusercontent.com/inspiredminds/contao-image-alternatives/main/imagesize.png) Alternatively you can also set the alternative in your config via `contao_image_alternatives.sizes.*.items`. Note that the name of the size must be same name as in `contao.image.sizes` and the media query for each item must match with the ones in `contao.image.sizes.*.items`: ``` # config/config.yaml contao_image_alternatives: alternatives: - tablet - mobile sizes: example: items: - media: '(max-width: 480px)' alternative: mobile - media: '(max-width: 800px)' alternative: tablet ``` When you choose the configured image size in your content element or module, the generated images will automatically use the alternative versions for each source image for the particular image size media query item. Alternative Important Parts --------------------------- [](#alternative-important-parts) It is also possible to set different important parts for each image alternative. When editing an image in the file manager, there will be a an **Important part alternative** selection at the top, with which you can switch between the different important parts. For example if you have set the default important part for an image, plus the important part for the `mobile` alternative, then latter will be used for your `mobile` media query image size item (if configured) and otherwise the default. This allows you to crop the image to different parts for different output devices within the same image. Pre-Crop -------- [](#pre-crop) It is also possible to to pre-crop the image to the important part *before* the image is resized according to the resize settings. This allows you to crop the image to the important part for certain image sizes while otherwise only resizing to a specific width or height. This setting can be set per image size in the database and also via the bundle configuration: ``` # config/config.yaml contao_image_alternatives: sizes: example: pre_crop: true ``` Attributions ------------ [](#attributions) Development funded by: - [ncm](https://www.ncm.at/) - Net Communication Management GmbH - [nickname . Büro für visuelle Kommunikation](https://www.hofff.com/) ### Health Score 46 — FairBetter than 93% of packages Maintenance65 Regular maintenance activity Popularity26 Limited adoption so far Community10 Small or concentrated contributor base Maturity68 Established project with proven stability 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 ~112 days Recently: every ~237 days Total 12 Last Release 213d ago PHP version history (2 changes)1.0.0PHP >=7.1 1.3.0PHP >=8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/25f6ec05570f72d0fcc4d0a4fef2309799d53badf8b30484284e73724661e0d8?d=identicon)[fritzmg](/maintainers/fritzmg) --- Top Contributors [![fritzmg](https://avatars.githubusercontent.com/u/4970961?v=4)](https://github.com/fritzmg "fritzmg (28 commits)") ### Embed Badge ![Health badge](/badges/inspiredminds-contao-image-alternatives/health.svg) ``` [![Health](https://phpackages.com/badges/inspiredminds-contao-image-alternatives/health.svg)](https://phpackages.com/packages/inspiredminds-contao-image-alternatives) ``` ### Alternatives [sulu/sulu Core framework that implements the functionality of the Sulu content management system 1.3k1.3M152](/packages/sulu-sulu)[prestashop/prestashop PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers. 9.0k15.4k](/packages/prestashop-prestashop)[contao/core-bundle Contao Open Source CMS 1231.6M2.4k](/packages/contao-core-bundle)[open-dxp/opendxp Content & Product Management Framework (CMS/PIM) 7310.3k29](/packages/open-dxp-opendxp)[contao-community-alliance/dc-general Universal data container for Contao 1578.3k86](/packages/contao-community-alliance-dc-general)[robole/sulu-ai-translator-bundle Translate any type of content using DeepL 181.3k](/packages/robole-sulu-ai-translator-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)