derralf/elemental-textimages

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

Installs: 59

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 1

Open Issues: 0

Language:Scheme

Type:silverstripe-vendormodule

dev-master / 2.x-dev 2021-05-03 12:32 UTC

This package is auto-updated.

Last update: 2024-02-29 03:24:30 UTC


README

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

Requirements

  • 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.

Suggestions

  • derralf/elemental-styling

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

Installation

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

Configuration

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
---
Derralf\Elements\TextImages\Element\ElementTextImages:
  styles:
    '': "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"
  image_view_modes:
      '': "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)"
  defaults:
    ImageViewMode: 'TwoBelow'
  readmore_link_class: 'btn btn-primary btn-readmore'

Additionally you may apply the default styles:

# add default styles
DNADesign\Elemental\Controllers\ElementController:
  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:

Derralf\Elements\TextImages\Element\ElementTextImages:
  styles:
    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

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

    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('https://cdn.jsdelivr.net/npm/lightgallery@1.6.11/dist/js/lightgallery-all.js');
    Requirements::css('https://cdn.jsdelivr.net/npm/lightgallery@1.6.11/dist/css/lightgallery.min.css');
    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)