Alpaca components for Magento 2

Image: Picture 

<picture class="image ">
    <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-480_480.png" media="(max-width: 480px)" />
    <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_402.png" media="(max-width: 768px)" />
    <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-992_254.png" media="(max-width: 1024px)" />
    <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1170_300.png" media="" />

    <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text" />
</picture>
 
<picture
    class="image {{ class }}"
    {{{ attributes }}}
>
    {{#each sources}}
        <source
            srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII="
            data-srcset="{{ src }}"
            media="{{ mediaQuery }}"
        />
    {{/each}}

    <img
        class="lazyload {{ imgClass }}"
        src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII="
        data-src="{{ defaultSrc }}"
        alt="{{ alt }}"
        {{{ imgAttributes }}}
    />
</picture>
 
{
  "src": "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=",
  "dataSrc": "/images/banner/banner-480_480.png",
  "alt": "image alt text",
  "defaultSrc": "/images/banner/banner-480_480.png",
  "sources": [
    {
      "src": "/images/banner/banner-480_480.png",
      "mediaQuery": "(max-width: 480px)"
    },
    {
      "src": "/images/banner/banner-768_402.png",
      "mediaQuery": "(max-width: 768px)"
    },
    {
      "src": "/images/banner/banner-992_254.png",
      "mediaQuery": "(max-width: 1024px)"
    },
    {
      "src": "/images/banner/banner-1170_300.png",
      "mediaQuery": ""
    }
  ]
}
  • Content: 
    $ratio-container-height: 0;
$ratio-container-width: 100%;

.ratio-container {
    position: relative;
    height: $ratio-container-height;
    width: $ratio-container-width;
    overflow: hidden;

    .ratio-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        height: auto;
    }
}
  • URL: /components/raw/image/_image-ratio.scss
  • Filesystem Path: build/components/Molecules/image/_image-ratio.scss
  • Size: 378 Bytes
  • Content: 
    $image__width                       : auto !default;
$image__max-width                   : 100% !default;
$image__transition                  : $transition-fade !default;
$image__wrapper-background-color    : $white !default;

$image__picture-lazyload-width      : 100% !default;
$image__picture-lazyload-min-height : 56px !default;
$image__picture-lazyload-bg-image   : url('../images/loader-svg.svg') !default;

.image {
    display: block;
    width: $image__width;
    max-width: $image__max-width;
    transition: $image__transition;

    &.lazyload,
    &.lazyloading {
        opacity: 0;
    }

    &.lazyloaded {
        opacity: 1;
    }
}

img,
picture {
    @extend .image;
}

.lazyload-wrapper {
    position: relative;
    background-color: $image__wrapper-background-color;
    transition: $transition-base;
}

picture {
    &.lazyloaded {
        width: $image__picture-lazyload-width;
    }

    & > img.lazyload,
    & > img.lazyloaded,
    & > img.lazyloading {
        min-height: $image__picture-lazyload-min-height;
        opacity: 1;
        background-size: $image__picture-lazyload-min-height;
        background-repeat: no-repeat;
        background-position: center;
    }

    & > img.lazyloading {
        background-image: $image__picture-lazyload-bg-image;
    }
}
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: build/components/Molecules/image/_image.scss
  • Size: 1.3 KB

No notes defined.