A content block with HTML-Text and Image(s) for the silverstripe-elemental module

Installs: 26

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 1

Open Issues: 0



dev-master / 2.x-dev 2019-07-26 13:46 UTC

This package is auto-updated.

Last update: 2020-03-26 15:27:38 UTC


A block that displays content with one or multiple Images.
(private project, no help/support provided)


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

For a SilverStripe 4.2 and Elemental 3.x compatible version of this module, please see the 1.x release line.


  • derralf/elemental-styling

Modify /templates/Derralf/Elements/TextImages/Includes/ to your needs when using StyledTitle from derralf/elemental-styling.


  • Install the module via Composer
    composer require derralf/elemental-textimages


A basic/default config. Add this to your mysite/_config/elements.yml

Note the options for styles and image_view_modes, in which the templates contained in the extension are listed.

Set defaults:ImageViewMode to null or any of the avaiable Templates from image_view_modes.

Optionally you may set defaults:Styleto any of the available styles.

Name: elementaltextimages
    '': "Standard (kein Bild beim Text)"
    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"
      '': "keine weiteren Bilder unter dem Text anzeigen"
      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)"
    ImageViewMode: 'TwoBelow'
  readmore_link_class: 'btn btn-primary btn-readmore'

Additionally you may apply the default styles:

# add default styles
    - derralf/elemental-textimages:client/dist/styles/frontend-default.css

See Elemental Docs for how to disable the default styles.

Adding your own templates

You may add your own templates/styles like this:

    MyCustomTemplate: "new customized special Layout"

...and put a template named ElementTextImages_MyCustomTemplate.ssin themes/{your_theme}/templates/Derralf/Elements/TextImages/Element/
and/or add styles for .derralf__elements__textimages__element__elementtextimages.mycustomtemplate to your style sheet

Template Notes

Included templates are based on Bootstrap 3+ but require extra/additional styling (see included stylesheet).

  • Optionaly, you can require basic CSS stylings provided with this module to your controller class like: mysite/code/PageController.php


    or copy over and modify client/src/styles/frontend-default.scss in your theme scss

  • Images wrapped in link tags (optimized / with some data-attributes for lightgallery)
    Optionally you can require a basic default javascript (requires jQuery) and (if not already included in your theme) lightgallery (respect license!)

    Requirements::javascript('derralf/elemental-textimages: client/dist/js/lightgallery.init.js');

    ...or use any other lightbox script...

  • data-attributes in Image Links
    2 data-attributes are supplied in the templates:

    • data-sub-html="$Legend.ATT" to optinally provide a caption for lightgallery
    • data-exthumbimage="$Me.Fill(96,76).Link" to provide an thumbnail for lightgallery

    You may want to extend Image class with a "getLegend()" method or suitable db field

Screen Shots

(not available)