ECL 图片库

npm 软件包 : @ecl/gallery

npm install --save @ecl/gallery

参数

• 格丽德 (boolean) (默认: 假) 显示相册为网格
• "网格 温度" (int) (默认: 0) 拟使用的模板 Id. 只显示网格
• "栏" (int) (默认:3)列数. 只显示网格
• "论" (字符串) (默认:"3-2") 图像宽比. 只显示网格
• "画面" (boolean) (默认:虚假) 缩略图应该有缩放动画吗?
• 编号 (字符串)(默认:随机) 画廊独有的代号
• "重叠" (对象) (默认: )
  • “ 关闭”( 对象)( 默认 : q): 类型按钮的对象
  • “ 先前” (对象)( 默认 : q): 类型按钮的对象
  • "next"(对象)(默认:qq):类型按钮的对象
  • “反分隔符”(字符串)(默认为:')
  • “ full screen label” (字符串)(默认:')
  • "下载"(对象)(默认:qq):类型链接的对象
  • "共享"(对象)(默认:qq):类型链接的对象
  • “ 已公布 标签” (字符串)(默认: “ ” ): 发布日期标签
  • “ sr overlay label” (字符串)(默认为 : “ ”) 覆盖的 aria- 标签
• “项目” (阵列) (默认: [])
  • "标题"(字符串)(默认:")
  • “ title always visible” (布尔语)(默认:虚假)
  • "描述"(字符串)(默认:")
  • "meta" (字符串)(默认:")
  • “ icon”( 对象)( 默认 : q): 类型图标的对象
  • "thumbnail"(对象)(默认:-) 缩略图, 遵循 ECL 图片结构; 如果为空, 倒回“ 图片 ”
  • "图片"(对象)(默认:QQ) 全尺寸图片, 遵循ECL 图片结构; 总是需要, 甚至对于视频项目
  • "video"(对象)(默认:QQ) 视频项目的视频对象
  • "嵌入式 video"(对象)(默认: ) 嵌入式视频对象( 基于框架)
  • "sr video audio" (字符串)(默认为:"'):用于显示是否有音频描述的额外文本;用于屏幕阅读器
  • 覆盖中共享按钮的“ share path” (字符串)(默认为 : “ ”) URL
  • "公示 日期"(字符串)(默认:")
  • "video 长" (字符串)(默认:")
• “ 可见项目” (整数) (默认: 8) 可扩展画廊中的可见项数
• "扩张" (boolean) (默认:真实)可折叠/可扩展相册
• "sr gallery label" (英语) (字符串) (默认:"'"):为画廊添加标签,提供指示;为屏幕阅读器
• "sr video label" (中文(简体) ) (字符串) (默认:"'"):视频项目的附加标签;屏幕阅读器
• "sr video player" (英语) (字符串) (默认:''):视频播放器的额外标签;屏幕阅读器
• "脚" (对象) (默认: ) 页脚链接
• “视图 全 标签” (字符串) (默认为: “ ” ) 视图的所有按钮标签
• “视图 全部 扩展 标签” (字符串)(默认为:") 展廊被扩展时的标签
• “反标签” (字符串)(默认:") 计数器的标签
• "残疾" (boolean) (默认:虚假) 关闭悬停时的标题显示
• "残疾 重叠" (boolean) (默认:虚假) 禁用覆盖功能
• "满" "活" (boolean) (默认:虚假) 桌面和平板电脑视图的全宽画廊
• "所选项目 d" (int)(默认:0)
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例:

{% 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', 
      }, 
    }, 
  }, 
} %}