<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 class="hashtags hashtags--large hashtags--with-nudge-image" data-module="hashtags">
<h3 class="hashtags__title">Trends for you</h3>
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" onclick="window.location='#citybreak'" role="button">#Citybreak</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" onclick="window.location='#adventure'" role="button">#Adventure</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="surfing" onclick="window.location='#surfing'" role="button">#Surfing</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="dublin" onclick="window.location='#dublin'" role="button">#Dublin</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="romance" onclick="window.location='#romance'" role="button">#Romance</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="sport" onclick="window.location='#sport'" role="button">#Sport</span></li>
</ul>
<div class="hashtags__nudge-image">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="/media/nudges/discover-new-top-right.svg" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/svg+xml" data-srcset="/media/nudges/discover-new-top-left-small.svg" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/svg+xml" data-srcset="/media/nudges/discover-new-top-right.svg" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/svg+xml" data-srcset="/media/nudges/discover-new-top-right.svg" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="/media/nudges/discover-new-top-right.svg" alt="Alt Text">
</picture>
</figure>
</div>
</div>
</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"
},
"tags": {
"title": "Trends for you",
"isLarge": true,
"hashtags": [
{
"text": "#Citybreak",
"url": "#citybreak",
"tagName": "citybreak",
"openOnClick": true
},
{
"text": "#Adventure",
"url": "#adventure",
"tagName": "adventure",
"openOnClick": true
},
{
"text": "#Surfing",
"url": "#surfing",
"tagName": "surfing",
"openOnClick": true
},
{
"text": "#Dublin",
"url": "#dublin",
"tagName": "dublin",
"openOnClick": true
},
{
"text": "#Romance",
"url": "#romance",
"tagName": "romance",
"openOnClick": true
},
{
"text": "#Sport",
"url": "#sport",
"tagName": "sport",
"openOnClick": true
}
],
"nudgeResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/media/nudges/discover-new-top-right.svg",
"fallbackImageUrl": "/media/nudges/discover-new-top-right.svg",
"sources": [
{
"type": "image/svg+xml",
"largeUrl": "/media/nudges/discover-new-top-right.svg",
"smallUrl": "/media/nudges/discover-new-top-left-small.svg"
}
]
}
}
}
There are no notes for this item.