[Solved] Rendering ContentCollection items for NodeType

Community Newcomer's Corner
1

Hello

I am creating a carousel which has nodetype definition as follow:

'Vendor.Site:InstagramCarousel':
  superTypes:
    'Neos.Neos:Content': true
  childNodes:
    carouselItems:
      type: 'Neos.Neos:ContentCollection'
      constraints:
        nodeTypes:
          '*': false
          'Neos.NodeTypes:Image': true
  ui:
    label: 'Instagram Carousel'
    group: 'plugins'
    icon: 'icon-picture'
    inlineEditable: true

Here is fusion file

prototype(Vendor.Site:InstagramCarousel) {
    carouselItems = Neos.Neos:ContentCollection {
        nodePath = 'carouselItems'
        content.iterationName = 'carouselItemsIteration'
        attributes.class = 'carousel-inner'
    }

    //Collect the carousel children but only images
	carouselItemArray = ${q(node).children('carouselItems').children('[instanceof Neos.NodeTypes:Image]')}
}

then here is fluid template file

{namespace neos=Neos\Neos\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<section class="instagramArea topSpacing">
    <div class="container">
        <div class="row">
                <div class="owl-carousel owl-theme topSpacing">
                    <f:for each="{carouselItemArray}" as="item" iteration="itemIterator">
                        <media:image image="{item}" alt="" />
                    </f:for>
                </div>
            </div>
        </div>
    </div>
</section>

I am hoping to get images but this is what i get instead

An exception was thrown while Neos tried to render your page
The argument "image" was registered with type "Neos\Media\Domain\Model\ImageInterface", but is of type "Neos\ContentRepository\Domain\Model\Node" in view helper "Neos\Media\ViewHelpers\ImageViewHelper".

homePage<Neos.Neos:Page>/ body<Neos.Fusion:Template>/ instagramCarousel<Neos.Neos:ContentCollection>/ content<Neos.Neos:ContentCollectionRenderer>/ itemRenderer<Neos.Neos:ContentCase>/ default<Neos.Fusion:Matcher>/ element<Vendor.Site:InstagramCarousel><Vendor.Site:InstagramCarousel>/

even on backend i do not see any option in inspector to select image

any idea where i made mistake?

2

The images you retrieve in your fusion file are the NodeTypes itself that have the image, an alternative text and a title. To get the image you need to either use {item.properties.image} in the fluid template file or output the complete content collection with {carouselItems -> f:format.raw()} and use a custom view for the image nodetypes.

3

Thanks