derralf/elemental-image-teaser

A content block to display teasers/promos for the silverstripe-elemental module

Installs: 9

Dependents: 0

Suggesters: 0

Stars: 0

Watchers: 1

Forks: 1

Open Issues: 0

Type:silverstripe-vendormodule

dev-master / 1.x-dev 2018-10-01 10:02 UTC

README

A block that displays teaser objects (header, image, text, link). Usually 2 to 4 objects per row - depends on the template. (private project, no help/support provided)

Requirements

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

Suggestions

  • derralf/elemental-styling

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

Installation

  • Install the module via Composer
    composer require derralf/silverstripe-elemental-image-teaser
    

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: 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'

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'

Additionally you may apply the default styles:

# add default styles
DNADesign\Elemental\Controllers\ElementController:
  default_styles:
    - derralf/elemental-image-teaser: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\ImageTeaser\Element\ElementImageTeaserHolder:
  styles:
    MyCustomTemplate: "new customized special Layout"

...and put a template named ElementImageTeaserHolder_MyCustomTemplate.ssin themes/{your_theme}/templates/Derralf/Elements/ImageTeaser/Element/
and/or add styles for . derralf__elements__imageteaser__element__elementimageteaserholder.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-image-teaser:client/dist/styles/frontend-default.css');
    
    or copy over and modify client/src/styles/frontend-default.scss in your theme scss

Screen Shots

(not available)