PHPackages                             derralf/elemental-textimages - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. derralf/elemental-textimages

ActiveSilverstripe-vendormodule

derralf/elemental-textimages
============================

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

2.0.x-dev(5y ago)0641BSD-3-ClauseScheme

Since Oct 4Pushed 1y ago1 watchersCompare

[ Source](https://github.com/derralf/silverstripe-elemental-textimages)[ Packagist](https://packagist.org/packages/derralf/elemental-textimages)[ RSS](/packages/derralf-elemental-textimages/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependencies (5)Versions (4)Used By (0)

SilverStripe Elemental Text-Images Block
========================================

[](#silverstripe-elemental-text-images-block)

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

Requirements
------------

[](#requirements)

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

For a SilverStripe 4.3 and Elemental 4.x compatible version of this module, please see the \[2.x release line\](.

Important:
Switched from `sheadawson/silverstripe-linkable` to `silverstripe/linkfield`
see migration guide here:

Suggestions
-----------

[](#suggestions)

- derralf/elemental-styling

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

Installation
------------

[](#installation)

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

    ```

Configuration
-------------

[](#configuration)

A basic/default config. Add this to your **mysite/\_config/elements.yml** and comment/uncomment/add/remove/modify the needed lines

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:Style`to any of the available `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'

```

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](https://github.com/dnadesign/silverstripe-elemental#disabling-the-default-stylesheets).

### Adding your own templates

[](#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.ss`in `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
--------------

[](#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](http://sachinchoolur.github.io/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
------------

[](#screen-shots)

(not available)

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance28

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~941 days

Total

2

Last Release

1833d ago

Major Versions

1.0.x-dev → 2.0.x-dev2021-05-03

### Community

Maintainers

![](https://www.gravatar.com/avatar/d6353682e85ce5b5f238126c18b0e13770f0e0ffaf9c9d24588cdd2a84ab9a8b?d=identicon)[derralf](/maintainers/derralf)

---

Top Contributors

[![derralf](https://avatars.githubusercontent.com/u/1495867?v=4)](https://github.com/derralf "derralf (2 commits)")

---

Tags

silverstripeContent Blockselemental

### Embed Badge

![Health badge](/badges/derralf-elemental-textimages/health.svg)

```
[![Health](https://phpackages.com/badges/derralf-elemental-textimages/health.svg)](https://phpackages.com/packages/derralf-elemental-textimages)
```

###  Alternatives

[dnadesign/silverstripe-elemental

Elemental pagetype and collection of Elements

1151.0M254](/packages/dnadesign-silverstripe-elemental)[wedevelopnl/silverstripe-elemental-grid

Elemental grid module

1014.1k2](/packages/wedevelopnl-silverstripe-elemental-grid)[fractas/elemental-stylings

Collection of useful and reusable SilverStripe Elemental stylings properties

1416.4k1](/packages/fractas-elemental-stylings)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)