Skip to content

Instantly share code, notes, and snippets.

@beardcoder beardcoder/Image.fusion
Last active Jun 6, 2018

Embed
What would you like to do?
Atomic Fusion responsive image
prototype(BeardCoder.Creativeworkspace:Component.Atom.Image) < prototype(PackageFactory.AtomicFusion:Component) {
@styleguide {
props {
src = 'https://dummyimage.com/600x400/000/fff'
title = 'image title'
alt = 'image alt'
}
}
alt = ''
image = ''
height = ''
width = ''
allowCropping = ''
title = ''
class = false
renderer.@context {
_imageUriDesktop = Neos.Neos:ImageUri {
asset = ${props.image}
width = ${props.width}
allowCropping = ${props.allowCropping}
}
_imageUriTablet = Neos.Neos:ImageUri {
asset = ${props.image}
width = ${props.width}
maximumWidth = '768'
height = ${props.height}
allowCropping = ${props.allowCropping}
}
_defaultImageUri = Neos.Neos:ImageUri {
asset = ${props.image}
width = ${props.width}
maximumWidth = '480'
height = ${props.height}
allowCropping = ${props.allowCropping}
}
_dummyImage = Neos.Fusion:Value {
value = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
}
}
renderer = afx`
<picture>
<source media="(min-width: 769px)" srcset={_dummyImage} data-srcset={_imageUriDesktop} />
<source media="(min-width: 480px)" srcset={_dummyImage} data-srcset={_imageUriTablet} />
<img class="img-fluid lazy" src={_dummyImage} data-src={_defaultImageUri} title={props.title} alt={props.alt} />
</picture>
`
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.