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 

{% apply 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>
{% endapply %}
 
<!-- Default -->
<figure>
    <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="Image alt text" /></div>
    <figcaption>Figure caption comes here.</figcaption>
</figure>


<!-- No Caption -->
<figure>
    <div class="image-wrapper" data-ratio="8:5"><img src="https://via.placeholder.com/800x500&text=8:5+(800x500)" alt="Image alt text" /></div>
</figure>


<!-- Image Placeholder -->
<figure>
    <div class="image-wrapper" data-ratio="8:5"></div>
</figure>


<!-- Broken Image Placeholder -->
<figure>
    <div class="image-wrapper" data-ratio="8:5"><img src="http://example.com/broken-url.jpg" alt="Image alt text" /></div>
    <figcaption>Figure caption comes here.</figcaption>
</figure>


/* Default */
{
  "caption": "Figure caption comes here.",
  "src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
  "alt_text": "Image alt text",
  "ratio": "8:5"
}


/* No Caption */
{
  "caption": false,
  "src": "https://via.placeholder.com/800x500&text=8:5+(800x500)",
  "alt_text": "Image alt text",
  "ratio": "8:5"
}


/* Image Placeholder */
{
  "caption": false,
  "src": false,
  "alt_text": "Image alt text",
  "ratio": "8:5"
}


/* Broken Image Placeholder */
{
  "caption": "Figure caption comes here.",
  "src": "http://example.com/broken-url.jpg",
  "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-tertiary--lighten-5', 'image-placeholder-background-color');

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

  &:empty {
    &::before {
      @include theme('color', 'color-primary', 'image-spot-shadow');
      $image-icon-svg: svg-icon('image', color('cyan'), 70, 70);

      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      max-width: 3rem;
      max-height: 3rem;
      margin: auto;
      background-image: svg-url($image-icon-svg);
      background-size: contain;
      content: "";

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

  // Add ratio for images in this array
  $ratios: (1: 1, 4: 1, 8: 5, 765: 360);

  @each $ratio-width, $ratio-height in $ratios {
    &[data-ratio='#{$ratio-width}:#{$ratio-height}'] {
      padding-bottom: calc(100% / $ratio-width * $ratio-height);
    }
  }

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

    &::before {
      @include theme('background-color', 'color-zero--lighten-5', 'broken-image-background-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('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.2 KB