欧共体 文本和媒体部分

npm 软件包 : @ecl/text-media

npm install --save @ecl/text-media

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• 编号 (字符串)(默认:随机): 独有的 id
• "变相" (字符串)(默认为: “ ” ): 显示变体; 可以是 “ “ ” , “ 主要 ”
• “介质位置” (字符串)(默认:"右"): 相对于文本的媒体位置; 可以是 “ 左 ” 、 “ 右 ”
• "标题" (字符串)(默认为:""): 内容标题
• "微小标题" (字符串)(默认为:""): 增加的小标题
• "描述" (字符串)(默认为:""): 内容说明
• "链接" (对象)(默认: ): 内容链接,遵循ECL链接结构
• "介质 容器" (对象)(默认: ):使用的媒体(图片或视频),遵循ECL媒体容器结构
• "满" "活" (boolean) (默认:虚假): 全宽显示( 网格内侧)
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/text-media/text-media.html.twig' with {
  micro_title: 'About',
  title: 'Non per curiositatem opinionum',
  description:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
  link: {
    link: {
      type: 'standalone',
      path: exampleLink,
      label: 'Read more',
    },
    icon: {
      name: 'arrow-right',
      family: 'phosphor',
      size: 'm',
    },
  },
  media_container: {
    picture: {
      img: {
        alt: 'Lorem ipsum dolor sit amet',
        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg',
      },
    },
    description: 'Lorem ipsum dolor sit amet consectetur adipiscing elite tempored incididunt ut labore et dolore magna aliqua lorem ipsum dolor sit amet consectetur adipiscing',
    credit: '@Copyright',
  },
} %}