Newer
Older
{namespace sg=SGalinski\ProjectTheme\ViewHelpers}
{namespace vi=SGalinski\SgVimeo\ViewHelpers}
<f:layout name="Default"/>
<f:section name="main">
</f:if>
<f:variable name="feedCount" value="{response.items -> f:count()}"/>
<f:comment><!--Handle the container classes--></f:comment>
<f:variable name="classes">
<f:if condition="{feedCount} > 4">
<f:then>
sg-video--default
</f:then>
<f:else>
<f:switch expression="{settings.layout}">
<f:case value="rows">
sg-video--rows
</f:case>
<f:case value="playlist">
sg-video--playlist sg-video--{feedCount} row
</f:case>
<f:defaultCase>
sg-video--default
</f:defaultCase>
</f:switch>
</f:else>
</f:if>
</f:variable>
<f:if condition="{error}">
<f:then>
<p>{error}</p>
</f:then>
<f:else>
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<f:comment><!--Set the layout to single if there is only one item.--></f:comment>
<div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}">
<f:if condition="{feedCount} < 2">
<f:then>
<f:render section="vimeoItem" arguments="{
feedItem: response.items.0,
titleChars: 200,
descChars: 400
}"/>
</f:then>
<f:else>
<f:if condition="{feedCount} > 4">
<f:then>
<f:render section="list" arguments="{_all}"/>
</f:then>
<f:else>
<f:switch expression="{settings.layout}">
<f:case value="playlist">
<f:render section="list-playlist" arguments="{_all}"/>
</f:case>
<f:defaultCase>
<f:render section="list" arguments="{_all}"/>
</f:defaultCase>
</f:switch>
</f:else>
</f:if>
</f:else>
</f:if>
</div>
</f:else>
</f:if>
</f:section>
<f:section name="list">
<ul class="sg-video__list sg-video__list--{f:if(condition: '{settings.layout} === \'rows\'', then: 'rows', else: 'default')}">
<f:for each="{response.items}" as="feedItem" iteration="feedIterator">
<li class="sg-video__list-item">
<f:render section="vimeoItem" arguments="{
feedItem: feedItem,
titleChars: 300,
descChars: 900,
expand: 1
}"/>
</li>
</f:for>
</ul>
</f:section>
<f:section name="list-playlist">
<f:variable name="highlightClasses">
<f:switch expression="{feedCount}">
<f:case value="3">col-lg-8</f:case>
<f:case value="4">col-lg-6</f:case>
<f:defaultCase>col-md-6</f:defaultCase>
</f:switch>
</f:variable>
<f:variable name="listClasses">
<f:switch expression="{feedCount}">
<f:case value="3">col-lg-4</f:case>
<f:case value="4">col-lg-6</f:case>
<f:defaultCase>col-md-6</f:defaultCase>
</f:switch>
</f:variable>
<div class="sg-video__highlight {highlightClasses}">
<f:render section="vimeoItem" arguments="{
feedItem: response.items.0,
titleChars: 200,
descChars: 300
}"/>
</div>
<ul class="sg-video__list sg-video__list--playlist {listClasses}">
<f:for each="{response.items}" as="feedItem" iteration="feedIterator">
<f:if condition="!{feedIterator.isFirst}">
<li class="sg-video__list-item {f:if(condition: '{feedCount} === 4', then: 'sg-video__list-item--alt')}">
<f:render section="vimeoItem" arguments="{
feedItem: feedItem,
titleChars: 100,
Stefan Galinski
committed
descChars: '{f:if(condition: \'{feedCount} < 3\', then: \'300\', else: \'90\')}'
}" />
</f:for>
</ul>
</f:section>
<f:variable name="urlParameters">{f:if(condition: '{settings.urlParameters}', then: '{settings.urlParameters}', else: '{settings.globalUrlParameters}')}</f:variable>
<f:variable name="feedItemUrl"><vi:urlWithQueryParameters url="{f:if(condition: '{feedItem.embedLink}', then: '{feedItem.embedLink}', else: '{feedItem.link}')}" parameters="{urlParameters}" /></f:variable>
<a class="sg-video__image-container sg-vimeo-item" href="{feedItemUrl}" target="_blank"
data-disable-lightbox="{settings.disableLightbox}"
data-disable-lightbox-mobile="{settings.disableLightboxMobile}"
data-additional-url-parameters="{urlParameters}">
<f:if condition="{feedItem.thumbnail}">
<f:then>
<img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.name}" loading="lazy"/>
</f:then>
<f:else>
<f:if condition="{feedItem.pictures.base_link}">
<img class="sg-video__image" src="{feedItem.pictures.base_link}_{feedItem.width}x{feedItem.height}?r=pad" alt="{item.name}" width="{feedItem.width}" height="{feedItem.height}" loading="lazy"/>
Stefan Galinski
committed
<f:comment><!--
<f:if condition="{feedItem.pictures.sizes}">
<f:for each="{feedItem.pictures.sizes}" as="picture" iteration="iterator">
<f:if condition="{iterator.isLast}">
<img class="sg-video__image" src="{picture.link}" alt="{item.name}" width="{picture.width}" height="{picture.height}" loading="lazy"/>
</f:if>
</f:for>
</f:if>
Stefan Galinski
committed
--></f:comment>
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
</f:else>
</f:if>
</a>
<f:if condition="{settings.showTitle} || {settings.showDescription}">
<div class="sg-video__bodytext">
<f:if condition="{settings.showTitle} && {feedItem.name}">
<h3 class="h3">
<f:format.crop maxCharacters="{titleChars}"><f:format.htmlentitiesDecode>{feedItem.name}</f:format.htmlentitiesDecode></f:format.crop>
</h3>
</f:if>
<f:if condition="{settings.showDescription} && {feedItem.description}">
<span class="sg-video__description">
<f:format.crop maxCharacters="{descChars}"><f:format.htmlentitiesDecode>{feedItem.description}</f:format.htmlentitiesDecode></f:format.crop>
</span>
</f:if>
<f:if condition="{expand} && {settings.layout} == 'rows'">
<f:render section="readMoreButton" />
</f:if>
</div>
<f:if condition="{expand} && {settings.layout} == 'default'">
<f:render section="readMoreButton" />
</f:if>
</f:if>
</div>
</f:section>
<f:section name="readMoreButton">
<button type="button" class="sg-video__read-more"
data-button-open-text="{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}"
data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'sg_vimeo')}">{f:translate(key: 'frontend.readMore', extensionName: 'sg_vimeo')}</button>