Image Full 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/image-full.css?cb=">

<div data-module="imageLazyLoad" class="image-full lazy-load-image">
    <picture>
        <source media="(max-width: 840px)" type="image/jpeg" srcset="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality&#x3D;95&amp;width&#x3D;640" />
        <source media="(min-width: 841px)" type="image/jpeg" srcset="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality&#x3D;100" />
        <img src="" loading="lazy" alt="">
    </picture>
</div>
<div class="grid-container">
    <div class="grid-x">
        <figcaption class="image-full__caption">Image Full Caption</figcaption>
    </div>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/image-full.css?cb={{cacheBuster}}">
{{/if}}

<div data-module="imageLazyLoad" class="image-full lazy-load-image">
    {{> @picture }}
</div>
{{#if caption}}
<div class="grid-container">
    <div class="grid-x">
        <figcaption class="image-full__caption">{{caption}}</figcaption>
    </div>
</div>
{{/if}}
 
{
  "theme": "default",
  "firstInstance": true,
  "placeholderImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=10",
  "sources": [
    {
      "type": "image/jpeg",
      "desktopImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=100",
      "mobileImageUrl": "https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=95&width=640"
    }
  ],
  "caption": "Image Full Caption"
}
  • Content: 
    export class ImageFull {
    constructor(module) {
        const config = {
            rootMargin: '50px 0px',
            threshold: 0.01,
        };

        const getBackgroundImageUrl = (el) => {
            let realBg;
            if (window.innerWidth < 641) {
                realBg = module.style.getPropertyValue('--mobile-image');
                realBg = realBg.replace(/\\/g, '');
            } else {
                realBg = module.style.getPropertyValue('--desktop-image');
                realBg = realBg.replace(/\\/g, '');
            }

            if (!realBg) {
                // we can't get the css variable so get the background image instead (IE11)
                realBg = el.style.backgroundImage;
            }

            return realBg.replace(/url\(['"]?(.*?)['"]?\)/i, '$1');
        };

        const onIntersection = (entries, observer) => {
            for (let i = 0; i < entries.length; i++) {
                const entry = entries[i];
                if (entry.intersectionRatio > 0) {
                    observer.unobserve(entry.target);
                    const desktopImageSource = entry.target.getAttribute('data-desktop-url');
                    const mobileImageSource = entry.target.getAttribute('data-mobile-url');

                    entry.target.setAttribute('style', `background-image: url( ${desktopImageSource}); --mobile-image: url( ${mobileImageSource}); --desktop-image: url( ${desktopImageSource});`);
                    const image = document.createElement('img');
                    image.src = getBackgroundImageUrl(entry.target);
                    image.onload = () => {
                        entry.target.querySelector('.js-low-res').classList.add('hidden');
                    };
                }
            }
        };

        const observer = new IntersectionObserver(onIntersection, config);
        observer.observe(module);
    }
}

export default (module) => new ImageFull(module);
  • URL: /components/raw/image-full/image-full.js
  • Filesystem Path: source/patterns/03-components/media/image-full/image-full.js
  • Size: 2 KB
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.image-full {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    padding-bottom: 56.5%; // 16:9
    position: relative;

    &__low-res {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(10px);
        height: 100%;
        opacity: 1;
        position: absolute;
        transition: opacity .5s linear;
        width: 100%;

        &.hidden {
            opacity: 0;
        }
    }

    @include breakpoint(large) {
        padding-bottom: 36.5%;
    }

    &__caption {
        @extend %p--small;
        color: $color-image-caption;
        margin: rem(30) 0;
    }
}
  • URL: /components/raw/image-full/image-full.scss
  • Filesystem Path: source/patterns/03-components/media/image-full/image-full.scss
  • Size: 820 Bytes

No notes defined.