diff --git a/Resources/Private/Partials/TeaserOverview.html b/Resources/Private/Partials/TeaserOverview.html
index 4e03004065148e343c4466d0a756d405e676185c..11830f41ce35e92eb3e61aa2c457239874a0fc9f 100644
--- a/Resources/Private/Partials/TeaserOverview.html
+++ b/Resources/Private/Partials/TeaserOverview.html
@@ -4,7 +4,7 @@
<!--
Usage Example:
- <f:render partial="Teaser" arguments="{
+ <f:render partial="TeaserOverview" arguments="{
newsMetaData: newsMetaData,
headerTag: '<h3>',
closingHeaderTag: '</h3>',
@@ -19,76 +19,83 @@
-->
</f:comment>
-<f:variable name="singleViewUri"><f:uri.page pageUid="{newsMetaData.news.uid}" /></f:variable>
+<f:link.page pageUid="{newsMetaData.news.uid}">
+ <f:if condition="{newsMetaData.imageObject}">
+ <f:render section="sgSlideImage"
+ arguments="{file: newsMetaData.imageObject, phone: '500c', tablet: '500c', desktop: '600c'}" />
+ </f:if>
-<a href="{singleViewUri}">
- <div class="tx-sgnews-single-header {f:if(condition: newsMetaData.imageObject, then: 'tx-sgnews-single-header-image')}">
- <f:if condition="{newsMetaData.imageObject}">
- <div class="tx-sgnews-single-image">
- <picture>
- <source media="(max-width: 1200px)"
- srcset="{f:uri.image(src: newsMetaData.imageObject.uid, treatIdAsReference: '1', width: '1200c', height: '403c', cropVariant: 'small')}">
- <f:image image="{newsMetaData.imageObject}" alt="" width="1845c"
- height="619c" cropVariant="large"/>
- </picture>
+ <div class="sg-slide-content sg-slide-backdrop-dark">
+ <div class="frame frame-default frame-type-textmedia frame-layout-0 default-content-element">
+ <div class="text-center">
+ {headerTag -> f:format.raw()}
+ {newsMetaData.news.subtitleWithFallbackToTitle}
+ {closingHeaderTag -> f:format.raw()}
</div>
- </f:if>
- <div class="tx-sgnews-single-header-content">
- <div class="tx-sgnews-teaser-title">
- <h1>{newsMetaData.news.subtitleWithFallbackToTitle}</h1>
- </div>
- <div class="tx-sgnews-teaser">
- <div class="tx-sgnews-teaser-inner">
- <div class="tx-sgnews-teaser-meta">
- <span class="author">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#FFF" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>
- <f:if condition="{newsMetaData.news.newsAuthor.frontendUser}">
+
+
+ <p class="text-center tx-sgnews-teaser-meta">
+ <f:if condition="{newsMetaData.news.newsAuthor.frontendUser} || {newsMetaData.news.newsAuthor.nameAndRespectFrontendUser}">
+ <span class="author">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#FFF" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>
+ <f:if condition="{newsMetaData.news.newsAuthor.frontendUser}">
+ <f:then>
+ <f:if condition="{newsMetaData.news.newsAuthor.frontendUser.www}">
<f:then>
- <f:if condition="{newsMetaData.news.newsAuthor.frontendUser.www}">
- <f:then>
- <f:link.page pageUid="{newsMetaData.news.newsAuthor.frontendUser.www}">
- {newsMetaData.news.newsAuthor.frontendUser.name}
- </f:link.page>
- </f:then>
- <f:else>
- {newsMetaData.news.newsAuthor.frontendUser.name}
- </f:else>
- </f:if>
+ <f:link.page pageUid="{newsMetaData.news.newsAuthor.frontendUser.www}">
+ {newsMetaData.news.newsAuthor.frontendUser.name}
+ </f:link.page>
</f:then>
<f:else>
- {newsMetaData.news.newsAuthor.nameAndRespectFrontendUser}
+ {newsMetaData.news.newsAuthor.frontendUser.name}
</f:else>
</f:if>
- </span>
-
- <f:if condition="{newsMetaData.news.location}">
- <span class="location">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#FFF" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"/></svg>
- {newsMetaData.news.location}
- </span>
+ </f:then>
+ <f:else>
+ {newsMetaData.news.newsAuthor.nameAndRespectFrontendUser}
+ </f:else>
</f:if>
+ </span>
+ </f:if>
- <span class="date">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FFF" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm57.1 350.1L224.9 294c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v137.7l63.5 46.2c5.4 3.9 6.5 11.4 2.6 16.8l-28.2 38.8c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>
- <f:format.date format="{f:translate(key:'frontend.dateformat')}">{newsMetaData.news.lastUpdated}</f:format.date>
- </span>
+ <f:if condition="{newsMetaData.news.location}">
+ <span class="location">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#FFF" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z"/></svg>
+ {newsMetaData.news.location}
+ </span>
+ </f:if>
- <span class="category">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FFF" d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>
- {newsMetaData.category.subtitleWithFallbackToTitle}
- </span>
- <f:if condition="{newsMetaData.news.tags}">
- <br />
- <span class="tags">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="#FFF" d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"/></svg>
- <f:for each="{newsMetaData.news.tags}" as="tag" iteration="it">
- {tag.title}<f:if condition="{it.isLast}"><f:else>, </f:else></f:if>
- </f:for>
- </span>
- </f:if>
- </div>
- </div>
- </div>
+ <span class="date">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FFF" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm57.1 350.1L224.9 294c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v137.7l63.5 46.2c5.4 3.9 6.5 11.4 2.6 16.8l-28.2 38.8c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>
+ <f:format.date format="{f:translate(key:'frontend.dateformat')}">{newsMetaData.news.lastUpdated}</f:format.date>
+ </span>
+
+ <span class="category">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#FFF" d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/></svg>
+ {newsMetaData.category.subtitleWithFallbackToTitle}
+ </span>
+
+ <f:if condition="{newsMetaData.news.tags}">
+ <br />
+ <span class="tags">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="#FFF" d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"/></svg>
+ <f:for each="{newsMetaData.news.tags}" as="tag" iteration="it">
+ {tag.title}<f:if condition="{it.isLast}"><f:else>, </f:else></f:if>
+ </f:for>
+ </span>
+ </f:if>
+ </p>
</div>
</div>
-</a>
+</f:link.page>
+
+<f:section name="sgSlideImage">
+ <picture>
+ <source media="(max-width: 600px)"
+ srcset="{f:uri.image(image: file, height: '{phone}', cropVariant: 'small')}">
+ <source media="(max-width: 1024px)"
+ srcset="{f:uri.image(image: file, height: '{tablet}', cropVariant: 'medium')}">
+ <f:image image="{file}" alt="{file.alternative}" title="{file.title}" width="1568c"
+ height="{desktop}" class="sg-slide-image" cropVariant="large" />
+ </picture>
+</f:section>
diff --git a/Resources/Private/Templates/Latest/Index.html b/Resources/Private/Templates/Latest/Index.html
index a730b911f1b03e325d8c876d7e5f363f4a3aecef..8cabec724e55b6270bb02442fb9768bbb211975d 100644
--- a/Resources/Private/Templates/Latest/Index.html
+++ b/Resources/Private/Templates/Latest/Index.html
@@ -1,42 +1,29 @@
<f:layout name="Default" />
<f:section name="main">
- <div id="carousel-latest-news" class="carousel slide carousel-stretch" data-ride="carousel" data-interval="0">
- <f:if condition="{newsMetaData -> f:count()} > 1">
- <ol class="carousel-indicators">
+ <div id="carousel-latest-news" class="sg-slide-element sg-slide-not-initialized" data-interval="0">
+ <div class="sg-slide-track">
+ <div class="sg-slide-container">
<f:for each="{newsMetaData}" as="newsMetaDataEntry" iteration="iterator">
- <li data-target="#carousel-latest-news" data-slide-to="{iterator.index}" class="{f:if(condition: '{iterator.isFirst}', then: 'active')}"></li>
+ <div class="sg-slide {f:if(condition: '{iterator.isFirst}', then: 'active')}">
+ <f:render partial="TeaserOverview" arguments="{
+ newsMetaData: newsMetaDataEntry,
+ headerTag: '<h3>',
+ closingHeaderTag: '</h3>',
+ showCategory: 1
+ }" />
+ </div>
</f:for>
- </ol>
- </f:if>
-
- <div class="carousel-inner" role="listbox">
- <f:for each="{newsMetaData}" as="newsMetaDataEntry" iteration="iterator">
- <div class="item {f:if(condition: '{iterator.isFirst}', then: 'active')}">
- <f:render partial="TeaserOverview" arguments="{
- newsMetaData: newsMetaDataEntry,
- headerTag: '<h3>',
- closingHeaderTag: '</h3>',
- showCategory: 1
- }" />
- </div>
- </f:for>
+ </div>
</div>
<f:if condition="{newsMetaData -> f:count()} > 1">
- <a class="left carousel-control" href="#carousel-latest-news" role="button" data-slide="prev">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="30" height="44">
- <path fill="#FFF" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/>
- </svg>
- <span class="sr-only">Previous</span>
- </a>
-
- <a class="right carousel-control" href="#carousel-latest-news" role="button" data-slide="next">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="30" height="44">
- <path fill="#FFF" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/>
- </svg>
- <span class="sr-only">Next</span>
- </a>
+ <div class="sg-slide-prev">
+ <i class="fa fa-angle-left fa-5x" aria-hidden="true"><span class="sr-only">Previous</span></i>
+ </div>
+ <div class="sg-slide-next">
+ <i class="fa fa-angle-right fa-5x" aria-hidden="true"><span class="sr-only">Next</span></i>
+ </div>
</f:if>
</div>
</f:section>