PortableInfobox/templates/PortableInfoboxItemImageCollection.mustache
2017-12-28 11:56:08 +01:00

32 lines
1.6 KiB
Plaintext

<div class="pi-image-collection">
<ul class="pi-image-collection-tabs">
{{#images}}<li class="pi-tab-link pi-item-spacing {{#isFirst}}current{{/isFirst}}" data-pi-tab="pi-tab-{{ref}}">
{{#caption}}{{{caption}}}{{/caption}}
{{^caption}}{{name}}{{/caption}}
</li>{{/images}}
</ul>
{{#images}}
<div class="pi-image-collection-tab-content {{#isFirst}}current{{/isFirst}}" id="pi-tab-{{ref}}">
<figure class="pi-item pi-image">
<a href="{{url}}" class="image image-thumbnail {{#isVideo}} video video-thumbnail small{{/isVideo}}" title="{{alt}}">
<img src="{{thumbnail}}" srcset="{{thumbnail}} 1x, {{thumbnail2x}} 2x" class="pi-image-thumbnail" alt="{{alt}}" width="{{{width}}}" height="{{{height}}}" data-{{media-type}}-key="{{name}}" data-{{media-type}}-name="{{name}}"/>
{{#isVideo}}
<span class="thumbnail-play-icon-container">
<svg class="thumbnail-play-icon" viewBox="0 0 180 180" width="100%" height="100%">
<g fill="none" fill-rule="evenodd">
<g opacity=".9" transform="rotate(90 75 90)">
<g fill="#000" filter="url(#a)"><rect id="b" width="150" height="150" rx="75"></rect></g>
<g fill="#FFF"><rect id="b" width="150" height="150" rx="75"></rect></g>
</g>
<path fill="#00D6D6" fill-rule="nonzero" d="M80.87 58.006l34.32 25.523c3.052 2.27 3.722 6.633 1.496 9.746a6.91 6.91 0 0 1-1.497 1.527l-34.32 25.523c-3.053 2.27-7.33 1.586-9.558-1.527A7.07 7.07 0 0 1 70 114.69V63.643c0-3.854 3.063-6.977 6.84-6.977 1.45 0 2.86.47 4.03 1.34z"></path>
</g>
</svg>
</span>
{{/isVideo}}
</a>
</figure>
</div>
{{/images}}
</div>