EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adobt new teaser rendering

Browse Source
This commit is contained in:
Björn Fromme
2022-03-09 14:06:24 +01:00
parent 54a61d97b4
commit c30d707d80
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html
+12 -9
View File
@@ -6,28 +6,31 @@
<f:layout name="Bare"/> <f:layout name="Bare"/>
<f:section name="Main"> <f:section name="Main">
<f:link.typolink class="teaserbox teaserbox--country" parameter="{country.detailPage}" title="{country.name}"> <a href="{f:uri.typolink(parameter: country.detailPage)}" class="flex flex-col group">
<div class="teaserbox__image"> <div class="relative">
<svg class="teaserbox__flag"> <svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use>
</svg> </svg>
<f:if condition="{country.teaserImages}">
<ep:lazyLoadImage image="{country.teaserImages.0}" <ep:lazyLoadImage image="{country.teaserImages.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover" class="block w-full h-full object-cover"
width="360c" width="360c"
height="270c" height="270c"
alt="{country.name}" /> alt="{country.name}" />
</f:if>
</div> </div>
<div class="teaserbox__main"> <div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
<span class="headline headline--3">{country.name}</span> <span class="headline--3 mb-4">
<hr> {country.name}
</span>
{country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()} {country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div> </div>
<button type="button" <button type="button"
class="button button--full teaserbox__button"> class="button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')} {data.button -> v:or(alternative: 'Details')}
</button> </button>
</f:link.typolink> </a>
</f:section> </f:section>
</html> </html>