README

该软件包允许在 Neos 后端渲染动态占位图。

背景

您是否使用dummyimage.com或lorempixel.com等许多占位图提供商在Neos后端渲染占位图？

如果是的话，这个软件包可能对您很有用：它提供了一个自定义的DummyImage类，实现了Neos.Media软件包中的Image和Asset接口，允许将其用作动态占位图的替换，这些占位图可以调整大小和裁剪。

这在使用Fusion时尤其有用。

使用方法

您可以通过 composer 轻松安装此软件包。

composer require wwwision/neos-dummyimage

示例：基本Fusion实现

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

将渲染出这样的图像

调整大小的工作方式与常规图像相同

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

裁剪也是如此

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

示例：使用Atomic Fusion的响应式图像

该软件包可以与 Atomic Fusion 组件一起使用，允许它们集中调整大小/裁剪逻辑。一个ResponsiveImage原子的实现可能看起来像这样

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>
    `
}

许可证

根据GPLv3+许可，请参阅 LICENSE