Loading...
Navigation überspringen

Bilder aus News mit Inhaltselementen anzeigen

Bitte beachte, dass sich diese Dokumentation auf die neuste Version dieser Erweiterung bezieht. Wenn eine ältere Version eingesetzt wird, kann diese abweichen. Die jeweils passende Dokumentation befindet sich im Dokumentation-Verzeichnis der Erweiterung.

Bilder aus News mit Inhaltselementen anzeigen

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

  1. Installiere die Erweiterung VHS.

  2. Bearbeite das Fluid-Partial für die Anzeige der News ( Partials/Library/News.html ) und füge 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. Lese 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>

Kontaktanfrage

Du kannst uns jederzeit kontaktieren

Stop! Playing in the meantime?
Stop! Playing in the meantime?
Stop! Playing in the meantime?

Stop! Playing in the meantime?

Break the highscore

Press Start
Contact request
Screenreader label
Security question
Q46_________LRS______
__D____8____P_M___LEO
136___D2T___2_F______
__N____A____W_T___J8Q
7SO_________5X6______