wwwision/neos-dummyimage

Last activity 30 Apr 2023 7 4 7443
composer require wwwision/neos-dummyimage

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

1.2.0

Version
1.2.0
Type
neos-package
Release Date
Oct 18, 2022 13:36
Source
git
Distribution
zip
Requires
GPL-3.0+ 9784854e83b2b1b3c2356cdacb7d3b0f8eab7e0b

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

The content of the readme is provided by Github
The same vendor provides 29 package(s).