Europa Component Library

Gallery - base

Documentation • Demo

Galleries

When and how to use this component

This component helps the user to quickly browse available media thumbnails (images, videos and audio clips) related to the page’s textual content. These thumbnails display a caption describing the media item along with a visual icon to distinguish between video clips, audio clips and images. It should always be used with the Gallery dialog component, which allows the user to visualize the media in a bigger size and access additional controls for video and audio playback. (The Gallery dialog component needs to be enabled).

When to use this component

  • When I want to have a gallery with different media in order to provide the user with more information about a certain topic, complement existing information.
  • In events pages.
  • When a gallery of images is, in general, needed.

Do not use this component

  • Without the Gallery dialog component
{#
  Accepts:
    - "data" is the root namespace containing rows of gallery items

  Structure of gallery item:
    - "classes" (string): CSS classes to add (mandatory)
    - "image" (@ecl-images): Image to add in the gallery (mandatory)
    - "caption" (string): Textual caption for an image
    - "icon" (string): An icon class building an icon in the item
#}

<div class="ecl-gallery">
  {% if data.rows is defined and data.rows is iterable %}
  {% for row in data.rows %}
  <div class="ecl-row">
    {% if row is iterable %}
    {% for gallery_item in row %}
    <div class="{{ gallery_item.classes }} ecl-gallery__item">
      <div class="ecl-gallery__item-container">
        {% include '@ec-europa/ecl-images' with gallery_item.image %}
        {% if gallery_item.caption is defined %}
        <span class="ecl-gallery__caption">{{ gallery_item.caption }}</span>
        {% endif %}
        {% if gallery_item.icon is defined %}
        <span class="ecl-gallery__icon-wrapper">
          <span class="ecl-gallery__icon ecl-icon {{ gallery_item.icon }}"></span>
        </span>
        {% endif %}
      </div>
    </div>
    {% endfor %}
    {% endif %}
  </div>
  {% endfor %}
  {% endif %}
</div>
 
{
  "data": {
    "rows": [
      [
        {
          "classes": "ecl-col-md-4",
          "image": {
            "src": "http://placehold.it/380x185",
            "alt": "Example alt text",
            "extraAttributes": [
              {
                "name": "typeof",
                "value": "foaf:Image"
              },
              {
                "name": "width",
                "value": "380"
              },
              {
                "name": "height",
                "value": "185"
              }
            ]
          },
          "caption": "Example image caption",
          "icon": "ecl-icon--camera"
        },
        {
          "classes": "ecl-col-md-3",
          "image": {
            "src": "http://placehold.it/285x185",
            "alt": "Example alt text",
            "extraAttributes": [
              {
                "name": "typeof",
                "value": "foaf:Image"
              },
              {
                "name": "width",
                "value": "285"
              },
              {
                "name": "height",
                "value": "185"
              }
            ]
          },
          "icon": "ecl-icon--audio"
        },
        {
          "classes": "ecl-col-md-2",
          "image": {
            "src": "http://placehold.it/190x185",
            "alt": "Example alt text",
            "extraAttributes": [
              {
                "name": "typeof",
                "value": "foaf:Image"
              },
              {
                "name": "width",
                "value": "190"
              },
              {
                "name": "height",
                "value": "185"
              }
            ]
          },
          "caption": "Example image caption",
          "icon": "ecl-icon--camera"
        },
        {
          "classes": "ecl-col-md-3",
          "image": {
            "src": "http://placehold.it/285x185",
            "alt": "Example alt text",
            "extraAttributes": [
              {
                "name": "typeof",
                "value": "foaf:Image"
              },
              {
                "name": "width",
                "value": "285"
              },
              {
                "name": "height",
                "value": "185"
              }
            ]
          }
        }
      ],
      [
        {
          "classes": "ecl-col-md-2",
          "image": {
            "src": "http://placehold.it/190x185",
            "alt": "Example alt text",
            "extraAttributes": [
              {
                "name": "typeof",
                "value": "foaf:Image"
              },
              {
                "name": "width",
                "value": "190"
              },
              {
                "name": "height",
                "value": "185"
              }
            ]
          },
          "caption": "Example image caption"
        },
        {
          "classes": "ecl-col-md-3",
          "image": {
            "src": "http://placehold.it/285x185",
            "alt": "Example alt text",
            "extraAttributes": [
              {
                "name": "typeof",
                "value": "foaf:Image"
              },
              {
                "name": "width",
                "value": "285"
              },
              {
                "name": "height",
                "value": "185"
              }
            ]
          }
        },
        {
          "classes": "ecl-col-md-3",
          "image": {
            "src": "http://placehold.it/285x185",
            "alt": "Example alt text",
            "extraAttributes": [
              {
                "name": "typeof",
                "value": "foaf:Image"
              },
              {
                "name": "width",
                "value": "285"
              },
              {
                "name": "height",
                "value": "185"
              }
            ]
          }
        },
        {
          "classes": "ecl-col-md-4",
          "image": {
            "src": "http://placehold.it/380x185",
            "alt": "Example alt text",
            "extraAttributes": [
              {
                "name": "typeof",
                "value": "foaf:Image"
              },
              {
                "name": "width",
                "value": "380"
              },
              {
                "name": "height",
                "value": "185"
              }
            ]
          },
          "caption": "Example image caption"
        }
      ]
    ]
  }
}
 
<div class="ecl-gallery">
  <div class="ecl-row">
    <div class="ecl-col-md-4 ecl-gallery__item">
      <div class="ecl-gallery__item-container">

        <img alt="Example alt text" src="http://placehold.it/380x185" />

        <span class="ecl-gallery__caption">Example image caption</span>
        <span class="ecl-gallery__icon-wrapper">
          <span class="ecl-gallery__icon ecl-icon ecl-icon--camera"></span>
        </span>
      </div>
    </div>
    <div class="ecl-col-md-3 ecl-gallery__item">
      <div class="ecl-gallery__item-container">

        <img alt="Example alt text" src="http://placehold.it/285x185" />

        <span class="ecl-gallery__icon-wrapper">
          <span class="ecl-gallery__icon ecl-icon ecl-icon--audio"></span>
        </span>
      </div>
    </div>
    <div class="ecl-col-md-2 ecl-gallery__item">
      <div class="ecl-gallery__item-container">

        <img alt="Example alt text" src="http://placehold.it/190x185" />

        <span class="ecl-gallery__caption">Example image caption</span>
        <span class="ecl-gallery__icon-wrapper">
          <span class="ecl-gallery__icon ecl-icon ecl-icon--camera"></span>
        </span>
      </div>
    </div>
    <div class="ecl-col-md-3 ecl-gallery__item">
      <div class="ecl-gallery__item-container">

        <img alt="Example alt text" src="http://placehold.it/285x185" />

      </div>
    </div>
  </div>
  <div class="ecl-row">
    <div class="ecl-col-md-2 ecl-gallery__item">
      <div class="ecl-gallery__item-container">

        <img alt="Example alt text" src="http://placehold.it/190x185" />

        <span class="ecl-gallery__caption">Example image caption</span>
      </div>
    </div>
    <div class="ecl-col-md-3 ecl-gallery__item">
      <div class="ecl-gallery__item-container">

        <img alt="Example alt text" src="http://placehold.it/285x185" />

      </div>
    </div>
    <div class="ecl-col-md-3 ecl-gallery__item">
      <div class="ecl-gallery__item-container">

        <img alt="Example alt text" src="http://placehold.it/285x185" />

      </div>
    </div>
    <div class="ecl-col-md-4 ecl-gallery__item">
      <div class="ecl-gallery__item-container">

        <img alt="Example alt text" src="http://placehold.it/380x185" />

        <span class="ecl-gallery__caption">Example image caption</span>
      </div>
    </div>
  </div>
</div>
  • Content: 
    /**
* Gallery
* @define gallery ; weak
*/

.ecl-gallery {
  margin: 0;
  padding-left: map-get($ecl-spacing, 'xs');
  padding-right: map-get($ecl-spacing, 'xs');
}

.ecl-gallery__item {
  overflow: hidden;
  padding: 0;
}

.ecl-gallery__item-container {
  margin: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxxs') 0;
  width: 100%;

  /**
  * General for 2 reasons:
  *  - ensure consistency
  *  - allow easy integration
  */
  img {
    display: block;
    width: 100%;
  }
}

.ecl-gallery__caption {
  background-color: $ecl-color-shade;
  bottom: 0;
  color: #fff;
  display: none;
  font-size: map-get($ecl-font-size, 'xxs');
  height: 4em;
  overflow: hidden;
  // The line is ignored because prettier wants first line to stay.
  // Whereas the linter wants the rules to go a new line directly.
  /* stylelint-disable-next-line */
  padding: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxs')
    map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxxs');
  position: absolute;
  text-overflow: ellipsis;
  width: 100%;
}

.ecl-gallery__icon-wrapper {
  background-color: $ecl-color-shade;
  bottom: 0;
  color: #fff;
  height: 2.667em;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  text-align: center;
  width: 2.667em;

  // Camera icon needs to be smaller in this context.
  .ecl-icon--camera {
    font-size: map-get($ecl-font-size, 'xxs');
    line-height: 4em;
  }
}

.ecl-gallery__icon {
  font-size: map-get($ecl-font-size, 'm');
  line-height: 2.667em;

  &::before {
    margin-right: 0;
  }
}

// That's how we show the caption on hover
.ecl-gallery__item:hover {
  .ecl-gallery__caption {
    display: block;
  }
}
  • URL: /components/raw/ecl-gallery-base/ecl-gallery-base.scss
  • Filesystem Path: framework/components/ecl-galleries/ecl-gallery-base/ecl-gallery-base.scss
  • Size: 1.7 KB
  • Handle: @ec-europa/ecl-gallery-base
  • Tags: organism
  • Preview:
  • Filesystem Path: framework/components/ecl-galleries/ecl-gallery-base/ecl-gallery-base.twig