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>