Assign cropvariants for ep-reisen

This commit is contained in:
Björn Fromme
2018-09-21 21:48:50 +02:00
parent 204b8123c0
commit 98a7f5c67d
26 changed files with 107 additions and 195 deletions
@@ -274,17 +274,9 @@ return [
'default' => [ 'default' => [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'teaserEven' => [ 'teaser' => [
'title' => 'Teaser gerade', 'title' => 'Teaser',
'value' => 1.3333333333333334, 'value' => 2,
],
'teaserOdd' => [
'title' => 'Teaser ungerade',
'value' => 2.0555555555555556,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -323,16 +315,8 @@ return [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'headerLarge' => [ 'headerLarge' => [
'title' => 'Header groß', 'title' => 'Header',
'value' => 2.3333333333333334, 'value' => 3.8,
],
'headerSmall' => [
'title' => 'Header klein',
'value' => 3.3333333333333334,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -271,17 +271,9 @@ return [
'default' => [ 'default' => [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'teaserEven' => [ 'teaser' => [
'title' => 'Teaser gerade', 'title' => 'Teaser',
'value' => 1.3333333333333334, 'value' => 2,
],
'teaserOdd' => [
'title' => 'Teaser ungerade',
'value' => 2.0555555555555556,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -320,16 +312,8 @@ return [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'headerLarge' => [ 'headerLarge' => [
'title' => 'Header groß', 'title' => 'Header',
'value' => 2.3333333333333334, 'value' => 3.8,
],
'headerSmall' => [
'title' => 'Header klein',
'value' => 3.3333333333333334,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -290,17 +290,9 @@ return [
'default' => [ 'default' => [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'teaserEven' => [ 'teaser' => [
'title' => 'Teaser gerade', 'title' => 'Teaser',
'value' => 1.3333333333333334, 'value' => 2,
],
'teaserOdd' => [
'title' => 'Teaser ungerade',
'value' => 2.0555555555555556,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -339,16 +331,8 @@ return [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'headerLarge' => [ 'headerLarge' => [
'title' => 'Header groß', 'title' => 'Header',
'value' => 2.3333333333333334, 'value' => 3.8,
],
'headerSmall' => [
'title' => 'Header klein',
'value' => 3.3333333333333334,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -391,17 +391,9 @@ return [
'default' => [ 'default' => [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'teaserEven' => [ 'teaser' => [
'title' => 'Teaser gerade', 'title' => 'Teaser',
'value' => 1.3333333333333334, 'value' => 2,
],
'teaserOdd' => [
'title' => 'Teaser ungerade',
'value' => 2.0555555555555556,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -440,16 +432,8 @@ return [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'headerLarge' => [ 'headerLarge' => [
'title' => 'Header groß', 'title' => 'Header',
'value' => 2.3333333333333334, 'value' => 3.8,
],
'headerSmall' => [
'title' => 'Header klein',
'value' => 3.3333333333333334,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -343,17 +343,9 @@ return [
'default' => [ 'default' => [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'teaserEven' => [ 'teaser' => [
'title' => 'Teaser gerade', 'title' => 'Teaser',
'value' => 1.3333333333333334, 'value' => 2,
],
'teaserOdd' => [
'title' => 'Teaser ungerade',
'value' => 2.0555555555555556,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -392,16 +384,8 @@ return [
'title' => 'Alle Geräte', 'title' => 'Alle Geräte',
'allowedAspectRatios' => [ 'allowedAspectRatios' => [
'headerLarge' => [ 'headerLarge' => [
'title' => 'Header groß', 'title' => 'Header',
'value' => 2.3333333333333334, 'value' => 3.8,
],
'headerSmall' => [
'title' => 'Header klein',
'value' => 3.3333333333333334,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
], ],
], ],
], ],
@@ -10,8 +10,8 @@
<div class="slider__items"> <div class="slider__items">
<f:alias map="{image: images.0}"> <f:alias map="{image: images.0}">
<a href="#" data-trigger="gallery-{id}"> <a href="#" data-trigger="gallery-{id}">
<f:image image="{image}" crop="{image.crop}" width="770" height="430c+100" <f:image image="{image}" width="770" height="430c+100" class="slider__image"
class="slider__image" alt="{image.alternative}" title="{image.title}"/> alt="{image.alternative}" title="{image.title}"/>
</a> </a>
</f:alias> </f:alias>
</div> </div>
@@ -20,10 +20,10 @@
<div class="slider__thumbs hidden-sm hidden-xs"> <div class="slider__thumbs hidden-sm hidden-xs">
<f:for each="{images}" as="image" iteration="iteration"> <f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} <= 5"> <f:if condition="{iteration.cycle} <= 5">
<a href="{f:uri.image(image: image, crop: image.crop, maxWidth: '2560')}" <a href="{f:uri.image(image: image, maxWidth: '2560')}"
data-fancybox="gallery-{id}" class="slider__thumb"> data-fancybox="gallery-{id}" class="slider__thumb">
<f:image image="{image}" crop="{image.crop}" width="150" height="85c+100" <f:image image="{image}" width="150" height="85c+100" class="img-responsive"
class="img-responsive" alt="{image.alternative}" title="{image.title}"/> alt="{image.alternative}" title="{image.title}"/>
</a> </a>
</f:if> </f:if>
</f:for> </f:for>
@@ -36,14 +36,14 @@
<f:if condition="{images -> f:count()} == 1"> <f:if condition="{images -> f:count()} == 1">
<f:then> <f:then>
<f:alias map="{image: images.0}"> <f:alias map="{image: images.0}">
<a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, crop: image.crop, maxWidth: '2560')}" <a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, maxWidth: '2560')}"
title="{image.title}">1</a> title="{image.title}">1</a>
</f:alias> </f:alias>
</f:then> </f:then>
<f:else> <f:else>
<f:for each="{images}" as="image" iteration="iteration"> <f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} > 5"> <f:if condition="{iteration.cycle} > 5">
<a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, crop: image.crop, maxWidth: '2560')}" <a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, maxWidth: '2560')}"
title="{image.title}">{iteration.index}</a> title="{image.title}">{iteration.index}</a>
</f:if> </f:if>
</f:for> </f:for>
@@ -52,7 +52,7 @@
</f:then> </f:then>
<f:else> <f:else>
<f:for each="{images}" as="image"> <f:for each="{images}" as="image">
<a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, crop: image.crop, maxWidth: '2560')}" <a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, maxWidth: '2560')}"
title="{image.title}">{iteration.index}</a> title="{image.title}">{iteration.index}</a>
</f:for> </f:for>
</f:else> </f:else>
@@ -11,7 +11,8 @@
<div class="col-md-6"> <div class="col-md-6">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<f:then> <f:then>
<img class="lazy" data-src="{f:uri.image(src: teaserImage.uid, treatIdAsReference: 1, crop: teaserImage.crop, width: '400', height: '400c')}" alt="{teaserImage.alternative}" title="{teaserImage.title}"> <img class="lazy" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/800x600" alt=""> <img src="https://placehold.it/800x600" alt="">
@@ -11,7 +11,8 @@
<a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}"> <a href="{f:uri.typolink(parameter: button.container.link)}" title="{button.container.label -> f:format.raw()}">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<f:then> <f:then>
<img class="scale lazy" data-src="{f:uri.image(src: teaserImage.uid, treatIdAsReference: 1, crop: teaserImage.crop, width: '400')}" alt="{teaserImage.alternative}" title="{teaserImage.title}"> <img class="scale lazy" data-src="{f:uri.image(image: teaserImage, width: '400')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/600x450" class="scale" alt=""> <img src="https://placehold.it/600x450" class="scale" alt="">
@@ -22,7 +23,8 @@
<div class="col-md-6 "> <div class="col-md-6 ">
<div>{data.bodytext -> f:format.html()}</div> <div>{data.bodytext -> f:format.html()}</div>
</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> <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>
</f:section> </f:section>
@@ -11,7 +11,8 @@
<div class="col-sm-2"> <div class="col-sm-2">
<f:if condition="{teaserImage}"> <f:if condition="{teaserImage}">
<f:then> <f:then>
<img class="scale lazy" data-src="{f:uri.image(src: teaserImage.uid, treatIdAsReference: 1, crop: teaserImage.crop, width: '400', height: '400c')}" alt="{teaserImage.alternative}" title="{teaserImage.title}"> <img class="scale lazy" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then> </f:then>
<f:else> <f:else>
<img class="scale" src="https://placehold.it/800x600" alt=""> <img class="scale" src="https://placehold.it/800x600" alt="">
@@ -15,7 +15,8 @@
{slides -> v:iterator.first() -> v:variable.set(name: 'slide')} {slides -> v:iterator.first() -> v:variable.set(name: 'slide')}
<f:if condition="{slide.image.0}"> <f:if condition="{slide.image.0}">
<f:then> <f:then>
<img src="{f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, width: '1370')}" alt="{slide.image.0.alternative}" title="{slide.image.0.title}"> <img src="{f:uri.image(image: slide.image.0, width: '1370')}"
alt="{slide.image.0.alternative}" title="{slide.image.0.title}">
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/1370x700" alt=""> <img src="https://placehold.it/1370x700" alt="">
@@ -4,9 +4,11 @@
<f:for each="{slides}" as="slide" iteration="iteration"> <f:for each="{slides}" as="slide" iteration="iteration">
<div class="slider__item"> <div class="slider__item">
<div class="herounit"> <div class="herounit">
<div class="herounit__image responsive-bg" style="background-image: url({f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, height: '240')})" <f:alias map="{image: slide.image.0}">
data-mobile="{f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, height: '240')}" <div class="herounit__image responsive-bg" style="background-image: url({f:uri.image(image: image, height: '240')})"
data-desktop="{f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, width: '1370')}"></div> data-mobile="{f:uri.image(image: image, height: '240')}"
data-desktop="{f:uri.image(image: image, width: '1370')}"></div>
</f:alias>
<div class="herounit__main"> <div class="herounit__main">
<div class="herounit__inner"> <div class="herounit__inner">
<div class="header-caption"> <div class="header-caption">
@@ -1,10 +1,12 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers} {namespace v=FluidTYPO3\Vhs\ViewHelpers}
{slides -> v:iterator.first() -> v:variable.set(name: 'slide')} {slides -> v:iterator.first() -> v:variable.set(name: 'slide')}
<div class="pagehead"> <div class="pagehead">
<div class="pagehead__image responsive-bg" <f:alias map="{image: slide.image.0}">
style="background-image: url({f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, height: '240')})" <div class="pagehead__image responsive-bg"
data-mobile="{f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, height: '240')}" style="background-image: url({f:uri.image(image: image, height: '240')})"
data-desktop="{f:uri.image(src: slide.image.0.uid, treatIdAsReference: 1, crop: slide.image.0.crop, width: '1370')}"></div> data-mobile="{f:uri.image(image: image, height: '240')}"
data-desktop="{f:uri.image(image: image, width: '1370')}"></div>
</f:alias>
<div class="pagehead__main"> <div class="pagehead__main">
<div class="pagehead__inner"> <div class="pagehead__inner">
<div class="header-caption"> <div class="header-caption">
@@ -136,20 +136,16 @@
<f:alias map="{image: item.hotel.images.original.0}"> <f:alias map="{image: item.hotel.images.original.0}">
<picture class="searchresult-item__image"> <picture class="searchresult-item__image">
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '220', height: '130c-100'
crop: image.crop, width: '220', height: '130c-100'
)} 220w"/> )} 220w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '280', height: '220c-100'
crop: image.crop, width: '280', height: '220c-100'
)} 280w"/> )} 280w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '260', height: '200c-100'
crop: image.crop, width: '260', height: '200c-100'
)} 260w"/> )} 260w"/>
<img class="scale" src="{f:uri.image( <img class="scale" src="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '260', height: '200c-100'
crop: image.crop, width: '260', height: '200c-100'
)}" title="{image.title}" alt="{image.alternative}"> )}" title="{image.title}" alt="{image.alternative}">
</picture> </picture>
</f:alias> </f:alias>
@@ -4,7 +4,7 @@
<h2>Eigenanreise</h2> <h2>Eigenanreise</h2>
{journey.byCar -> f:format.html()} {journey.byCar -> f:format.html()}
<f:if condition="{journey.image}"> <f:if condition="{journey.image}">
<img src="{f:uri.image(src: journey.image.uid, treatIdAsReference: 1, crop: journey.image.crop, width: '770', height: '430c+100')}" <img src="{f:uri.image(image: journey.image, width: '770', height: '430c+100')}"
alt="{journey.image.alternative}" title="{journey.image.title}"> alt="{journey.image.alternative}" title="{journey.image.title}">
</f:if> </f:if>
<f:if condition="{journey.byBus}"> <f:if condition="{journey.byBus}">
@@ -8,7 +8,7 @@
<div id="carousel-{id}" class="slider__items"> <div id="carousel-{id}" class="slider__items">
<f:for each="{images}" as="image" iteration="iteration"> <f:for each="{images}" as="image" iteration="iteration">
<f:link.typolink parameter="{image.originalResource.link}" class="slider__item"> <f:link.typolink parameter="{image.originalResource.link}" class="slider__item">
<img src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '770', height: '430c+100')}" <img src="{f:uri.image(image: image, width: '770', height: '430c+100')}"
class="slider__image" alt="{image.alternative}" title="{image.title}"> class="slider__image" alt="{image.alternative}" title="{image.title}">
</f:link.typolink> </f:link.typolink>
</f:for> </f:for>
@@ -18,7 +18,7 @@
<f:for each="{images}" as="image" iteration="iteration"> <f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} <= 5"> <f:if condition="{iteration.cycle} <= 5">
<a href="#" class="slider__thumb" data-slide="{iteration.index}"> <a href="#" class="slider__thumb" data-slide="{iteration.index}">
<img src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '150', height: '85c+100')}" <img src="{f:uri.image(image: image, width: '150', height: '85c+100')}"
class="img-responsive" alt="{image.alternative}" title="{image.title}"> class="img-responsive" alt="{image.alternative}" title="{image.title}">
</a> </a>
</f:if> </f:if>
@@ -7,9 +7,9 @@
<div class="slider__items"> <div class="slider__items">
<f:for each="{product.images}" as="image" iteration="iteration"> <f:for each="{product.images}" as="image" iteration="iteration">
<div class="slider__item slider__item--product responsive-bg" <div class="slider__item slider__item--product responsive-bg"
style="background-image: url({f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '400', height: '200c')})" style="background-image: url({f:uri.image(image: image, width: '400', height: '200c')})"
data-mobile="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '400', height: '180c')}" data-mobile="{f:uri.image(image: image, width: '400', height: '180c')}"
data-desktop="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '1370')}"> data-desktop="{f:uri.image(image: image, width: '1370')}">
</div> </div>
</f:for> </f:for>
</div> </div>
@@ -112,20 +112,16 @@
<f:section name="PictureTag"> <f:section name="PictureTag">
<picture class="searchresult-item__image"> <picture class="searchresult-item__image">
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '220', height: '130c-100'
crop: image.crop, width: '220', height: '130c-100'
)} 220w"/> )} 220w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '280', height: '220c-100'
crop: image.crop, width: '280', height: '220c-100'
)} 280w"/> )} 280w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '260', height: '200c-100'
crop: image.crop, width: '260', height: '200c-100'
)} 260w"/> )} 260w"/>
<img class="scale" src="{f:uri.image( <img class="scale" src="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '260', height: '200c-100'
crop: image.crop, width: '260', height: '200c-100'
)}" title="{image.title}" alt="{image.alternative}"> )}" title="{image.title}" alt="{image.alternative}">
</picture> </picture>
</f:section> </f:section>
@@ -7,12 +7,7 @@
data-fancybox="regionmap-{region.uid}" data-caption="Pistenplan {region.name}" data-fancybox="regionmap-{region.uid}" data-caption="Pistenplan {region.name}"
title="Pistenplan {region.name}"> title="Pistenplan {region.name}">
<img class="img-responsive lazy" <img class="img-responsive lazy"
data-src="{f:uri.image( data-src="{f:uri.image(image: regionMap, width: '330')}"
src: regionMap.uid,
treatIdAsReference: 1,
crop: regionMap.crop,
width: '330'
)}"
alt="{regionMap.alternative}" alt="{regionMap.alternative}"
title="{regionMap.title}"> title="{regionMap.title}">
</a> </a>
@@ -3,9 +3,9 @@
<div class="pagehead"> <div class="pagehead">
<f:if condition="{headerImage.uid}"> <f:if condition="{headerImage.uid}">
<div class="pagehead__image responsive-bg" <div class="pagehead__image responsive-bg"
style="background-image: url({f:uri.image(src: headerImage.uid, treatIdAsReference: 1, crop: headerImage.crop, height: '240')})" style="background-image: url({f:uri.image(src: headerImage, height: '240')})"
data-mobile="{f:uri.image(src: headerImage.uid, treatIdAsReference: 1, crop: headerImage.crop, height: '240')}" data-mobile="{f:uri.image(src: headerImage, height: '240')}"
data-desktop="{f:uri.image(src: headerImage.uid, treatIdAsReference: 1, crop: headerImage.crop, width: '1370')}"></div> data-desktop="{f:uri.image(src: headerImage, width: '1370')}"></div>
</f:if> </f:if>
<div class="pagehead__main"> <div class="pagehead__main">
<div class="pagehead__inner"> <div class="pagehead__inner">
@@ -2,28 +2,22 @@
<f:then> <f:then>
<picture> <picture>
<source media="(max-width: 512px)" srcset="{f:uri.image( <source media="(max-width: 512px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '350', height: '175c-100'
crop: image.crop, width: '350', height: '175c-100'
)} 350w"/> )} 350w"/>
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '500', height: '250c-100'
crop: image.crop, width: '500', height: '250c-100'
)} 500w"/> )} 500w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image( <source media="(max-width: 991px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '360', height: '200c-100'
crop: image.crop, width: '360', height: '200c-100'
)} 360w"/> )} 360w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '320', height: '160c-100'
crop: image.crop, width: '320', height: '160c-100'
)} 320w"/> )} 320w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '370', height: '220c-100'
crop: image.crop, width: '370', height: '220c-100'
)} 370w"/> )} 370w"/>
<img class="scale" srcset="{f:uri.image( <img class="scale" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '500', height: '250c-100'
crop: image.crop, width: '500', height: '250c-100'
)}" title="{image.title}" alt="{image.alternative}"> )}" title="{image.title}" alt="{image.alternative}">
</picture> </picture>
</f:then> </f:then>
@@ -2,24 +2,19 @@
<f:then> <f:then>
<picture class="product-teaser__image"> <picture class="product-teaser__image">
<source media="(max-width: 768px)" srcset="{f:uri.image( <source media="(max-width: 768px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '320', height: '140c-100'
crop: image.crop, width: '320', height: '140c-100'
)} 320w"/> )} 320w"/>
<source media="(max-width: 991px)" srcset="{f:uri.image( <source media="(max-width: 991px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '260', height: '220c-100'
crop: image.crop, width: '260', height: '220c-100'
)} 260w"/> )} 260w"/>
<source media="(max-width: 1200px)" srcset="{f:uri.image( <source media="(max-width: 1200px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '220', height: '130c-100'
crop: image.crop, width: '220', height: '130c-100'
)} 220w"/> )} 220w"/>
<source media="(min-width: 1201px)" srcset="{f:uri.image( <source media="(min-width: 1201px)" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '320', height: '200c-100'
crop: image.crop, width: '320', height: '200c-100'
)} 320w"/> )} 320w"/>
<img class="scale" srcset="{f:uri.image( <img class="scale" srcset="{f:uri.image(
src: image.uid, treatIdAsReference: 1, image: image, width: '260', height: '160c-100'
crop: image.crop, width: '260', height: '160c-100'
)}" title="{image.title}" alt="{image.alternative}"> )}" title="{image.title}" alt="{image.alternative}">
</picture> </picture>
</f:then> </f:then>
@@ -9,7 +9,7 @@
<f:if condition="{files}"> <f:if condition="{files}">
<f:link.typolink parameter="{files.0.link}"> <f:link.typolink parameter="{files.0.link}">
<img class="img-responsive lazy" <img class="img-responsive lazy"
data-src="{f:uri.image(src: files.0.uid, treatIdAsReference: 1, crop: files.0.crop, maxWidth: '770')}" data-src="{f:uri.image(image: files.0, maxWidth: '770')}"
alt="{files.0.originalResource.alternative}" alt="{files.0.originalResource.alternative}"
title="{files.0.originalResource.title}" title="{files.0.originalResource.title}"
> >
@@ -14,14 +14,14 @@
<div class="ep-tile-right"> <div class="ep-tile-right">
<div class="ep-tile-right"> <div class="ep-tile-right">
<f:if condition="{images.0}"> <f:if condition="{images.0}">
<div class="ep-tile ep-tile-bottom" style="background-image:url('{f:uri.image(src: images.0.uid, treatIdAsReference: 1, crop: images.0.crop)}');"> <div class="ep-tile ep-tile-bottom" style="background-image:url('{f:uri.image(image: images.0)}');">
<f:link.typolink parameter="{images.0.link}" title="{images.0.title -> f:format.raw()}"> <f:link.typolink parameter="{images.0.link}" title="{images.0.title -> f:format.raw()}">
{images.0.title -> f:format.raw()} {images.0.title -> f:format.raw()}
</f:link.typolink> </f:link.typolink>
</div> </div>
</f:if> </f:if>
<f:if condition="{images.1}"> <f:if condition="{images.1}">
<div class="ep-tile" style="background-image:url('{f:uri.image(src: images.1.uid, treatIdAsReference: 1, crop: images.1.crop)}');"> <div class="ep-tile" style="background-image:url('{f:uri.image(image: images.1)}');">
<f:link.typolink parameter="{images.1.link}" title="{images.1.title -> f:format.raw()}"> <f:link.typolink parameter="{images.1.link}" title="{images.1.title -> f:format.raw()}">
{images.1.title -> f:format.raw()} {images.1.title -> f:format.raw()}
</f:link.typolink> </f:link.typolink>
@@ -29,7 +29,7 @@
</f:if> </f:if>
</div> </div>
<f:if condition="{images.2}"> <f:if condition="{images.2}">
<div class="ep-tile" style="background-image:url('{f:uri.image(src: images.2.uid, treatIdAsReference: 1, crop: images.2.crop)}');"> <div class="ep-tile" style="background-image:url('{f:uri.image(image: images.2)}');">
<f:link.typolink parameter="{images.2.link}" title="{images.2.title -> f:format.raw()}"> <f:link.typolink parameter="{images.2.link}" title="{images.2.title -> f:format.raw()}">
{images.2.title -> f:format.raw()} {images.2.title -> f:format.raw()}
</f:link.typolink> </f:link.typolink>
@@ -37,7 +37,7 @@
</f:if> </f:if>
</div> </div>
<f:if condition="{images.3}"> <f:if condition="{images.3}">
<div class="ep-tile" style="background-image:url('{f:uri.image(src: images.3.uid, treatIdAsReference: 1, crop: images.3.crop)}');"> <div class="ep-tile" style="background-image:url('{f:uri.image(image: images.3)}');">
<f:link.typolink parameter="{images.3.link}" title="{images.3.title -> f:format.raw()}"> <f:link.typolink parameter="{images.3.link}" title="{images.3.title -> f:format.raw()}">
{images.3.title -> f:format.raw()} {images.3.title -> f:format.raw()}
</f:link.typolink> </f:link.typolink>
@@ -46,14 +46,14 @@
</div> </div>
<div> <div>
<f:if condition="{images.4}"> <f:if condition="{images.4}">
<div class="ep-tile ep-tile-right" style="background-image:url('{f:uri.image(src: images.4.uid, treatIdAsReference: 1, crop: images.4.crop)}');"> <div class="ep-tile ep-tile-right" style="background-image:url('{f:uri.image(image: images.4)}');">
<f:link.typolink parameter="{images.4.link}" title="{images.4.title -> f:format.raw()}"> <f:link.typolink parameter="{images.4.link}" title="{images.4.title -> f:format.raw()}">
{images.4.title -> f:format.raw()} {images.4.title -> f:format.raw()}
</f:link.typolink> </f:link.typolink>
</div> </div>
</f:if> </f:if>
<f:if condition="{images.5}"> <f:if condition="{images.5}">
<div class="ep-tile" style="background-image:url('{f:uri.image(src: images.5.uid, treatIdAsReference: 1, crop: images.5.crop)}');"> <div class="ep-tile" style="background-image:url('{f:uri.image(image: images.5)}');">
<f:link.typolink parameter="{images.5.link}" title="{images.5.title -> f:format.raw()}"> <f:link.typolink parameter="{images.5.link}" title="{images.5.title -> f:format.raw()}">
{images.5.title -> f:format.raw()} {images.5.title -> f:format.raw()}
</f:link.typolink> </f:link.typolink>
@@ -24,7 +24,9 @@
<f:section name="Image"> <f:section name="Image">
<div class="partnerlogo {cssClasses}"> <div class="partnerlogo {cssClasses}">
<f:link.typolink parameter="{image.link}"> <f:link.typolink parameter="{image.link}">
<img class="lazy img-responsive partnerlogo__image" data-src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: product.image.crop, width: '400c', height: '400')}" alt="{image.alternative}" title="{image.title}"> <img class="lazy img-responsive partnerlogo__image"
data-src="{f:uri.image(image: image, width: '400c', height: '400')}"
alt="{image.alternative}" title="{image.title}">
</f:link.typolink> </f:link.typolink>
</div> </div>
</f:section> </f:section>
@@ -37,21 +37,26 @@
</div> </div>
</div> </div>
<f:if condition="{settings.showMoreLink}"> <f:if condition="{settings.showMoreLink}">
<p class="text-right"><f:link.action pageUid="{settings.defaultSearchPageUid}" <p class="text-right">
class="button" <f:link.action pageUid="{settings.defaultSearchPageUid}" class="button"
action="searchresult" action="searchresult" controller="Search"
controller="Search" arguments="{filterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}"
arguments="{filterSettings: '{filterSettings -> ep:filterSettingsEncoder()}'}" additionalAttributes="{rel: 'nofollow'}">Alle anzeigen</f:link.action>
additionalAttributes="{rel: 'nofollow'}">Alle anzeigen</f:link.action></p> </p>
</f:if> </f:if>
</f:if> </f:if>
<f:if condition="{concept.descriptionExtended}">{concept.descriptionExtended -> f:format.html()}</f:if> <f:if condition="{concept.descriptionExtended}">{concept.descriptionExtended -> f:format.html()}</f:if>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<p class="hidden-xs hidden-md"><a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p> <p class="hidden-xs hidden-md">
<a v-on:click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
Direkt zu den Angeboten
</a>
</p>
</f:if> </f:if>
<img class="img-responsive lazy" data-src="{f:uri.image(src: concept.teaserImage.uid, treatIdAsReference: 1, crop: concept.teaserImage.crop, width: '330')}" alt="{concept.teaserImage.alternative}" title="{concept.teaserImage.title}"> <img class="img-responsive lazy" data-src="{f:uri.image(image: concept.teaserImage, width: '330')}"
alt="{concept.teaserImage.alternative}" title="{concept.teaserImage.title}">
</div> </div>
</div> </div>
</div> </div>
@@ -11,7 +11,7 @@
<f:for each="{items}" as="item" iteration="iteration"> <f:for each="{items}" as="item" iteration="iteration">
<div class="row ep-lineup{f:if(condition: iteration.isEven, then: ' right')}"> <div class="row ep-lineup{f:if(condition: iteration.isEven, then: ' right')}">
<div class="col-md-6"> <div class="col-md-6">
<img class="scale lazy" data-src="{f:uri.image(src: item.image.0.uid, treatIdAsReference: 1, crop: item.image.0.crop)}" alt="{item.data.name}"/> <img class="scale lazy" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
</div> </div>
<div class="col-md-6 "> <div class="col-md-6 ">
<div> <div>