Media Collage: Default

<div class="media-collage media-collage--4-variant" data-module="mediaCollage"> <div class="grid-container"> <div class="grid-x grid-padding-x"> <div class="cell medium-offset-1 medium-10"> <div class="media-collage__images-outer-container"> <div class="media-collage__images-only-container"> <div class="media-collage__image media-collage__image3" style="background-image: url(/media/media-collage/puffin.png); --mobile-image: url(/media/media-collage/coast.png); --desktop-image: url('/media/media-collage/puffin.png');"></div> <div class="media-collage__image media-collage__image4" style="background-image: url(/media/media-collage/castle.png); --mobile-image: url(/media/media-collage/puffin.png); --desktop-image: url('/media/media-collage/castle.png');"></div> </div> <div class="media-collage__images-with-caption-container"> <div class="media-collage__image media-collage__image1" style="background-image: url(/media/media-collage/coast.png); --mobile-image: url(/media/media-collage/grass.png); --desktop-image: url('/media/media-collage/coast.png');"></div> <div class="media-collage__image media-collage__image2" style="background-image: url(/media/media-collage/grass.png); --mobile-image: url(/media/media-collage/castle.png); --desktop-image: url('/media/media-collage/grass.png');"></div> <div class="media-collage__caption"> <span class="media-collage__location-icon"></span> <p class="media-collage__location">Cork</p> <p class="media-collage__description">This is a caption</p> </div> </div> </div> </div> </div> </div> </div>
<div class="media-collage media-collage--{{simpleImages.length}}-variant" data-module="mediaCollage"> <div class="grid-container"> <div class="grid-x grid-padding-x"> <div class="cell medium-offset-1 medium-10"> <div class="media-collage__images-outer-container"> <div class="media-collage__images-only-container"> <div class="media-collage__image media-collage__image3" style="background-image: url({{simpleImages.1.src}}); --mobile-image: url({{simpleImages.0.src}}); --desktop-image: url('{{simpleImages.1.src}}');"></div> <div class="media-collage__image media-collage__image4" style="background-image: url({{simpleImages.2.src}}); --mobile-image: url({{simpleImages.1.src}}); --desktop-image: url('{{simpleImages.2.src}}');"></div> </div> <div class="media-collage__images-with-caption-container"> <div class="media-collage__image media-collage__image1" style="background-image: url({{simpleImages.0.src}}); --mobile-image: url({{#if simpleImages.3.src}}{{simpleImages.3.src}}{{else}}{{simpleImages.2.src}}{{/if}}); --desktop-image: url('{{simpleImages.0.src}}');"></div> {{#if simpleImages.3.src}} <div class="media-collage__image media-collage__image2" style="background-image: url({{simpleImages.3.src}}); --mobile-image: url({{simpleImages.2.src}}); --desktop-image: url('{{simpleImages.3.src}}');"></div> {{else}} <div class="media-collage__image media-collage__image2" style="--mobile-image: url({{simpleImages.1.src}});');"></div> {{/if}} <div class="media-collage__caption"> {{#if caption.location}}<span class="media-collage__location-icon"></span> <p class="media-collage__location">{{caption.location}}</p>{{/if}} {{#if caption.description}} <p class="media-collage__description">{{caption.description}}</p>{{/if}} {{#if tags}} {{> @cp-hashtags tags }} {{/if}} </div> </div> </div> </div> </div> </div> </div>
{ "simpleImages": [ { "src": "/media/media-collage/coast.png" }, { "src": "/media/media-collage/puffin.png" }, { "src": "/media/media-collage/castle.png" }, { "src": "/media/media-collage/grass.png" } ], "caption": { "location": "Cork", "description": "This is a caption" } }

There are no notes for this item.