PHPackages                             sitegeist/kaleidoscope - 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. sitegeist/kaleidoscope

ActiveNeos-package[Utility & Helpers](/categories/utility)

sitegeist/kaleidoscope
======================

Responsive-images for Neos

v7.1.2(2mo ago)29370.3k↓47.1%11[7 issues](https://github.com/sitegeist/Sitegeist.Kaleidoscope/issues)[1 PRs](https://github.com/sitegeist/Sitegeist.Kaleidoscope/pulls)10GPL-3.0-or-laterPHPCI failing

Since Jul 13Pushed 2mo ago4 watchersCompare

[ Source](https://github.com/sitegeist/Sitegeist.Kaleidoscope)[ Packagist](https://packagist.org/packages/sitegeist/kaleidoscope)[ RSS](/packages/sitegeist-kaleidoscope/feed)WikiDiscussions 7.0 Synced yesterday

READMEChangelog (10)Dependencies (14)Versions (75)Used By (10)

Sitegeist.Kaleidoscope
======================

[](#sitegeistkaleidoscope)

[![](./Resources/Public/Images/KaleidoscopePromoImage.svg)](./Resources/Public/Images/KaleidoscopePromoImage.svg)

Responsive Images for Neos - with Atomic.Fusion & Monocle in mind
---------------------------------------------------------------------

[](#responsive-images-for-neos---with-atomicfusion--monocle-in-mind)

This package implements responsive-images for Neos for being used via Fusion.

```
imageSource = Sitegeist.Kaleidoscope:DummyImageSource

renderer = afx`

`

```

By separating the aspects of image-definition, size-constraining and rendering we enable the separation of those aspects into different fusion-components.

We want to help implementing responsive-images in the context of atomic-fusion and enable previewing fusion-components and their full responsive behavior in the Sitegeist.Monocle living styleguide.

Sitegeist.Kaleidoscope comes with four Fusion-ImageSources:

- Sitegeist.Kaleidoscope:AssetImageSource: Images uploaded by Editors
- Sitegeist.Kaleidoscope:DummyImageSource: Dummy images created by a local service
- Sitegeist.Kaleidoscope:ResourceImageSource: Static resources from Packages
- Sitegeist.Kaleidoscope:UriImageSource: any Url

### Authors & Sponsors

[](#authors--sponsors)

- Martin Ficzel -
- Wilhelm Behncke -

*The development and the public-releases of this package is generously sponsored by our employer .*

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

[](#installation)

Sitegeist.Kaleidoscope is available via packagist run `composer require sitegeist/kaleidoscope`. We use semantic versioning so every breaking change will increase the major-version number.

Configuration
-------------

[](#configuration)

Some image libraries have problems with WebP image formats. To avoid problems, a fallback image format can be configured, which will be used for rendering if the requested format fails. The default value is `png`.

```
Sitegeist:
  Kaleidoscope:
    dummyImage:
      fallbackFormat: 'png'
```

Moreover, as some image libraries (like Vips) also have problems with the generation of the dummy image, the driver can be overriden. By default, this value is `false` and the default driver as configured in `Neos.Imagine` is used. Possible values are `Gd`, `Imagick`, `Gmagick` or `Vips`.

```
Sitegeist:
  Kaleidoscope:
    dummyImage:
      overrideImagineDriver: 'Imagick'
```

Usage
-----

[](#usage)

Image/Picture FusionObjects
---------------------------

[](#imagepicture-fusionobjects)

The Kaleidoscope package integrates two main fusion-objects that an render the given ImageSource as `img`- or `picture`-tag.

### `Sitegeist.Kaleidoscope:Image`

[](#sitegeistkaleidoscopeimage)

Render an `img`-tag with optional `srcset` based on `sizes` or `resolutions`.

Props:

- `imageSource`: the imageSource to render
- `srcset`: media descriptors like '1.5x' or '600w' of the default image (string ot array)
- `sizes`: sizes attribute of the default image (string ot array)
- `loading`: (optional, default "lazy") loading attribute for the img tag
- `format`: (optional) the image-format like `webp` or `png`, will be applied to the `imageSource`
- `quality`: (optional) the image quality from 0 to 100, will be applied to the `imageSource`
- `width`: (optional) the base width, will be applied to the `imageSource`
- `height`: (optional) the base height, will be applied to the `imageSource`
- `alt`: alt-attribute for the img tag (default "")
- `title`: title attribute for the img tag
- `class`: class attribute for the img tag (deprecated in favor of attributes.class)
- `attributes`: tag-attributes, will override any automatically rendered ones
- `renderDimensionAttributes`: render dimension attributes (width/height) when the data is available from the imageSource. Enabled by default

#### Image with srcset in multiple resolutions:

[](#image-with-srcset-in-multiple-resolutions)

```
imageSource = Sitegeist.Kaleidoscope:DummyImageSource

renderer = afx`

`

```

#### Image with srcset in multiple sizes:

[](#image-with-srcset-in-multiple-sizes)

```
imageSource = Sitegeist.Kaleidoscope:DummyImageSource

renderer = afx`

`

```

### `Sitegeist.Kaleidoscope:Picture`

[](#sitegeistkaleidoscopepicture)

Render a `picture`-tag with various sources.

Props:

- `imageSource`: the imageSource to render
- `sources`: an array of source definitions that supports the following keys
    - `imageSource`: alternate image-source for art direction purpose
    - `srcset`: (optional) media descriptors like '1.5x' or '600w' (string ot array)
    - `sizes`: (optional) sizes attribute (string or array)
    - `media`: (optional) the media attribute for this source
    - `type`: (optional) the type attribute for this source
    - `format`: (optional) the image-format for the source like `webp` or `png`, is applied to `imageSource` and `type`
    - `quality`: (optional) the image quality from 0 to 100, will be applied to the `imageSource`
    - `width`: (optional) the base width, will be applied to the `imageSource`
    - `height`: (optional) the base height, will be applied to the `imageSource`
- `srcset`: media descriptors like '1.5x' or '600w' of the default image (string ot array)
- `sizes`: sizes attribute of the default image (string ot array)
- `formats`: (optional) image formats that will be rendered as sources of separate type (string or array)
- `quality`: (optional) the image quality from 0 to 100, will be applied to the `imageSource`
- `width`: (optional) the base width, will be applied to the `imageSource`
- `height`: (optional) the base height, will be applied to the `imageSource`
- `loading`: (optional, default "lazy") loading attribute for the img tag
- `alt`: alt-attribute for the img tag
- `title`: title attribute for the img tag
- `attributes`: picture-tag-attributes, will override any automatically rendered ones
- `imgAttributes`: img-tag-attributes, will override any automatically rendered ones
- `class`: class attribute for the picture tag (deprecated in favor of attributes.class)
- `renderDimensionAttributes`: render dimension attributes (width/height) for the img-tag when the data is available from the imageSource if not specified renderDimensionAttributes will be enabled automatically for pictures that only use the `formats` options.

#### Picture multiple formats:

[](#picture-multiple-formats)

The following code will render a picture with an img-tag and two additional source-tags for the formats webp and png in addition to the default img.

```
imageSource = Sitegeist.Kaleidoscope:DummyImageSource

renderer = afx`