From fbcae58e71dc98b8d58f9160c074eaa09493cf67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 8 Sep 2021 10:30:15 +0200
Subject: [PATCH] Adjust news template

---
 .../Partials/News/Detail/MediaContainer.html  | 69 +++++++++++--------
 .../Private/Templates/News/News/Detail.html   | 10 ++-
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html
index f566e4f9..cd88de9d 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html
@@ -4,36 +4,47 @@
 
     <f:alias map="{images: '{media -> v:iterator.filter(propertyName: \'showinpreview\', filter: 0)}'}">
         <f:if condition="{images}">
-            <div class="splide"
-                 data-controller="slider"
-                 data-slider-preset-value="content">
-                <div id="carousel-{id}" class="splide__track">
-                    <ul class="splide__list">
-                        <f:for each="{images}" as="image" iteration="iteration">
-                            <li class="splide__slide">
-                                <f:link.typolink parameter="{image.originalResource.link}"
-                                                 class="relative bg-cover bg-center">
-                                    <img src="{f:uri.image(image: image, width: '770', height: '430c+100')}"
-                                         class="block w-full h-auto"
-                                         alt="{image.alternative}" title="{image.title}">
-                                </f:link.typolink>
-                            </li>
-                        </f:for>
-                    </ul>
-                </div>
-                <f:if condition="{images -> f:count()} > 1">
-                    <div class="hidden md:grid md:grid-cols-5 md:gap-2 md:pt-4 md:pb-8">
-                        <f:for each="{images}" as="image" iteration="iteration">
-                            <f:if condition="{iteration.cycle} <= 5">
-                                <a href="#" class="block" data-slide="{iteration.index}">
-                                    <img src="{f:uri.image(image: image, width: '150', height: '85c+100')}"
-                                         class="block w-full h-auto" alt="{image.alternative}" title="{image.title}">
-                                </a>
-                            </f:if>
-                        </f:for>
+            <f:if condition="{images -> f:count()} == 1">
+                <f:then>
+                    <f:link.typolink parameter="{images.0.originalResource.link}">
+                        <img src="{f:uri.image(image: images.0, width: '770', height: '430c+100')}"
+                             class="block w-full h-auto mb-4"
+                             alt="{images.0.alternative}" title="{images.0.title}">
+                    </f:link.typolink>
+                </f:then>
+                <f:else>
+                    <div class="splide mb-4"
+                         data-controller="slider"
+                         data-slider-preset-value="content">
+                        <div id="carousel-{id}" class="splide__track">
+                            <ul class="splide__list">
+                                <f:for each="{images}" as="image" iteration="iteration">
+                                    <li class="splide__slide">
+                                        <f:link.typolink parameter="{image.originalResource.link}"
+                                                         class="relative bg-cover bg-center">
+                                            <img src="{f:uri.image(image: image, width: '770', height: '430c+100')}"
+                                                 class="block w-full h-auto"
+                                                 alt="{image.alternative}" title="{image.title}">
+                                        </f:link.typolink>
+                                    </li>
+                                </f:for>
+                            </ul>
+                        </div>
+                        <f:if condition="{images -> f:count()} > 1">
+                            <div class="hidden md:grid md:grid-cols-5 md:gap-2 md:pt-4 md:pb-8">
+                                <f:for each="{images}" as="image" iteration="iteration">
+                                    <f:if condition="{iteration.cycle} <= 5">
+                                        <a href="#" class="block" data-slide="{iteration.index}">
+                                            <img src="{f:uri.image(image: image, width: '150', height: '85c+100')}"
+                                                 class="block w-full h-auto" alt="{image.alternative}" title="{image.title}">
+                                        </a>
+                                    </f:if>
+                                </f:for>
+                            </div>
+                        </f:if>
                     </div>
-                </f:if>
-            </div>
+                </f:else>
+            </f:if>
         </f:if>
     </f:alias>
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/News/Detail.html b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/News/Detail.html
index 194f6fbf..b4d1d672 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/News/Detail.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Templates/News/News/Detail.html
@@ -39,21 +39,19 @@
                     </f:if>
                 </p>
                 <f:if condition="{newsItem.teaser}">
-                    <p class="text-lg">
+                    <p class="text-lg mb-4">
                         <f:format.nl2br>{newsItem.teaser}</f:format.nl2br>
                     </p>
                 </f:if>
                 <n:renderMedia news="{newsItem}" imgClass="block w-full h-auto mb-4" videoClass="video-wrapper" audioClass="audio-wrapper">
                     <f:render partial="Detail/MediaContainer" arguments="{media: newsItem.media, settings:settings, id: newsItem.uid}" />
                     <f:format.html>{newsItem.bodytext}</f:format.html>
-                </n:renderMedia>
-                <f:alias map="{contentElements: '{f:cObject(typoscriptObjectPath: \'lib.tx_news.contentElementRendering\', data: newsItem.contentElementIdList)}'}">
-                    <f:if condition="{contentElements}">
+                    <f:if condition="{newsItem.contentElements}">
                         <div class="flex flex-col space-y-4">
-                            {contentElements -> f:format.raw()}
+                            <f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
                         </div>
                     </f:if>
-                </f:alias>
+                </n:renderMedia>
                 <f:if condition="{newsItem.relatedFiles}">
                     <h3 class="headline headline--underlined">
                         Dateien