ECL Gallery

npm package: @ecl/gallery

npm install --save @ecl/gallery

Parameters

• "grid" (boolean) (default: false) Display gallery as a grid
• "grid_template" (int) (default: 0) Id of the template to be used. Grid display only
• "column" (int) (default: 3) Number of columns. Grid display only
• "ratio" (string) (default: '3-2') Image aspect ratio. Grid display only
• "picture_zoom" (boolean) (default: false) Should the thumbnail pictures have a zoom animation?
• "id" (string) (default: random) Unique id for the gallery
• "overlay" (object) (default: {})
  • "close" (object) (default: {}): object of type button
  • "previous" (object) (default: {}): object of type button
  • "next" (object) (default: {}): object of type button
  • "counter_separator" (string) (default: '')
  • "full_screen_label" (string) (default: '')
  • "download" (object) (default: {}): object of type link
  • "share" (object) (default: {}): object of type link
  • "published_label" (string) (default: ''): label for the publication date
  • "sr_overlay_label" (string) (default: '') aria-label for the overlay
• "items" (array) (default: [])
  • "title" (string) (default: '')
  • "title_always_visible" (boolean) (default: false)
  • "description" (string) (default: '')
  • "meta" (string) (default: '')
  • "icon" (object) (default: {}): object of type icon
  • "thumbnail" (object) (default: {}) Thumbnail picture, following ECL Picture structure; falls back to "picture" if empty
  • "picture" (object) (default: {}) Full-size picture, following ECL Picture structure; always required, even for video items
  • "video" (object) (default: {}) Video object for video items
  • "embedded_video" (object) (default: {}) Embedded video object (iframe-based)
  • "sr_video_audio" (string) (default: ''): additional text to indicate if there is an audio description; for screen readers
  • "share_path" (string) (default: '') URL for the share button in the overlay
  • "publication_date" (string) (default: '')
  • "video_length" (string) (default: '')
• "visible_items" (integer) (default: 8) Number of visible items in an expandable gallery
• "expandable" (boolean) (default: true) collapsible/expandable gallery
• "sr_gallery_label" (string) (default: ''): additional label for the gallery, providing instruction; for screen readers
• "sr_video_label" (string) (default: ''): additional label for the video items; for screen readers
• "sr_video_player" (string) (default: ''): additional label for the video player; for screen readers
• "footer" (object) (default: {}) Footer link
• "view_all_label" (string) (default: '') Label of the view all button
• "view_all_expanded_label" (string) (default: '') Label when the gallery is expanded
• "counter_label" (string) (default: '') Label of the counter
• "disable_hover" (boolean) (default: false) Disables the title display on hover
• "disable_overlay" (boolean) (default: false) Disables the overlay functionality
• "full_width" (boolean) (default: false) Full width gallery for desktop and tablet viewports
• "selected_item_id" (int) (default: 0)
• "extra_classes" (string) (default: '') Extra classes (space separated)
• "extra_attributes" (array) (default: []) Extra attributes
  • "name" (string) Attribute name, eg. 'data-test'
  • "value" (string) Attribute value, eg: 'data-test-1'

Example :

{% include '@ecl/gallery/gallery.html.twig' with {  
  id: 'my-gallery',
  view_all_label: 'View all', 
  counter_label: 'Media files in this gallery' , 
  visible_items: 6,
  disable_overlay: false,
  sr_video_label: 'Video',
  sr_video_player: 'Video player',
  items: [ 
    { 
      thumbnail: {
        img: {
          src: 'path/to/thumbnail.jpg', 
          alt: 'Image 1',
        },
      }, 
      picture: {
        img: {
          src: 'path/to/image.jpg', 
          alt: 'Image 1',
        },
      }, 
      title: 'The EU in brief',
      description: 
        'The EU in brief, institutions and bodies, countries, symbols, history, facts and figures', 
      meta: 'Copyright, Author, Licence for image 1', 
      share_href: '/share#example-image.jpg', 
    }, 
    { 
      picture: {
        img: {
          src: 'path/to/image2.jpg', 
          alt: 'Image 2',
        },
      }, 
      title: 'Living in the EU',
      description: 'Living, working, travelling in the EU', 
      meta: 'Copyright, Author, Licence for image 2', 
      share_href: '/share#example-image2.jpg', 
    }, 
    ... 
  ], 
  footer: { 
    link: { 
      label: "Link to further media items", 
      path: "/example", 
      aria_label: "View all link aria-label value" 
    }, 
    icon: { 
      name: "external", 
      size: "s" 
    } 
  },
  overlay: { 
    published_label: 'Published',
    close: { 
      variant: 'ghost', 
      label: 'Close', 
    }, 
    previous: { 
      variant: 'ghost', 
      label: 'Previous', 
      icon_position: 'before', 
    }, 
    next: { 
      variant: 'ghost', 
      label: 'Next', 
    }, 
    counter_separator: 'of', 
    full_screen_label: 'View original',
    share: { 
      label: 'Share', 
      icon: { 
        name: 'share-network',
        family: 'phosphor',
        size: 'fluid', 
      }, 
    }, 
  }, 
} %}