No editor when element is nested

Using Neos & Flow
1

The editor is not being displayed when the element is nested.

How the editor should work when selected:

element-with-editor.PNG1410×667 137 KB

When the element is nested, the editor showing the last selected element instead.

element-with-editor-hidden.PNG1391×719 138 KB

2

Hello Shane,

you have to render the contentCollection in your template. The structure view only helps to select the node in the content section.

Regards Martin

1 Like
3

The nodes are rendering though, and I’m able to customize them if i create them outside of the context of being in this collection and then dragging them into it. It’s only when they’re in this collection that their properties become uneditable.

4

If the nodes inside the collectiona are rendered the the thing that broke is contentElementWrapping.

In genreal every Content in Neos is rendered with code that is based on the following prototype:

prototype(TYPO3.Neos:Content) < prototype(TYPO3.TypoScript:Template) {
    # The following line must not be removed as it adds required meta data to all content elements in backend
    @process.contentElementWrapping {
        expression = TYPO3.Neos:ContentElementWrapping
        @position = 'end 999999999'
}

This processor code will add a bunch of data-attributes to the outermost html-element of the content that allow the backend to identify the object to select and how to interact with it.

This thing can break in the following ways:

  1. Somehow you disabled @process.contentElementWrapping for your content
  2. The rendererd code has not wrapping html-container to attach attributes to
  3. prototype(TYPO3.Neos:ContentElementWrapping) is overwritten inside your object
  4. You render the elements of your collection not as Neos-Content but with a different prototype.

Can you share the fusion/ts2 code and the template of the carousel-collection?

1 Like
5

This is the Typoscript for both the parent and child node:

prototype(Country.Germany:MosaicGridItem) < prototype(TYPO3.Neos:Content) 
prototype(Country.Germany:MosaicGridItem){
    templatePath = 'resource://Country.Germany/Private/Templates/NodeTypes/MosaicGridItem.html'

    thumbnail = ${q(node).property('thumbnail')}
    thumbnailHeading = ${q(node).property('thumbnailHeading')}
    thumbnailSubHeading1 = ${q(node).property('thumbnailSubHeading1')}
    thumbnailSubHeading2 = ${q(node).property('thumbnailSubHeading2')}
    thumbnailAlternativeText = ${q(node).property('thumbnailAlternativeText')}

    heading = ${q(node).property('heading')}
    subheading = ${q(node).property('subheading')}
    description = ${q(node).property('description')}
    linkContent = ${q(node).property('linkContent')}

    video = ${String.replace(q(node).property('video'), 'https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/')}
    image = ${q(node).property('image')}
    imageAlternativeText = ${q(node).property('imageAlternativeText')}

    overlayColor = ${q(node).property('overlayColor')}
    
    mosaicType = ${q(node).property('mosaicType')}
    
	hauselinien = ${q(node).property('hauselinien')}
	region = ${q(node).property('region')}

    prototype(Country.Germany:MosaicGridGalleryImage){
        // Render images in the carousel with a special template.
        templatePath = 'resource://Country.Germany/Private/Templates/NodeTypes/MosaicGridGalleryImage.html'

        // We want to use the item iterator in fluid so we have to store it as variable.
        iteration = ${carouselItemsIteration}
    }
}
6

Hello Shane

why do you define so much template variables and then override the image prototype. I would expect to use one or the other way.

Is your problem that you want your images to be rendered in a special container if they are in a grid this can be done easier like this.

prototype(Vendor.Site:Content.Grid) < prototype(TYPO3.Neos:Content) {
    template = ...
    gridItems = TYPO3.Neos:ContentCollection {
        # let Image contents use another template in here
        prototype(Vendor.Site:Content.Image) {
            template = ...
        }
    }
}

A bit more generic would be an approach where every content that is placed in the grid is rendered as usual but inside a special grid container.

prototype(Vendor.Site:Content.Grid) < prototype(TYPO3.Neos:Content) {
    template = ...
    gridItems = TYPO3.Neos:ContentCollection {
        # wrap contents in grid container
        prototype(TYPO3.Neos:Content) {
            @process.wrapInGridContainer {
               expression = ${'<div class="griditem">' + value + '</div>'}
               @position = 'before contentElementWrapping'
            }
        }
    }
}

Note: as usual this code is untested and has to be adjusted to your use case.

Regards Martin

7

The extra variables were to get around an inheritance issue I was having but i’m slowly refactoring the code.

The MosaicGridItem already handles the rendering of the grid items, its the a carousel of nested items below the grid that is being rendered (the MosaicGridGalleryImage). Its jus that as they are added to the grid items, the properties cannot be changed (ie, the picure being set) in the editor on right.

8

Just to help you understand the problem … you do’nt have the problem that you cannot change the properties.

The problem you are facing is that the backend does not allow you to select the content node because of missing metadata. That metadata is added by @process.contentElementWrapping. Since the node cannot be selected properly the inspector is still in the context of the parent node and does not show the properties you expect.

If you are looking at the html that is generated in the backend you will notice a lot of data properties that are not there in the fe. Those are probably missing inside of your Grid.

Can you confirm this first … in that case you will have to make sure that the contentElementWrapping is applied to the items in your collection aswell. I am still pretty sure that is the issue we are facing here.