Avoid error in case of missing image

This commit is contained in:
Björn Fromme
2022-03-14 16:59:41 +01:00
parent 5faefb9aa9
commit 845a68f96e
2 changed files with 32 additions and 12 deletions
@@ -9,12 +9,22 @@
<svg class="w-8 h-6 absolute top-0 left-0"> <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-{city.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-{city.country.code -> f:format.case(mode: 'lower')}"></use>
</svg> </svg>
<ep:lazyLoadImage image="{city.teaserImage}" <f:if condition="{city.teaserImage}">
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" <f:then>
class="block w-full h-full object-cover" <ep:lazyLoadImage image="{city.teaserImage}"
width="360c" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
height="270c" class="block w-full h-full object-cover"
alt="{city.name}" /> width="360c"
height="270c"
alt="{city.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
width="360c"
height="270c"
alt="{city.name}"/>
</f:else>
</f:if>
</div> </div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200"> <div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<span class="headline--3 mb-4"> <span class="headline--3 mb-4">
@@ -6,12 +6,22 @@
<f:section name="Teaser"> <f:section name="Teaser">
<a href="{f:uri.typolink(parameter: concept.detailPage)}" title="{concept.name}" class="flex flex-col"> <a href="{f:uri.typolink(parameter: concept.detailPage)}" title="{concept.name}" class="flex flex-col">
<div class="relative"> <div class="relative">
<ep:lazyLoadImage image="{concept.teaserImage}" <f:if condition="{concept.teaserImage}">
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png" <f:then>
class="block w-full h-full object-cover" <ep:lazyLoadImage image="{concept.teaserImage}"
width="360c" loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
height="270c" class="block w-full h-full object-cover"
alt="{concept.name}" /> width="360c"
height="270c"
alt="{concept.name}" />
</f:then>
<f:else>
<f:image src="EXT:ep_theme/Resources/Public/images/lazy.png"
width="360c"
height="270c"
alt="{concept.name}"/>
</f:else>
</f:if>
<div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay"> <div class="absolute top-0 left-0 inset-0 bg-concept-{concept.code}-overlay">
<div class="flex h-full w-full p-4 items-end headline--3 text-white"> <div class="flex h-full w-full p-4 items-end headline--3 text-white">
{concept.name} {concept.name}