Europa Component Library

Images

Documentation • Demo

Images

Using images, just like any other component of a website, should be done with careful thought and consideration. Use images with purpose.

Two possible display are available:

  • Standard <img> tag, with a single image source
  • HTML5 <picture> tag, with multiple image source (depending on screen size)
{#
  Accepts:
    - src (string): specifies the URL of the image, for single image tag
    - srcs (object): different image URL, depending in screen size; used with picture tag
      - xs: very small image URL
      - sm: small image URL
      - md: medium image URL
      - lg: large image URL
      - xl: extra large image URL (also default image)
    - alt (string): specifies an alternate text for the image
    - extra_classes (string): additional classes to add to the component
    - extra_attributes (array of { name: '', value: '' })
#}

{# Internal properties #}

{% set _src = src|default('') %}
{% set _css_class = '' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if srcs is defined and srcs.xl is defined and srcs.xl is not empty %}
  {% set _src = srcs.xl %}
{% endif %}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{% if srcs is defined %}

<picture
  {% if _css_class is not empty %}class="{{ _css_class }}"{% endif %}
  {{ _extra_attributes|raw }}>

  {% if srcs.xl is defined and srcs.xl is not empty %}
  <source media="(min-width: 1200px)" srcset="{{ srcs.xl }}">
    {% endif %}

  {% if srcs.lg is defined and srcs.lg is not empty %}
    <source media="(min-width: 992px)" srcset="{{ srcs.lg }}">
  {% endif %}

  {% if srcs.md is defined and srcs.md is not empty %}
  <source media="(min-width: 768px)" srcset="{{ srcs.md }}">
    {% endif %}

  {% if srcs.sm is defined and srcs.sm is not empty %}
  <source media="(min-width: 480px)" srcset="{{ srcs.sm }}">
  {% endif %}

  {% if srcs.xs is defined and srcs.xs is not empty %}
  <source media="(max-width: 479px)" srcset="{{ srcs.xs }}">
  {% endif %}

  <img src="{{ _src }}" alt="{{ alt }}">
</picture>

{% else %}

<img
  {% if _css_class is not empty %}class="{{ _css_class }}"{% endif %}
  alt="{{ alt }}"
  src="{{ _src }}"
  {{ _extra_attributes|raw }} />

{% endif %}
 
/* Using <img> tag */
{
  "src": "../../assets/demo_images/nature-demo-1.jpg",
  "alt": "This is a test image"
}


/* Using <picture> tag */
{
  "srcs": {
    "xs": "../../assets/demo_images/400x300.png",
    "sm": "../../assets/demo_images/640x480.png",
    "md": "../../assets/demo_images/800x600.png",
    "lg": "../../assets/demo_images/1024x768.png",
    "xl": "../../assets/demo_images/1280x960.png"
  },
  "alt": "This is a test image"
}


<!-- Using <img> tag -->
<img alt="This is a test image" src="../../assets/demo_images/nature-demo-1.jpg" />


<!-- Using <picture> tag -->
<picture>

  <source media="(min-width: 1200px)" srcset="../../assets/demo_images/1280x960.png">

  <source media="(min-width: 992px)" srcset="../../assets/demo_images/1024x768.png">

  <source media="(min-width: 768px)" srcset="../../assets/demo_images/800x600.png">

  <source media="(min-width: 480px)" srcset="../../assets/demo_images/640x480.png">

  <source media="(max-width: 479px)" srcset="../../assets/demo_images/400x300.png">

  <img src="../../assets/demo_images/1280x960.png" alt="This is a test image">
</picture>