Experience Brand: Layered Image Top Left

<div class="experience-brand-hero" data-module="experienceBrandHero" data-has-video="true"> <div class="experience-brand-hero__background"> <div class="video " data-module="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted=""> <template class="js-small-video-template"> <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png"> <video playsinline autoplay muted loop class="video__player js-video-player"> <source src="/media/porthole-tabber/porthole_experience-brand-hero_IAE_V2.mp4" type="video/mp4" /> </video> </div> </template> <template class="js-medium-video-template"> <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png"> <video playsinline autoplay muted loop class="video__player js-video-player"> <source src="/media/porthole-tabber/porthole_experience-brand-hero_IAE_V2.mp4" type="video/mp4" /> </video> </div> </template> <div class="js-video-container video__container"></div> </div> <div class="experience-brand-hero__clip"> <div class="video " data-module="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted=""> <template class="js-small-video-template"> <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png"> <video playsinline autoplay muted loop class="video__player js-video-player"> <source src="/media/porthole-tabber/porthole_experience-brand-hero_IAE_V2.mp4" type="video/mp4" /> </video> </div> </template> <template class="js-medium-video-template"> <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png"> <video playsinline autoplay muted loop class="video__player js-video-player"> <source src="/media/porthole-tabber/porthole_experience-brand-hero_IAE_V2.mp4" type="video/mp4" /> </video> </div> </template> <div class="js-video-container video__container"></div> </div> </div> </div> <div class="experience-brand-hero__layered-image experience-brand-hero__layered-image--top-left " style="background-image: url(/media/porthole-tabber/porthole_asset-layer-image_IAE.gif);"></div> <div class="experience-brand-hero__inner"> <div class="grid-container"> <div class="experience-brand-hero__content js-brand-hero-content grid-x grid-margin-x"> <div class="cell medium-10 large-8"> <div class="experience-brand-hero__brand" style="background-image: url(/media/experience-brands/icons/waw--white.svg);"></div> <p class="experience-brand-hero__description">Encounter moments of magic and treasure experiences that you will want to return to again and again.</p> </div> <div class="cell medium-2 large-4"> <div class="experience-brand-hero__map" style="background-image: url(/media/experience-brands/maps/waw-map--dark.svg);"></div> </div> </div> </div> </div> <div class="hero-like" data-module="heroLike"> <button class="hero-like__button js-module-like-button" data-card-id="1338"> Save to my board <span class="like-button js-heart"><span class="like-button__wave"></span></span> </button> <div class="hero-like__card-container js-card-container"> <div class="card-featured bg-inverted js-card-generic has-tags" data-module="card" data-card-id=1338 data-longitude="-5.95577" data-latitude="54.59623"> <a href="#" class="card-featured__anchor js-link"> <div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="-5.95577" data-latitude="54.59623"> <div class="location-marker__text"> <span class="location-marker__text-description js-marker-description"></span> <span class="location-marker__distance js-marker-distance"></span> </div> </div> <button class="like-button js-like-button" role="button"> <span class="like-button__text"></span> <span class="like-button__wave"></span> </button> <figure class="image js-image " data-module="imagelazy" data-is-small-image="" data-force-load="true"> <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text"> <picture class="image__container"> <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" /> <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" /> <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" /> <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" alt="Alt Text"> </picture> </figure> <p class="card-featured__page-type js-page-type">Accommodation</p> <div class="card-featured__overlay"> <time class="card-featured__read-time" datetime="">14 - 18 March</time> <h2 class="card-featured__title js-title">Accom example</h2> <p class="card-featured__location js-location-name">Belfast</p> <div class="hashtags" data-module="hashtags"> <ul> <li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" role="button">#Citybreak</span></li> <li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" role="button">#Adventure</span></li> <li><span class="hashtags__link js-hashtag-link" data-tag-name="surfing" role="button">#Surfing</span></li> </ul> </div> </div> </a> </div> </div> </div> </div>
<div class="experience-brand-hero" data-module="experienceBrandHero" data-has-video="{{#if fullVideo}}true{{else}}false{{/if}}"> <div class="experience-brand-hero__background"> {{#if fullVideo}} {{> @cp-medium-video isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=true hideControls=true loop=true }} {{else}} {{> @cp-medium-image responsiveImage}} {{/if}} <div class="experience-brand-hero__clip"> {{#if fullVideo}} {{> @cp-medium-video isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=true hideControls=true loop=true }} {{else}} {{> @cp-medium-image responsiveImage}} {{/if}} </div> </div> {{#if layeredSimpleImage}} <div class="experience-brand-hero__layered-image {{#ifEquals layeredImagePosition "top-right"}} experience-brand-hero__layered-image--top-right{{/ifEquals}} {{#ifEquals layeredImagePosition "top-left"}} experience-brand-hero__layered-image--top-left{{/ifEquals}} {{#ifEquals layeredImagePosition "bottom-right"}} experience-brand-hero__layered-image--bottom-right{{/ifEquals}} {{#ifEquals layeredImagePosition "bottom-left"}} experience-brand-hero__layered-image--bottom-left{{/ifEquals}} {{#ifEquals layeredImagePosition "top-center"}} experience-brand-hero__layered-image--top-center{{/ifEquals}} {{#ifEquals layeredImagePosition "bottom-center"}} experience-brand-hero__layered-image--bottom-center{{/ifEquals}}" style="background-image: url({{layeredSimpleImage.src}});"></div> {{/if}} <div class="experience-brand-hero__inner"> <div class="grid-container"> <div class="experience-brand-hero__content js-brand-hero-content grid-x grid-margin-x"> <div class="cell medium-10 large-8"> {{#if brandSimpleImage}} <div class="experience-brand-hero__brand" style="background-image: url({{brandSimpleImage.src}});"></div> {{/if}} <p class="experience-brand-hero__description">{{description}}</p> </div> <div class="cell medium-2 large-4"> {{#if mapSimpleImage}} <div class="experience-brand-hero__map" style="background-image: url({{mapSimpleImage.src}});"></div> {{/if}} </div> </div> </div> </div> {{#if likeButton}} {{> @cp-hero-like-button likeButton}} {{/if}} </div>
{ "preload": true, "description": "Encounter moments of magic and treasure experiences that you will want to return to again and again.", "responsiveImage": { "altText": "Alt Text", "lowResolutionUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg", "sources": [ { "type": "image/jpeg", "largeUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg", "smallUrl": "/media/porthole-tabber/porthole_experience-brand-hero_static.jpg" } ] }, "fullVideo": { "isYouTube": false, "video": { "videoUrls": [ { "type": "video/mp4", "url": "/media/porthole-tabber/porthole_experience-brand-hero_IAE_V2.mp4" } ], "mobileVideoUrls": [ { "type": "video/mp4", "url": "/media/porthole-tabber/porthole_experience-brand-hero_IAE_V2.mp4" } ], "posterUrl": "https://via.placeholder.com/1600x900.png" } }, "brandSimpleImage": { "src": "/media/experience-brands/icons/waw--white.svg" }, "mapSimpleImage": { "src": "/media/experience-brands/maps/waw-map--dark.svg" }, "layeredSimpleImage": { "src": "/media/porthole-tabber/porthole_asset-layer-image_IAE.gif" }, "layeredImagePosition": "top-left", "likeButton": { "buttonText": "Save to my board", "card": { "isFeatured": true, "cardType": "Generic", "responsiveImage": { "forceLoad": true, "dominantColour": "#938C7D", "altText": "Alt Text", "lowResolutionUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10", "sources": [ { "type": "image/jpeg", "largeUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80", "smallUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" } ], "fallbackImageUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" }, "webAppMode": true, "likeText": "Like", "cardId": 1338, "pageType": "Accommodation", "title": "Accom example", "subtitle": "", "locationName": "Belfast", "location": { "longitude": -5.95577, "latitude": 54.59623 }, "timeSpan": { "text": "14 - 18 March" }, "starRating": { "rating": 4, "total": 5 }, "tags": { "isLarge": false, "hashtags": [ { "text": "#Citybreak", "url": "#citybreak", "tagName": "citybreak" }, { "text": "#Adventure", "url": "#adventure", "tagName": "adventure" }, { "text": "#Surfing", "url": "#surfing", "tagName": "surfing" } ] } } } }

There are no notes for this item.