TYPO3 AMP Extension

TYPO3 - AMP

Tweet

Zur Produkt Seite

 

Produkt Übersicht

 

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>