[SOLVED] Media:image doesn't reply an image at correct path

Using Neos & Flow Frontend & Integration
1

Hello Community!

I want to create a Website with a product overview page and product single pages. Every product has an image, a headline and some text on the product single page. Each headline and image of the products should be also displayed on the product overview page.

Product Single Page

There is no problem to display the image on the product single page. I get the image like:

<media:image class = "img-responsive" image = "{image}" maximumWidth = "300" alt = "string" />

“image” because it is setup in the yaml like:

'Neos.Marvin:NeoHeadlineMixin':
  abstract: TRUE
  properties:
    'neoheadline':
      type: string
      defaultValue: 'DIE ÜBERSCHRIFT!!!!!!!!!'
    'chapterImage':
      type: 'Neos\Media\Domain\Model\ImageInterface'
      ui:
        label: 'Chapter (ui/image)'
        reloadIfChanged: TRUE
        inspector:
          group: 'document'
        help:
          message: 'This image will also appear in the chapter menu.'

and in the root.fusion like:

image = ${q(node).property(‘chapterImage’)}

Product Overview Page

Now i want to get all children and read each headline and image. Therefor i create in the root.fusion this Content:

productOverview = Content {
  templatePath = 'resource://Neos.Marvin/Private/Templates/NodeTypes/productOverview.html'
  productOverview = ${q(documentNode).children('[instanceof Neos.Marvin:Products]')}
}

And this is the productOverview.html

{namespace neos=Neos\Neos\ViewHelpers}
{namespace fusion=Neos\Fusion\ViewHelpers}
{namespace media=Neos\Media\ViewHelpers}
<hr>
<h2>ProductOverview</h2>
<f:for each="{productOverview}" as="item">
	<neos:link.node node="{item}">{item.properties.title}</neos:link.node>
	<!--<f:if condition="{item.properties.image}">-->
	<media:image class="img-responsive" image="{item.properties.chapterImage}" maximumWidth="300" alt="string" />
	<!--</f:if>-->
	{item.properties.neoheadline}<br>
	{item.properties.chapterDescription}<hr>
	<f:debug title="Results of customers query">{item.properties}</f:debug>
</f:for>
<hr>

The funny thing about it that i get the neoheadline also the chapterDescription. But i didn’t get the image with:

<media:image class="img-responsive" image="{item.properties.chapterImage}" maximumWidth="300" alt="string" />

and i also tried:

<media:image class="img-responsive" image="{item.properties.image}" maximumWidth="300" alt="string" />

I hope it is clear what i mean. Anyone an idea why the image isn’t showing on the Product Overview Page?

2

Okay i solved it on my own.
It is so that fluid still renders <!-- --> and everything inside. (if you want to comment something use: CDATA sections)

And when we have a look inside <!-- --> we see <f:if condition="{item.properties.image}"> and ofcourse item.properties.image is wrong! it should be item.properties.chapterImage.

So use better cdata for commenting.

3

Even better, use a combination of CDATA and the f:comment ViewHelper:

<f:comment><![CDATA[ this is properly ignored from the Fluid parser ]]></f:comment>

Yet even better: Don’t comment out code but use a version system to revert changes if needed :}~