README

显示预告对象（标题、图片、文本、链接）的块。通常每行2到4个对象 - 取决于模板。（私有项目，不提供帮助/支持）

要求

• SilverStripe CMS ^4.3
• dnadesign/silverstripe-elemental ^4.0
• sheadawson/silverstripe-linkable ^2.0@dev
• jonom/focuspoint ^3.0

有关此模块的 SilverStripe 4.2 和 Elemental 3.x 兼容版本的说明，请参阅 1.x 版本分支。

建议

• derralf/elemental-styling

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

安装

• 通过 Composer 安装模块

  composer require derralf/elemental-image-teaser
  

配置

基本/默认配置。将其添加到您的 mysite/_config/elements.yml

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

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

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

---
Name: elementalimageteasers
---

Derralf\Elements\ImageTeaser\Element\ElementImageTeaserHolder:
  # disable StyledTitle
  title_tag_variants: null
  title_alignment_variants: null
  # styles
  style_default_description: 'Standard: 2 Spalten'
  styles:
    ThreeColumns: '3 Spalten'
    RoundedImage: 'Runde Bilder, 2 Spalten'
    # bootstrap 4
    ThreeColumnsBS4Cards: '3 Spalten (Bootstrap 4 Cards)'
    FourColumnsBS4Cards: '4 Spalten (Bootstrap 4 Cards)'
    RoundedImageBS4Cards: 'Runde Bilder, 2 Spalten (Bootstrap 4 Cards)'

Derralf\Elements\ImageTeaser\Model\ElementImageTeaser:
  title_tag_default: 'h2'
  title_tag_variants:
    '': 'default'
    h2 : 'H2'
    h3 : 'H3'
    h4 : 'H4'
  use_subtitle: true
  readmore_link_class: 'btn btn-primary btn-readmore'
  styles:
    default: 'default'
    grey: 'grau'
    primary: 'petrol'
    primary-dark: 'petrol dunkel'
    secondary: 'grün'
    white-no-border: 'weiß ohne outliner'

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

# add default styles
DNADesign\Elemental\Controllers\ElementController:
  default_styles:
    # boptstrap 3 example styles
    - derralf/elemental-image-teaser:client/dist/styles/frontend-default.css
    # boptstrap 4 example styles
    - derralf/elemental-image-teaser:client/dist/styles/frontend-bootstrap-4-example.css

有关如何禁用默认样式的说明，请参阅 Elemental 文档 禁用默认样式表。

添加您自己的模板

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

Derralf\Elements\ImageTeaser\Element\ElementImageTeaserHolder:
  styles:
    MyCustomTemplate: "new customized special Layout"

...并将一个名为 ElementImageTeaserHolder_MyCustomTemplate.ss 的模板放入 themes/{your_theme}/templates/Derralf/Elements/ImageTeaser/Element/
和/或添加对 . derralf__elements__imageteaser__element__elementimageteaserholder.mycustomtemplate 的样式到您的样式表中

模板说明

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

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

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

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

屏幕截图

（不可用）