nilsor
(Nils Fett)
#1
Hi,
I would like to overwrite the standard image, to get rid of the width and height properties.
Done this:
added this nodeType code in my custom Page:
'Neos.NodeTypes:Image':
superTypes:
'Neos.Neos:Content': true
'Neos.NodeTypes:ContentImageMixin': true
ui:
label: i18n
icon: 'icon-picture'
position: 300
added this fusion code in my custom Page:
prototype(Neos.NodeTypes:Image) < prototype(Neos.Neos:Content) {
maximumWidth = 2560
width = null
maximumHeight = 2560
height = null
imageClassName = ${q(node).property('alignment') ? ('neos-alignment-' +
q(node).property('alignment')) : ''}
allowCropping = false
allowUpScaling = false
image = ${q(node).property("image")}
alternativeText = ${q(node).property("alternativeText")}
link = ${q(node).property("link")}
link.@process.convertUris = Neos.Neos:ConvertUris {
forceConversion = true
}
title = ${q(node).property('title') ? q(node).property('title') : q(node).property('image').title}
hasCaption = ${q(node).property("hasCaption")}
caption = ${String.trim(String.stripTags(q(node).property('caption'))) ?
q(node).property('caption') : q(node).property('image').caption}
caption.@process.convertUris = Neos.Neos:ConvertUris
alignment = ${q(node).property("alignment")}
renderer = afx`
<img src="{props.link}" />
`
}
There is still the “normal” image rendered with height and width attributes.
I did overwrite the same way the Neos.NodeTypes.ColumnLayouts:TwoColumn NodeType and the Fusion Code for rendering and this worked fine.
Can someone see what’s missing?
What would be a good way to debug such a szenario?
Thanks
nilsor
(Nils Fett)
#2
Ok, now I changed the NodeType Code from
'Neos.NodeTypes:Image':
superTypes:
'Neos.Neos:Content': true
'Neos.NodeTypes:ContentImageMixin': true
ui:
label: i18n
icon: 'icon-picture'
position: 300
to
'Neos.NodeTypes:Image':
abstract: true
'Vendor.Site:Image':
superTypes:
'Neos.NodeTypes:Image': true
ui:
label: i18n
icon: 'icon-picture'
position: 300
and copied the whole fusion and template code in my site.
prototype(Vendor.Site:Image) < prototype(Neos.Neos:Content) {
templatePath = 'resource://Vendor.Site/Private/Templates/Image.html'
maximumWidth = 2560
width = null
maximumHeight = 2560
height = null
imageClassName = ${q(node).property('alignment') ? ('neos-alignment-' + q(node).property('alignment')) : ''}
allowCropping = false
allowUpScaling = false
image = ${q(node).property("image")}
alternativeText = ${q(node).property("alternativeText")}
link = ${q(node).property("link")}
link.@process.convertUris = Neos.Neos:ConvertUris {
forceConversion = true
}
title = ${q(node).property('title') ? q(node).property('title') : q(node).property('image').title}
hasCaption = ${q(node).property("hasCaption")}
caption = ${String.trim(String.stripTags(q(node).property('caption'))) ? q(node).property('caption') : q(node).property('image').caption}
caption.@process.convertUris = Neos.Neos:ConvertUris
alignment = ${q(node).property("alignment")}
}
Now changes in the templates do work.
I changed in the SimpleImage.html Template from:
<f:section name="imageRendering">
<media:image image="{image}" alt="{alternativeText}" title="{title}" width="{width}"
maximumWidth="{maximumWidth}" height="{height}" maximumHeight="{maximumHeight}"
allowUpScaling="{allowUpScaling}" allowCropping="{allowCropping}" />
</f:section>
to
<f:section name="imageRendering">
<media:image image="{image}" alt="{alternativeText}" title="{title}"
maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}"
allowUpScaling="{allowUpScaling}" allowCropping="{allowCropping}" />
</f:section>
but there is still the height and width attribute rendered. Now I want to change it to something like:
<img src="{urlToTheImageSrc}" />
Can someone tell me how I can get the image URL in the fusion part?