Copy environment

Image 

<figure class="image  ">
    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}
    <img
        loading="lazy"
        src="{{ placeholderSrc }}"
        data-srcset="{{ data.srcset }}"
        data-sizes="auto"
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img lazyload"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source srcset="{{ sourcePlaceholder }}" data-srcset="{{ source.srcset }}" media="{{ media[loop.index0] }}"/>
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  }
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 537 Bytes
  • Content: 
    import 'lazysizes';
import 'lazysizes/plugins/native-loading/ls.native-loading';
import 'picturefill';

import './image.scss';
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/patterns/components/image/image.ts
  • Size: 127 Bytes

Fluid 

<figure class="image image--fluid ">
    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}
    <img
        loading="lazy"
        src="{{ placeholderSrc }}"
        data-srcset="{{ data.srcset }}"
        data-sizes="auto"
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img lazyload"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source srcset="{{ sourcePlaceholder }}" data-srcset="{{ source.srcset }}" media="{{ media[loop.index0] }}"/>
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    }
  },
  "modifier": "image--fluid"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 537 Bytes
  • Content: 
    import 'lazysizes';
import 'lazysizes/plugins/native-loading/ls.native-loading';
import 'picturefill';

import './image.scss';
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/patterns/components/image/image.ts
  • Size: 127 Bytes
  • Handle: @image--fluid
  • Filesystem Path: src/patterns/components/image/image.twig

Picture 

<figure class="image  ">
    <picture class="image__picture">
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20175%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x175 100w, //via.placeholder.com/200x350 200w" media="(min-width: 1170px)" />
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20150%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x150 100w, //via.placeholder.com/200x300 200w" media="(min-width: 1024px)" />
        <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20125%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x125 100w, //via.placeholder.com/200x250 200w" media="(min-width: 768px)" />
        <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

    </picture>

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}
    <img
        loading="lazy"
        src="{{ placeholderSrc }}"
        data-srcset="{{ data.srcset }}"
        data-sizes="auto"
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img lazyload"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source srcset="{{ sourcePlaceholder }}" data-srcset="{{ source.srcset }}" media="{{ media[loop.index0] }}"/>
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "sources": [
      {
        "srcset": "//via.placeholder.com/100x175 100w, //via.placeholder.com/200x350 200w",
        "aspectRatio": {
          "width": 100,
          "height": 175
        }
      },
      {
        "srcset": "//via.placeholder.com/100x150 100w, //via.placeholder.com/200x300 200w",
        "aspectRatio": {
          "width": 100,
          "height": 150
        }
      },
      {
        "srcset": "//via.placeholder.com/100x125 100w, //via.placeholder.com/200x250 200w",
        "aspectRatio": {
          "width": 100,
          "height": 125
        }
      }
    ]
  },
  "media": [
    "(min-width: 1170px)",
    "(min-width: 1024px)",
    "(min-width: 768px)"
  ]
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 537 Bytes
  • Content: 
    import 'lazysizes';
import 'lazysizes/plugins/native-loading/ls.native-loading';
import 'picturefill';

import './image.scss';
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/patterns/components/image/image.ts
  • Size: 127 Bytes
  • Handle: @image--picture
  • Filesystem Path: src/patterns/components/image/image.twig

Caption 

<figure class="image  ">
    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

    <figcaption class="image__caption">this is a caption</figcaption>
</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}
    <img
        loading="lazy"
        src="{{ placeholderSrc }}"
        data-srcset="{{ data.srcset }}"
        data-sizes="auto"
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img lazyload"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source srcset="{{ sourcePlaceholder }}" data-srcset="{{ source.srcset }}" media="{{ media[loop.index0] }}"/>
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "caption": "this is a caption"
  }
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 537 Bytes
  • Content: 
    import 'lazysizes';
import 'lazysizes/plugins/native-loading/ls.native-loading';
import 'picturefill';

import './image.scss';
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/patterns/components/image/image.ts
  • Size: 127 Bytes
  • Handle: @image--caption
  • Filesystem Path: src/patterns/components/image/image.twig

Width

limit maximum render width of image by adding a width prop to data

<figure class="image  ">
    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="300" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}
    <img
        loading="lazy"
        src="{{ placeholderSrc }}"
        data-srcset="{{ data.srcset }}"
        data-sizes="auto"
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img lazyload"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source srcset="{{ sourcePlaceholder }}" data-srcset="{{ source.srcset }}" media="{{ media[loop.index0] }}"/>
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 300
  }
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 537 Bytes
  • Content: 
    import 'lazysizes';
import 'lazysizes/plugins/native-loading/ls.native-loading';
import 'picturefill';

import './image.scss';
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/patterns/components/image/image.ts
  • Size: 127 Bytes
  • Handle: @image--width
  • Filesystem Path: src/patterns/components/image/image.twig

Link 

<figure class="image  ">
    <a class="image__link" href="https://google.ee" target="_blank">
        <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" class="image__img lazyload">

    </a>
</figure>

Align Left 

<figure class="image image--align-left ">
    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="200" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}
    <img
        loading="lazy"
        src="{{ placeholderSrc }}"
        data-srcset="{{ data.srcset }}"
        data-sizes="auto"
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img lazyload"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source srcset="{{ sourcePlaceholder }}" data-srcset="{{ source.srcset }}" media="{{ media[loop.index0] }}"/>
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 200
  },
  "modifier": "image--align-left"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 537 Bytes
  • Content: 
    import 'lazysizes';
import 'lazysizes/plugins/native-loading/ls.native-loading';
import 'picturefill';

import './image.scss';
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/patterns/components/image/image.ts
  • Size: 127 Bytes
  • Handle: @image--align-left
  • Filesystem Path: src/patterns/components/image/image.twig

Align Right 

<figure class="image image--align-right ">
    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="200" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}
    <img
        loading="lazy"
        src="{{ placeholderSrc }}"
        data-srcset="{{ data.srcset }}"
        data-sizes="auto"
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img lazyload"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source srcset="{{ sourcePlaceholder }}" data-srcset="{{ source.srcset }}" media="{{ media[loop.index0] }}"/>
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 200
  },
  "modifier": "image--align-right"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 537 Bytes
  • Content: 
    import 'lazysizes';
import 'lazysizes/plugins/native-loading/ls.native-loading';
import 'picturefill';

import './image.scss';
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/patterns/components/image/image.ts
  • Size: 127 Bytes
  • Handle: @image--align-right
  • Filesystem Path: src/patterns/components/image/image.twig

Align Center 

<figure class="image image--align-center ">
    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="image alt text" width="200" class="image__img lazyload">

</figure>
 
{% set placeholderSrc = data.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ data.aspectRatio.width ~ '%20' ~ data.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
{% set imgElement %}
    <img
        loading="lazy"
        src="{{ placeholderSrc }}"
        data-srcset="{{ data.srcset }}"
        data-sizes="auto"
        alt="{{ data.alt }}"
        {% if data.width %}width="{{ data.width }}"{% endif %}
        {% if data.title %}title="{{ data.title }}"{% endif %}
        class="image__img lazyload"
    >
{% endset %}
{% set image %}
    {% if data.sources %}
        <picture class="image__picture">
            {% for source in data.sources %}
                {% set sourcePlaceholder = source.aspectRatio ? 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20' ~ source.aspectRatio.width ~ '%20' ~ source.aspectRatio.height ~ '%22%3E%3C%2Fsvg%3E' : 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' %}
                <source srcset="{{ sourcePlaceholder }}" data-srcset="{{ source.srcset }}" media="{{ media[loop.index0] }}"/>
            {% endfor %}
            {{ imgElement }}
        </picture>
    {% else %}
        {{ imgElement }}
    {% endif %}
{% endset %}
<figure class="image {{ modifier }} {{ class }}">
    {% if data.url %}
        <a
            class="image__link{% if data.anchorClass %} {{ data.anchorClass }}{% endif %}"
            href="{{ data.url }}"
            {% if data.target %}target="{{ data.target }}"{% endif %}
            {% if data.rel %}rel="{{ data.rel }}"{% endif %}
        >
            {{ image }}
        </a>
    {% else %}
        {{ image }}
    {% endif %}
    {% if data.caption %}
        <figcaption class="image__caption">{{ data.caption }}</figcaption>
    {% endif %}
</figure>

{
  "language": "en-US",
  "data": {
    "srcset": "//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w",
    "alt": "image alt text",
    "aspectRatio": {
      "width": 100,
      "height": 100
    },
    "width": 200
  },
  "modifier": "image--align-center"
}
  • Content: 
    .image--align-right {
    float: right;
}

.image--align-left {
    float: left;
}

.image__img {
    &.lazyload,
    &.lazyloading {
        opacity: 0;
        transition: opacity $transition-duration $transition-easing;
    }

    &.lazyloaded {
        opacity: 1;
        transition: opacity $transition-duration $transition-easing;
    }

    .image--fluid & {
        max-width: 100%;
        height: auto;
    }

    .image--align-center & {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/patterns/components/image/image.scss
  • Size: 537 Bytes
  • Content: 
    import 'lazysizes';
import 'lazysizes/plugins/native-loading/ls.native-loading';
import 'picturefill';

import './image.scss';
  • URL: /components/raw/image/image.ts
  • Filesystem Path: src/patterns/components/image/image.ts
  • Size: 127 Bytes
  • Handle: @image--align-center
  • Filesystem Path: src/patterns/components/image/image.twig