PHPackages                             blueways/bw-placeholder-images - 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. blueways/bw-placeholder-images

ActiveTypo3-cms-extension

blueways/bw-placeholder-images
==============================

Inline SVG placeholder images with lazy loading

v1.2.0(3y ago)02.1kMITPHP

Since Mar 20Pushed 3y ago1 watchersCompare

[ Source](https://github.com/maikschneider/bw_placeholder_images)[ Packagist](https://packagist.org/packages/blueways/bw-placeholder-images)[ RSS](/packages/blueways-bw-placeholder-images/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependencies (33)Versions (7)Used By (0)

[![](Documentation/example.jpg)](Documentation/example.jpg)

TYPO3 Extension: Placeholder Images
===================================

[](#typo3-extension-placeholder-images)

Generates SVG inline placeholder images from FAL Media elements. The [Foundation Interchange plugin](https://foundation.zurb.com/sites/docs/interchange.html) is configured to resolve the right responsive image. The SVG placeholder consists of three gradients with 9 different colors from the original FAL image to make it look more natural.

The color extrection code is based on Frans Saris [lazy\_load\_placeholder](https://github.com/fsaris/lazy_load_placeholder) TYPO3 extension. Lazy loading code inspired by [Mika Tuupola](https://appelsiini.net/projects/lazyload/). SVG inline compression is done like Taylor Hunt explained it in his [blog post](https://codepen.io/tigt/post/optimizing-svgs-in-data-uris).

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

[](#requirements)

- TYPO3 v8.0+
- Foundation 6 (or Foundation.Interchange Plugin)

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

[](#installation)

This extension is installable only via composer.

- `composer require blueways/bw-placeholder-images`
- include TypoScript template

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

[](#configuration)

The Javascript File is automatically included via `includeJSFooterLibs`. This can be disabled by unsetting

```
plugin.bw_placeholder_images.settings.placeholderImagesJS = EXT:bw_placeholder_images/Resources/Public/JavaScript/placeholderImages.js

```

Useage
------

[](#useage)

The color extraction starts automatically after uploading any `jpg, jpeg, gif` or `png` image via FAL.

### Viewhelper

[](#viewhelper)

Register the viewhelpers in any fluid template.

```
{namespace bw=Blueways\BwPlaceholderImages\ViewHelpers}

```

#### bw:lazyImage

[](#bwlazyimage)

This viewhelper acts like the normal `` viewhelper, however there is an svg image output of the referenced `src` or `image`. The final images are added via `additionalAttributes` in Foundation Interchange style.

Example with different crop variants:

```

```

#### bw:lazyPlaceholder

[](#bwlazyplaceholder)

Acts like `` viewhelper.

Foundation Interchange can handle responsive background images, this viewhelper helps to generate the nessecary Output of an image resource path.

Example without crop variant and only one final image for all sizes:

```

```

Attention: The `style=''` Tag needs to be rendered with single quotes.

TODO
----

[](#todo)

- include dependencies in package
- make fallback color editable via typoscript
- animate image switch

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity64

Established project with proven stability

 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 ~263 days

Recently: every ~315 days

Total

6

Last Release

1292d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/04b105eb2ade5d364c2ae93a9a012d591594eaa3ad54d252db70856d1c293d5d?d=identicon)[m.schneider](/maintainers/m.schneider)

---

Top Contributors

[![maikschneider](https://avatars.githubusercontent.com/u/696865?v=4)](https://github.com/maikschneider "maikschneider (66 commits)")

### Embed Badge

![Health badge](/badges/blueways-bw-placeholder-images/health.svg)

```
[![Health](https://phpackages.com/badges/blueways-bw-placeholder-images/health.svg)](https://phpackages.com/packages/blueways-bw-placeholder-images)
```

###  Alternatives

[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)[causal/extractor

This extension detects and extracts metadata (EXIF / IPTC / XMP / ...) from potentially thousand different file types (such as MS Word/Powerpoint/Excel documents, PDF and images) and bring them automatically and natively to TYPO3 when uploading assets. Works with built-in PHP functions but takes advantage of Apache Tika and other external tools for enhanced metadata extraction.

16244.5k](/packages/causal-extractor)[christophlehmann/imageoptimizer

Optimize uploaded/processed images with binaries of your choice

46501.8k](/packages/christophlehmann-imageoptimizer)[b13/assetcollector

Add CSS and SVG files and strings as inline style tag/inline svg to the html code.

10118.4k](/packages/b13-assetcollector)[mautic/mautic-typo3

Add-on TYPO3 extension that enhances the "EXT:marketing\_automation" TYPO3 extension by connecting it to the Mautic Marketing Automation platform: Determine "Persona" from Mautic segments. Also provides additional services e.g. language synchronisation between Mautic and TYPO3.

236.3k](/packages/mautic-mautic-typo3)

PHPackages © 2026

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