Use image viewhelpers to provide dimensions
This commit is contained in:
Björn Fromme
@@ -1,31 +1,29 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
{data.flexForm.buttons -> v:iterator.first() -> v:variable.set(name: 'button')}
|
||||
<div class="container-fluid ep-disturber-reminder" data-rte-content>
|
||||
<div>{data.headline}</div>
|
||||
<div class="col-md-6">
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
|
||||
<f:if condition="{image}">
|
||||
<f:then>
|
||||
<img class="scale lazyload"
|
||||
data-src="{f:uri.image(image: image, width: '400')}"
|
||||
width="400"
|
||||
alt="{image.alternative}" title="{image.title}">
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img src="https://placehold.it/600x450" class="scale" alt="">
|
||||
</f:else>
|
||||
</f:if>
|
||||
</a>
|
||||
<f:alias map="{button: data.flexForm.buttons.0}">
|
||||
<div class="container-fluid ep-disturber-reminder" data-rte-content>
|
||||
<div>{data.headline}</div>
|
||||
<div class="col-md-6">
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
|
||||
<f:if condition="{image}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="400"
|
||||
alt="{image.alternative}"
|
||||
title="{image.title}" />
|
||||
</f:if>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 ">
|
||||
<div>{data.text -> f:format.html()}</div>
|
||||
</div>
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info"
|
||||
title="{button.container.label -> f:format.raw()}">{button.container.label -> f:format.raw()}</a>
|
||||
</div>
|
||||
<div class="col-md-6 ">
|
||||
<div>{data.text -> f:format.html()}</div>
|
||||
</div>
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info"
|
||||
title="{button.container.label -> f:format.raw()}">{button.container.label -> f:format.raw()}</a>
|
||||
</div>
|
||||
</f:alias>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
{data.flexForm.buttons -> v:iterator.first() -> v:variable.set(name: 'button')}
|
||||
<div class="container-fluid ep-disturber-reminder" data-rte-content>
|
||||
<div>{data.header}</div>
|
||||
<div class="col-md-6">
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
|
||||
<f:if condition="{teaserImage}">
|
||||
<f:then>
|
||||
<img class="scale lazyload" data-src="{f:uri.image(image: teaserImage, width: '400')}"
|
||||
alt="{teaserImage.alternative}" title="{teaserImage.title}">
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img src="https://placehold.it/600x450" class="scale" alt="">
|
||||
</f:else>
|
||||
</f:if>
|
||||
</a>
|
||||
<f:alias map="{button: data.flexForm.buttons.0}">
|
||||
<div class="container-fluid ep-disturber-reminder" data-rte-content>
|
||||
<div>{data.header}</div>
|
||||
<div class="col-md-6">
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
|
||||
<f:if condition="{teaserImage}">
|
||||
<ep:lazyLoadImage image="{teaserImage}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="400"
|
||||
alt="{teaserImage.alternative}"
|
||||
title="{teaserImage.title}" />
|
||||
</f:if>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 ">
|
||||
<div>{data.bodytext -> f:format.html()}</div>
|
||||
</div>
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info"
|
||||
title="{button.container.label -> f:format.raw()}">{button.container.label -> f:format.raw()}</a>
|
||||
</div>
|
||||
<div class="col-md-6 ">
|
||||
<div>{data.bodytext -> f:format.html()}</div>
|
||||
</div>
|
||||
<a href="{f:uri.typolink(parameter: button.container.link)}" class="btn btn-info"
|
||||
title="{button.container.label -> f:format.raw()}">{button.container.label -> f:format.raw()}</a>
|
||||
</div>
|
||||
</f:alias>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -35,9 +35,11 @@
|
||||
<source srcset="{f:uri.image(image: image, width: '1560')}" media="(min-width: 1280px)">
|
||||
<source srcset="{f:uri.image(image: image, width: '1280')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '1024', cropVariant: 'mobile')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, height: '1024', cropVariant: 'mobile')}"
|
||||
alt="{image.alternative}">
|
||||
<f:image class="block w-full h-full object-cover"
|
||||
image="{image}"
|
||||
height="1024"
|
||||
cropVariant="mobile"
|
||||
alt="{image.alternative}"/>
|
||||
</picture>
|
||||
</f:if>
|
||||
</f:alias>
|
||||
@@ -62,8 +64,9 @@
|
||||
<f:if condition="{settings.eventAddon}">
|
||||
<f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
|
||||
title="{settings.eventAddon.title}">
|
||||
<img src="{f:uri.image(src: settings.eventAddon.file)}"
|
||||
alt="{settings.eventAddon.title}" title="{settings.eventAddon.title}">
|
||||
<f:image src="{settings.eventAddon.file}"
|
||||
alt="{settings.eventAddon.title}"
|
||||
title="{settings.eventAddon.title}"/>
|
||||
</f:link.typolink>
|
||||
</f:if>
|
||||
--></f:comment>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="bg-ep-primary-dark sbw:bg-sbw-primary-80 uch:bg-uch-primary-80 mt-8">
|
||||
@@ -158,11 +159,12 @@
|
||||
href="https://www.unglobalcompact.org/"
|
||||
target="_blank"
|
||||
title="Global Compact">
|
||||
<img class="w-full h-auto lazyload"
|
||||
data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png')}"
|
||||
width="100"
|
||||
height="121"
|
||||
alt="Global Compact"/>
|
||||
<ep:lazyLoadImage src="EXT:ep_theme/Resources/Public/images/global_compact.png"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="100"
|
||||
alt="Global Compact"
|
||||
title="Global Compact" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,9 +9,11 @@
|
||||
<picture>
|
||||
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}"
|
||||
alt="{image.alternative}">
|
||||
<f:image class="block w-full h-full object-cover"
|
||||
image="{image}"
|
||||
height="320"
|
||||
cropVariant="sliderPageHeader"
|
||||
alt="{image.alternative}"/>
|
||||
</picture>
|
||||
</f:if>
|
||||
</f:alias>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="relative mb-4"
|
||||
@@ -15,10 +16,13 @@
|
||||
<f:alias map="{image: images.0}">
|
||||
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
|
||||
data-action="lightbox#open">
|
||||
<img data-src="{f:uri.image(image: image, width: '770', height: '430x+100')}"
|
||||
class="block w-full h-auto lazyload"
|
||||
alt="{image.alternative}"
|
||||
title="{image.title}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="770"
|
||||
height="430c+100"
|
||||
alt="{image.alternative}"
|
||||
title="{image.title}" />
|
||||
</a>
|
||||
</f:alias>
|
||||
<f:if condition="{thumbnails}">
|
||||
@@ -32,8 +36,13 @@
|
||||
data-lightbox-index="{iteration.cycle}"
|
||||
data-lightbox-caption="{image.originalResource.description}"
|
||||
class="block">
|
||||
<f:image image="{image}" width="150" height="85c+100" class="block w-full h-auto"
|
||||
alt="{image.originalResource.alternative}" title="{image.originalResource.title}"/>
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="150"
|
||||
height="85c+100"
|
||||
alt="{image.alternative}"
|
||||
title="{image.title}" />
|
||||
</a>
|
||||
</f:if>
|
||||
</f:for>
|
||||
|
||||
@@ -1,16 +1,28 @@
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<h3>
|
||||
Eigenanreise
|
||||
</h3>
|
||||
{journey.byCar -> f:format.html()}
|
||||
<f:if condition="{journey.image}">
|
||||
<img src="{f:uri.image(image: journey.image, width: '770', height: '430c+100')}"
|
||||
alt="{journey.image.alternative}" title="{journey.image.title}">
|
||||
</f:if>
|
||||
<f:if condition="{journey.byBus}">
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<h3>
|
||||
Busanreise
|
||||
Eigenanreise
|
||||
</h3>
|
||||
{journey.byBus -> f:format.html()}
|
||||
</f:if>
|
||||
</div>
|
||||
{journey.byCar -> f:format.html()}
|
||||
<f:if condition="{journey.image}">
|
||||
<ep:lazyLoadImage image="{journey.image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="770"
|
||||
height="430c+100"
|
||||
alt="{journey.image.alternative}"
|
||||
title="{journey.image.title}" />
|
||||
</f:if>
|
||||
<f:if condition="{journey.byBus}">
|
||||
<h3>
|
||||
Busanreise
|
||||
</h3>
|
||||
{journey.byBus -> f:format.html()}
|
||||
</f:if>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
|
||||
class="block lg:pb-4"
|
||||
title="{settings.defaultTitle}">
|
||||
<img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
|
||||
<f:image class="block h-10 lg:h-12 w-auto" src="{settings.logoImage}" alt="{settings.defaultTitle}"/>
|
||||
</a>
|
||||
<div class="flex lg:hidden items-center space-x-4">
|
||||
<f:if condition="{data.tx_eptheme_hide_searchbar}">
|
||||
|
||||
@@ -13,9 +13,11 @@
|
||||
<picture>
|
||||
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}"
|
||||
alt="{image.alternative}">
|
||||
<f:image class="block w-full h-full object-cover"
|
||||
image="{image}"
|
||||
height="320"
|
||||
cropVariant="sliderPageHeader"
|
||||
alt="{image.alternative}"/>
|
||||
</picture>
|
||||
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
|
||||
<div class="lg:container">
|
||||
@@ -52,9 +54,7 @@
|
||||
<svg class="w-4 h-4 text-white">
|
||||
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-left"></use>
|
||||
</svg>
|
||||
<span>
|
||||
{backlinkLabel}
|
||||
</span>
|
||||
<span>{backlinkLabel}</span>
|
||||
</a>
|
||||
</f:if>
|
||||
</div>
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
<f:if condition="{region.webcam.available}">
|
||||
<div class="bg-gray-50 p-4 mb-8">
|
||||
<p class="font-bold mb-2">
|
||||
Webcam
|
||||
</p>
|
||||
<a href="{region.webcam.url}"
|
||||
data-controller="lightbox"
|
||||
data-action="lightbox#open"
|
||||
data-lightbox-caption="Webcam {region.name}"
|
||||
title="Webcam {region.name}">
|
||||
<img src="{ep:uri.externalImage(url: region.webcam.url)}"
|
||||
width="330"
|
||||
class="block w-full h-auto"/>
|
||||
</a>
|
||||
</div>
|
||||
</f:if>
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:if condition="{region.webcam.available}">
|
||||
<div class="bg-gray-50 p-4 mb-8">
|
||||
<p class="font-bold mb-2">
|
||||
Webcam
|
||||
</p>
|
||||
<a href="{region.webcam.url}"
|
||||
data-controller="lightbox"
|
||||
data-action="lightbox#open"
|
||||
data-lightbox-caption="Webcam {region.name}"
|
||||
title="Webcam {region.name}">
|
||||
<ep:lazyLoadImage src="{region.webcam.url}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="330"
|
||||
alt="Webcam {region.name}"
|
||||
title="Webcam {region.name}" />
|
||||
</a>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
|
||||
class="block lg:pb-4"
|
||||
title="{settings.defaultTitle}">
|
||||
<img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
|
||||
<f:image class="block h-10 lg:h-12 w-auto" src="{settings.logoImage}" alt="{settings.defaultTitle}"/>
|
||||
</a>
|
||||
<button type="button"
|
||||
class="focus:outline-none" data-action="mobile-search#close">
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
<picture>
|
||||
<source srcset="{f:uri.image(image: headerImage, width: '1370c', height: '360')}" media="(min-width: 768px)">
|
||||
<source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)">
|
||||
<img class="block w-full h-full object-cover"
|
||||
src="{f:uri.image(image: headerImage, height: '640')}"
|
||||
alt="{headerImage.alternative}">
|
||||
<f:image class="block w-full h-full object-cover"
|
||||
image="{headerImage}"
|
||||
height="640"
|
||||
alt="{headerImage.alternative}"/>
|
||||
</picture>
|
||||
</f:if>
|
||||
</f:alias>
|
||||
|
||||
@@ -1,22 +1,24 @@
|
||||
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
|
||||
<f:if condition="{teamer -> f:count()} > 0">
|
||||
{teamer -> v:iterator.first() -> v:variable.set(name: 'teamerInCharge')}
|
||||
<div class="bg-gray-50 p-4 mb-4">
|
||||
<p class="font-bold">
|
||||
Teamer vor Ort
|
||||
</p>
|
||||
<f:if condition="{teamerInCharge.image}">
|
||||
<f:then>
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:if condition="{teamer -> f:count()} > 0">
|
||||
{teamer -> v:iterator.first() -> v:variable.set(name: 'teamerInCharge')}
|
||||
<div class="bg-gray-50 p-4 mb-4">
|
||||
<p class="font-bold">
|
||||
Teamer vor Ort
|
||||
</p>
|
||||
<f:if condition="{teamerInCharge.image}">
|
||||
<ep:lazyLoadImage image="{teamerInCharge.image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto mb-4"
|
||||
width="330"
|
||||
alt="{teamerInCharge.name}"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img src="https://placehold.it/330x248" class="img-responsive" alt="{teamerInCharge.name}">
|
||||
</f:else>
|
||||
</f:if>
|
||||
<p>{teamerInCharge.name}</p>
|
||||
</div>
|
||||
</f:if>
|
||||
</f:if>
|
||||
<p>{teamerInCharge.name}</p>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
</html>
|
||||
|
||||
+6
-1
@@ -11,7 +11,12 @@
|
||||
<f:for each="{items}" as="item" iteration="iteration">
|
||||
<div class="lg:flex odd:flex-row-reverse justify-between items-end mb-16">
|
||||
<div class="mb-4 lg:mb-0 lg:w-1/2">
|
||||
<img class="block w-full h-auto lazyload" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
|
||||
<ep:lazyLoadImage image="{item.image.0}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="768"
|
||||
alt="{item.data.name}"
|
||||
title="{item.data.name}" />
|
||||
</div>
|
||||
<div class="lg:w-1/2">
|
||||
<div class="px-4 {f:if(condition: iteration.isEven, then: 'lg:pl-12', else: 'lg:pr-12')}">
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
data-ajax-content-uri-value="{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel}', format: 'html')}">
|
||||
<div class="ajax-content" data-ajax-content-target="container"></div>
|
||||
<div data-ajax-content-target="trigger">
|
||||
<img src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}" alt="Loading" title="Loading">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
|
||||
</div>
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
data-ajax-content-uri-value="{ep:uri.ajax(extensionName: 'epproducts', action: 'eventPricetable', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: productUid}', format: 'html')}">
|
||||
<div class="ajax-content" data-ajax-content-target="container"></div>
|
||||
<div data-ajax-content-target="trigger">
|
||||
<img src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}" alt="Loading" title="Loading">
|
||||
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" title="Loading"/>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<html data-namespace-typo3-fluid="true" lang="en"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
|
||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||
|
||||
<f:layout name="Default"/>
|
||||
@@ -367,10 +368,13 @@
|
||||
data-lightbox-index="{iteration.cycle}"
|
||||
data-lightbox-caption="{image.originalResource.description}"
|
||||
data-action="lightbox#open">
|
||||
<img data-src="{f:uri.image(image: image, width: '160', height: '160c+100')}"
|
||||
class="block w-full h-auto lazyload"
|
||||
alt="{image.alternative}"
|
||||
title="{image.title}">
|
||||
<ep:lazyLoadImage image="{image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto"
|
||||
width="160"
|
||||
height="160c+100"
|
||||
alt="{image.alternative}"
|
||||
title="{image.title}" />
|
||||
</a>
|
||||
</f:for>
|
||||
</div>
|
||||
|
||||
@@ -28,18 +28,13 @@
|
||||
arguments: '{member: member}'
|
||||
)}">
|
||||
<f:if condition="{member.image}">
|
||||
<f:then>
|
||||
<img data-src="{f:uri.image(image: member.image, width: '400', height: '400c')}"
|
||||
class="rounded-full block w-full h-auto lazyload"
|
||||
title="{member.name}"
|
||||
alt="{member.name}">
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img class="rounded-full block w-full h-auto lazyload"
|
||||
src="https://placehold.it/400x400"
|
||||
title="{member.name}"
|
||||
alt="{member.name}">
|
||||
</f:else>
|
||||
<ep:lazyLoadImage image="{member.image}"
|
||||
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
|
||||
class="block w-full h-auto rounded-full"
|
||||
width="400"
|
||||
height="400c"
|
||||
alt="{member.name}"
|
||||
title="{member.name}" />
|
||||
</f:if>
|
||||
<div class="text-center text-gray-800">
|
||||
<span class="block mb-2">
|
||||
|
||||
@@ -12,12 +12,7 @@
|
||||
<div class="grid grid-cols-3 gap-8">
|
||||
<div class="col-span-3 md:col-span-1">
|
||||
<f:if condition="{member.image}">
|
||||
<f:then>
|
||||
<f:image class="rounded-full" image="{member.image}" width="400" height="400c" title="{member.name}" alt="{member.name}"/>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<img class="rounded-full" src="https://placehold.it/400x400" alt="{member.name}">
|
||||
</f:else>
|
||||
<f:image class="rounded-full" image="{member.image}" width="400" height="400c" title="{member.name}" alt="{member.name}"/>
|
||||
</f:if>
|
||||
</div>
|
||||
<div class="col-span-3 md:col-span-2">
|
||||
|
||||
Reference in New Issue
Block a user