City of Ghent Style Guide

Image

When to use this component

Use the image component to present an image on a page.

How it works

For images, the following requirements should be followed:

  • An alt attribute is required. A short text alternative should be specified using the alt attribute. See WCAG Technique page
  • For images that are purely decorative images, the alt attributes must be empty.
  • An aspect ratio should always be provided. The default aspect ratio is 8:5.
  • When the image cannot be loaded or is not found, a placeholder is used. See the “broken image placeholder” example.
  • When there is no image to show, a placeholder is used. See the “no image placeholder” example.

The image components also adds the benefit of providing an optional caption tag.

Usage within the style guide

The image component is used in the:

Image: Image Placeholder 

{% spaceless %}
  <figure {% if modifier %} class="{{ modifier }}" {% endif %}>
    {% if ratio %}
      <div class="image-wrapper" data-ratio="{{ ratio }}">
    {% endif %}

      {% if src %}
        <img
          src="{{ src }}"
          alt="{{ alt_text }}"
          {% if modifier %}
            class="{{ modifier }}"
          {% endif %}
        />
      {% endif %}

    {% if ratio %}
      </div>
    {% endif %}

    {% if caption %}
      {% include '@figcaption' with {
          'figcaption': caption
        } %}
    {% endif %}

  </figure>
{% endspaceless %}
 
<figure>
    <div class="image-wrapper" data-ratio="8:5"></div>
</figure>
 
{
  "caption": false,
  "src": false,
  "alt_text": "Image alt text",
  "ratio": "8:5"
}
  • Content: 
    img {
  max-width: 100%;
  height: auto;
}

figure {
  img {
    display: block;
    width: 100%;
  }
}

.image-wrapper {
  @include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');

  position: relative;
  padding-bottom: calc(100% / 8 * 5); // Default ratio 8:5
  overflow: hidden;

  &:empty {
    &::before {
      @include spot-image('camera-light', auto);
      @include theme('color', 'color-primary', 'image-spot-shadow');

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      max-width: 3rem;
      max-height: 3rem;
      margin: auto;
      border-radius: 50%;
      background-size: contain;
      box-shadow: 0 10px 35px -25px;
      content: "";

      @include tablet {
        max-width: 5rem;
        max-height: 5rem;
      }
    }
  }

  &[data-ratio='1:1'] {
    padding-bottom: 100%;
  }

  &[data-ratio='4:1'] {
    padding-bottom: calc(100% / 4 * 1);
  }

  img {
    position: absolute;
    width: 100%;
    min-height: 100%;

    &::before {
      @include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');

      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
    }

    &::after {
      display: flex;
      position: absolute;
      top: 50%;
      left: 50%;
      align-items: center;
      justify-content: center;
      padding-top: 1.4rem;
      transform: translate(-50%, -50%);
      background: url('#{$styleguide-dir}/img/iconfont/broken-link.svg') no-repeat top center;
      background-size: 1.2rem auto;
      color: color('dark-gray', -1);
      font-size: .6rem;
      line-height: 1rem;
      text-align: center;
      white-space: pre;
      content: "Image could not be loaded:\A" attr(alt);
    }

    html[lang="nl"] &::after {
      content: "Afbeelding kon niet worden geladen:\A"attr(alt);
    }

    html[lang="fr"] &::after {
      content: "L\'image n'a pas pu être chargée:\A" attr(alt);
    }
  }
}
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: components/21-atoms/image/_image.scss
  • Size: 2.1 KB