Vechtsport Online Components for Magento 2

Image: Picture 

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

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

    <img class="lazyload {{ imgClass }}"
         src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
         data-src="{{ defaultSrc }}"
         alt="{{ alt }}"
         {{{ imgAttributes }}}
    />
</picture>
 
{
  "src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
  "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: 992px)"
    },
    {
      "src": "/images/banner/banner-1170_300.png",
      "mediaQuery": ""
    }
  ]
}
  • Content: 
    $image__width                   : 100% !default;
$image__transition              : $transition-fade !default;
$image__wrapper-background-color: $white !default;

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

img,
picture {
    @extend .image;
}

.lazyload-wrapper {
    position: relative;
}
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: build/components/02-elements/image/_image.scss
  • Size: 370 Bytes

There are no notes for this item.