EU System

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)
{#
  Parameters:
    - 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: '' })
#}

{% include '@ecl/generic-style-image' %}
 
/* Using <img> tag */
{
  "src": "../../assets/demo_images/nature-demo-1.jpg",
  "alt": "This is a test image",
  "responsive": true
}


/* 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",
  "responsive": true
}


<!-- Using <img> tag -->
<img class="ecl-image ecl-image--fluid" 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" class="ecl-image ecl-image--fluid">
</picture>
  • Content: 
    /**
 * Image
 * @define image
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-style-image/generic-style-image--editor';

// Use generic mixin
@include exports('eu-style-image--editor') {
  @include ecl-editor-image();
}
  • URL: /components/raw/eu-style-image/eu-style-image--editor.scss
  • Filesystem Path: ../../src/systems/eu/eu-style/eu-style-image/eu-style-image--editor.scss
  • Size: 258 Bytes
  • Content: 
    /**
 * Image
 * @define image 
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-style-image/generic-style-image';

// Use generic mixin
@include exports('eu-style-image') {
  @include ecl-image();
}
  • URL: /components/raw/eu-style-image/eu-style-image.scss
  • Filesystem Path: ../../src/systems/eu/eu-style/eu-style-image/eu-style-image.scss
  • Size: 236 Bytes
  • Handle: @ecl/eu-style-image
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-style/eu-style-image/eu-style-image.twig