Skip to content
Package that allows for rendering dynamic dummy images in the Neos backend.
PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Classes
Configuration
Resources/Private/Fusion
Tests/Unit
ExampleImage.svg
ExampleImage_cropped.svg
ExampleImage_resized.svg
LICENSE
README.md
composer.json

README.md

Wwwision.Neos.DummyImage

Package that allows for rendering dynamic dummy images in the Neos backend.

Background

Do you use one of the many dummy image providers like dummyimage.com or lorempixel.com to render placeholder images in your Neos backend?

If so this package might be useful to you: It provides a custom DummyImage class implementing the Image and Asset interfaces of the Neos.Media package allowing to use it as a replacement to render dynamic placeholder images that can be resized and cropped.

This is particularity useful when used in conjunction with Fusion.

Usage

You can easily install this package via composer:

composer require wwwision/neos-dummyimage

Example: Basic Fusion implementation

someImage = Neos.Neos:ImageTag {
    asset = Wwwision.Neos.DummyImage:DummyImage {
        width = 600
        height = 500
    }
}

Will render an image like this:

Dummy image, unmodified

Resizing works just like with regular images:

someImage = Neos.Neos:ImageTag {
    asset = Wwwision.Neos.DummyImage:DummyImage {
        width = 600
        height = 500
    }
    maximumWidth = 500
    maximumHeight = 450
}

Dummy image, resized

..and so does cropping

someImage = Neos.Neos:ImageTag {
    asset = Wwwision.Neos.DummyImage:DummyImage {
        width = 600
        height = 500
    }
    width = 500
    height = 450
    allowCropping = true
}

Dummy image, resized and cropped

Example: Responsive images with Atomic Fusion

This package can be used together with Atomic Fusion components allowing them to centralize resizing/cropping logic. An implementation of a ResponsiveImage atom could look something like this:

prototype(Your.Package:Component.Atom.ResponsiveImage) < prototype(PackageFactory.AtomicFusion:Component) {

    @styleguide {
        title = 'Responsive Image'
        description = 'Image with alternative sizes for different breakpoints'

        props {
            image = Wwwision.Neos.DummyImage:DummyImage {
                width = 1000
                height = 800
            }
        }
        propSets {
            'flexible width and height' {
                width = 400
                height = 350
                altText = 'Lorem ipsum dolor'
                allowCropping = true
                responsiveImages = Neos.Fusion:RawArray {
                    large = Neos.Fusion:RawArray {
                        minWidth = 1025
                        imageWidth = 600
                        imageHeight = 500
                    }
                    medium = Neos.Fusion:RawArray {
                        minWidth = 769
                        imageWidth = 500
                        imageHeight = 420
                    }
                }
            }
            'fixed height' {
                width = 400
                height = 350
                allowCropping = true
                responsiveImages = Neos.Fusion:RawArray {
                    large = Neos.Fusion:RawArray {
                        minWidth = 1025
                        imageWidth = 600
                    }
                    medium = Neos.Fusion:RawArray {
                        minWidth = 769
                        imageWidth = 500
                    }
                }
            }
            'fixed width' {
                width = 400
                height = 350
                allowCropping = true
                responsiveImages = Neos.Fusion:RawArray {
                    large = Neos.Fusion:RawArray {
                        minWidth = 1025
                        imageHeight = 500
                    }
                    medium = Neos.Fusion:RawArray {
                        minWidth = 769
                        imageHeight = 420
                    }
                }
            }
        }
    }

    # API
    image = null
    width = null
    height = null
    altText = null
    allowCropping = true
    responsiveImages = Neos.Fusion:RawArray
    classNames = null
    # /API

    renderer.@context {
        _sourceSets = Neos.Fusion:Collection {
            collection = ${props.responsiveImages}
            itemName = 'responsiveImage'
            itemRenderer = Neos.Fusion:Value {
                @context.responsiveImageUri = Neos.Neos:ImageUri {
                    asset = ${props.image}
                    width = ${responsiveImage.imageWidth ? responsiveImage.imageWidth : props.width}
                    height = ${responsiveImage.imageHeight ? responsiveImage.imageHeight : props.height}
                    allowCropping = ${props.allowCropping}
                }
                value = ${'<source srcset="' + responsiveImageUri + '" media="(min-width: ' + responsiveImage.minWidth + 'px)">'}
            }
        }
        _defaultImageUri = Neos.Neos:ImageUri {
            asset = ${props.image}
            width = ${props.width}
            height = ${props.height}
            allowCropping = ${props.allowCropping}
        }
    }

    renderer = afx`
        <picture class={props.classNames}>
            {_sourceSets}
            <img srcset={_defaultImageUri} alt={props.altText} />
        </picture>
    `
}

License

Licensed under GPLv3+, see LICENSE

You can’t perform that action at this time.