Bilder aus News mit Inhaltselementen anzeigen

Um auch Bilder aus News mit Inhaltselementen anzeigen zu können, gehen Sie wie folgt vor:

1. Installieren Sie die Erweiterung VHS.
2. Bearbeiten Sie das Fluid-Partial für die Anzeige der News (Partials/Library/News.html) und fügen Sie den VHS-Namespace hinzu:

   <div xmlns="http://www.w3.org/1999/xhtml" lang="en"
        xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
        xmlns:amp="http://typo3.org/ns/CodingMs/Amp/ViewHelpers"
        xmlns:vhs="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
        ...
   </div>

3. Lesen Sie die Bild-Resourcen

   <vhs:resource.record.fal table="tt_content" field="image" uid="{contentElement.uid}" as="resources">
       <f:if condition="{f:count(subject: resources)}">
           <div class="images">
               <f:for each="{resources}" as="resource">
                   <amp-img src="{f:uri.image(src: resource.uid, treatIdAsReference: 1, width: settings.news.image.width, height: settings.news.image.height)}"
                            width="{settings.news.image.width}" height="{settings.news.image.height}"
                            layout="responsive" alt="{resource.alt}" title="{resource.title}"></amp-img>
               </f:for>
           </div>
       </f:if>
   </vhs:resource.record.fal>

Ein fertiger Template-Abschnitt könnte wie folgt aussehen:

<f:for each="{data.contentElements}" as="contentElement">
    <div class="element">
        <f:if condition="{contentElement.header}">
            <h2>{contentElement.header}</h2>
        </f:if>
        <f:if condition="{contentElement.subheader}">
            <h3>{contentElement.subheader}</h3>
        </f:if>
        <vhs:resource.record.fal table="tt_content" field="image" uid="{contentElement.uid}" as="resources">
            <f:if condition="{f:count(subject: resources)}">
                <div class="images">
                    <f:for each="{resources}" as="resource">
                        <amp-img src="{f:uri.image(src: resource.uid, treatIdAsReference: 1, width: settings.news.image.width, height: settings.news.image.height)}"
                                 width="{settings.news.image.width}"
                                 height="{settings.news.image.height}"
                                 layout="responsive"
                                 alt="{resource.alt}"
                                 title="{resource.title}"></amp-img>
                    </f:for>
                </div>
            </f:if>
        </vhs:resource.record.fal>
        <f:format.html>{contentElement.bodytext}</f:format.html>
    </div>
</f:for>