Overwrite Neos.NodeTypes:Image

Using Neos & Flow Frontend & Integration
#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

#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?