Download the PHP package sitegeist/kaleidoscope without Composer

On this page you can find all versions of the php package sitegeist/kaleidoscope. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package kaleidoscope

Sitegeist.Kaleidoscope

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

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

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:

Authors & Sponsors

The development and the public-releases of this package is generously sponsored by our employer http://www.sitegeist.de.

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

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.

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.

Usage

Image/Picture FusionObjects

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

Sitegeist.Kaleidoscope:Image

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

Props:

Image with srcset in multiple resolutions:

Image with srcset in multiple sizes:

Sitegeist.Kaleidoscope:Picture

Render a picture-tag with various sources.

Props:

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.

Picture with multiple sources:

The properties imageSource. srcset and sizes are automatically passed from the picture to the source if not defined otherwise.

Sitegeist.Kaleidoscope:Source

Render an src-tag with srcset, sizes, type and media attributes.

Props:

Responsive Images with AtomicFusion-Components and Sitegeist.Monocle

Please note that the enforced dimensions are applied in the presentational component. The dimension enforcement is applied to the DummySource aswell as to the AssetSource which will be defined by the integration.

The integration of the component above as content-element works like this:

This shows that integration-code dos not need to know the required image dimensions or wich variants are needed. This frontend know-how is now encapsulated into the presentational-component.

Dynamically enable/disable the lazy rendering

To optimize the initial load time lazy loading should be disabled for the first contents but be enabled for others. This can be implemented by enabling the lazyness in the ContentCase prototype depending on whether or not the current node is the first content in the main collection.

ImageSource FusionObjects

The package contains ImageSource-FusionObjects that encapsulate the intention to render an image. ImageSource-Objects return Eel-Helpers that allow to enforcing the rendered dimensions later in the rendering process.

Note: The settings for width, height, thumbnailPreset and variantPreset can be defined via fusion but can also applied to the returned object which will override the fusion-settings.

Sitegeist.Kaleidoscope:AssetImageSource

Arguments:

Sitegeist.Kaleidoscope:DummyImageSource

Arguments:

Sitegeist.Kaleidoscope:UriImageSource

Arguments:

Arguments:

ImageSource Eel-Helpers

The ImageSource-helpers are created by the fusion-objects above and are passed to a rendering component. The helpers allow to set or override the intended dimensions and to render the src and srcset-attributes.

Methods of ImageSource-Helpers that are accessible via Eel:

deprecated methods:

Note: The Eel-helpers cannot be created directly. They have to be created by using the Sitegeist.Kaleidoscope:AssetImageSource or Sitegeist.Kaleidoscope:DummyImageSource fusion-objects.

Examples

Render an img-tag with src and a srcset in multiple resolutions:

Render an img-tag with src plus srcset and sizes:

Render a picture-tag with multiple source-children and an img-fallback :

In this example devices smaller than 800px will show a square image, while larger devices will render a multires-source in the original image dimension.

Contribution

We will gladly accept contributions. Please send us pull requests.

All versions of kaleidoscope with dependencies

PHP Build Version
Package Version
Requires neos/neos Version ^8.3 || ^9.0 || dev-master
neos/fusion-afx Version ^8.3 || ^9.0 || dev-master
neos/media Version *
neos/imagine Version *
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package sitegeist/kaleidoscope contains the following files

Loading the files please wait ....