Grid package - Change (e.g. image) property based on column

Using Neos & Flow
1

Hi everyone,

I have a e.g. a two col grid and now I want to change a property of e.g. an image based on the Column it is placed in. How do I determine in which col my image is placed?

The columns are of type ContentCollection. Or would be the solution that I have to create a separate NodeType vor each column like ContentCollectionCol0 and ContentCollectionCol1 or can I do something like

prototype(My.Grid:TwoColumns) {
    # children: column0
    prototype(Neos.Fusion:ContentCollection)[0] {
         prototype(My.Package:Image) {
              width = 200
         }
    }
    # children: column1
    prototype(Neos.Fusion:ContentCollection)[1] {
         prototype(My.Package:Image) {
              width = 400
         }
    }
}

a solution could be the following, but I was wondering if this is necessary:

prototype(My.Grid:TwoColumns) {
    # children: column0
    prototype(My.Grid:Column0) {
         prototype(My.Package:Image) {
              width = 200
         }
    }
    # children: column1
    prototype(My.Grid:Column1) {
         prototype(My.Package:Image) {
              width = 400
         }
    }
}
2

You could create a prototype for the rendering of the column. Inside that prototype have a property for the image property

prototype(Vendor:Column) {
  image = ${null}
  @context.image = ...
  renderer = afx`
    <img src="{ this.image}" />
  `
}

override the image property for each rendering

3

Yes, but then I have to crate

prototype(Vendor:Column1)
prototype(Vendor:Column2)

If I want to have separat values for e.g. the image in the column, right?

4

No, you can create
prototype(Vendor:Column) {
image = Neos.Fusion:Image {
asset = ${this.asset}
}
}

and use it like

prototype(My.Grid:TwoColumns) {
  column1 = Vendor:Column {
    asset = 'something'
  }
  column2 = Vendor:Column {
    asset = 'something else'
  }
}
5

If you render the 2 columns manually in your two columns then you don’t need additional prototypes to encapsulate the override of the Image prototype.

Basically what @sorenmalling said, but instead do the prototype override.