Loading...
Skip navigation
Please note that this documentation is for the most recent version of this extension. It may not be relevant for older versions. Related documentation can be found in the documentation directory of the extension.

Show News Images with Content Elements

News images with content elements can be displayed as follows:

  1. Install the VHS extension.

  2. Edit the Fluid-Partial that displays news ( Partials/Library/News.html ) and add the VHS namespace:

    <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. Read in the image resources

    <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>

    The completed template section should look as follows:

    <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>

Contact request

You can contact us at any time

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
CKK_________WEK______
I_F____8____G_____B44
3J3___PE4___MO4______
O_Z____F______T___NSG
6J7_________6MB______