README

一个显示一个或多个图像的内容块。
(私有项目，不提供帮助/支持)

要求

• SilverStripe CMS ^5
• dnadesign/silverstripe-elemental ^4 || ^5
• silverstripe/linkfield ^4
• jonom/focuspoint ^5
• bummzack/sortablefile ^2.2

对于与 SilverStripe 4.3 和 Elemental 4.x 兼容的此模块版本，请参阅 [2.x 发布线](https://github.com/derralf/silverstripe-elemental-textimages/tree/2.0#readme)。

重要
从 sheadawson/silverstripe-linkable 切换到 silverstripe/linkfield
在这里查看迁移指南：https://github.com/silverstripe/silverstripe-linkfield

建议

• derralf/elemental-styling

当使用 derralf/elemental-styling 中的 StyledTitle 时，修改 /templates/Derralf/Elements/TextImages/Includes/Title.ss 以满足您的需求。

安装

• 使用 Composer 安装模块

  composer require derralf/elemental-textimages
  

配置

基本默认配置。将其添加到您的 mysite/_config/elements.yml 并注释/取消注释/添加/删除/修改所需的行

注意 styles 和 image_view_modes 选项，其中列出了扩展中包含的模板。

将 defaults:ImageViewMode 设置为 null 或 image_view_modes 中可用的任何模板。

可选地，您可以将 defaults:Style 设置为任何可用的 styles。

---
Name: elementaltextimages
---
Derralf\Elements\TextImages\Element\ElementTextImages:
  styles:
#    #### Bootstrap 3 #########################################
#    OneRightFiftyFifty: "Bild rechts, 50%"
#    OneLeftFiftyFifty: "Bild links, 50%"
#    OneRight: "Bild rechts, 33%"
#    OneLeft: "Bild links, 33%"
#    OneTop: "Bild oben"
#    OneTop3by1: "Bild oben, Format 3:1"
#    #### Bootstrap 4 #########################################
#    BS4OneLeftFiftyFifty: "(BS4) Bild links, 50%"
#    BS4OneRightFiftyFifty: "(BS4) Bild rechts, 50%"
#    BS4OneLeft: "(BS4) Bild lonks, 33%"
#    BS4OneRight: "(BS4) Bild rechts, 33%"
#    BS4OneLeft25Square: "(BS4) Bild links, 25%, quadratisch"
    #### Bootstrap 5 #########################################
    BS5OneLeftFiftyFifty: "(BS5) Bild links, 50%"
    BS5OneRightFiftyFifty: "(BS5) Bild rechts, 50%"
    BS5OneLeft: "(BS5) Bild links, 33%"
    BS5OneRight: "(BS5) Bild rechts, 33%"
  styles_default_description: ''
  image_view_modes:
      #### Bootstrap 3 #######################################
      HiddenGallery: "versteckte Galerie"
      TwoBelow: "2 weitere Bilder unten, quer"
      TwoBelowSquare: "2 weitere Bilder unten, quadratisch"
      ThreeBelow: "3 weitere Bilder unten"
      FourBelow: "4 weitere Bilder unten (4 Spalten)"
      AllBelow3Cols: "alle weiteren Bilder unten (3 Spalten)"
      #### Bootstrap 4 #######################################
      BS4HiddenGallery: "(BS4) versteckte Galerie"
      BS4AllBelow4Cols:  "(BS4) alle weiteren Bilder unten (4 Spalten)"
      BS4TwoBelow: "(BS4) 2 weitere Bilder unten, quer"
#      #### Bootstrap 5 #########################################
#      BS5HiddenGallery: "(BS5) versteckte Galerie"
#      BS5AllBelow4Cols: "(BS5) alle weiteren Bilder unten (3 Spalten)"
#      BS5TwoBelow: "(BS5) 2 weitere Bilder unten, quer"
#  defaults:
#    ImageViewMode: 'TwoBelow'
  readmore_link_class: 'btn btn-primary btn-readmore'
  
  

此外，您还可以应用默认样式

# add default styles
DNADesign\Elemental\Controllers\ElementController:
  default_styles:
    - derralf/elemental-textimages:client/dist/styles/frontend-default.css

有关禁用默认样式的说明，请参阅 Elemental 文档：https://github.com/dnadesign/silverstripe-elemental#disabling-the-default-stylesheets

添加您自己的模板

您可以像这样添加自己的模板/样式

Derralf\Elements\TextImages\Element\ElementTextImages:
  styles:
    MyCustomTemplate: "new customized special Layout"

...并将名为 ElementTextImages_MyCustomTemplate.ss 的模板放在 themes/{your_theme}/templates/Derralf/Elements/TextImages/Element/
和/或 添加对 .derralf__elements__textimages__element__elementtextimages.mycustomtemplate 的样式到您的样式表

模板说明

包含的模板基于 Bootstrap 3+，但需要额外的/附加的样式（请参阅包含的样式表）。

• 可选地，您可以将此模块提供的基本 CSS 样式要求添加到您的控制器类中，如：mysite/code/PageController.php

      Requirements::css('derralf/elemental-textimages:client/dist/styles/frontend-default.css');
  

  或将 client/src/styles/frontend-default.scss 复制到您的主题 scss 中并进行修改

• 包裹在链接标签中的图像（优化/带有一些用于 lightgallery 的数据属性）
  可选地，您可以要求基本的默认 JavaScript（需要 jQuery）以及（如果未包含在您的主题中）lightgallery（请尊重许可证！）

  Requirements::javascript('https://cdn.jsdelivr.net.cn/npm/lightgallery@1.6.11/dist/js/lightgallery-all.js');
  Requirements::css('https://cdn.jsdelivr.net.cn/npm/lightgallery@1.6.11/dist/css/lightgallery.min.css');
  Requirements::javascript('derralf/elemental-textimages: client/dist/js/lightgallery.init.js');
  

  ...或使用任何其他 lightbox 脚本...

• 图像链接中的数据属性
  模板中提供了 2 个数据属性

  • data-sub-html="$Legend.ATT" 可选地提供 lightgallery 的标题
  • data-exthumbimage="$Me.Fill(96,76).Link" 提供一个缩略图

  您可能想通过扩展 Image 类的 "getLegend()" 方法或合适的 db 字段来扩展 Image 类

屏幕截图

(不可用)