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">
<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>
<ep:lazyLoadImage image="{city.teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="360c"
height="270c"
alt="{city.name}" />
<f:if condition="{city.teaserImage}">
<f:then>
<ep:lazyLoadImage image="{city.teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
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 class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<span class="headline--3 mb-4">
@@ -6,12 +6,22 @@
<f:section name="Teaser">
<a href="{f:uri.typolink(parameter: concept.detailPage)}" title="{concept.name}" class="flex flex-col">
<div class="relative">
<ep:lazyLoadImage image="{concept.teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
width="360c"
height="270c"
alt="{concept.name}" />
<f:if condition="{concept.teaserImage}">
<f:then>
<ep:lazyLoadImage image="{concept.teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
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="flex h-full w-full p-4 items-end headline--3 text-white">
{concept.name}