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. [Image & Media](/categories/media)
4. /
5. blueways/bw-placeholder-images

ActiveTypo3-cms-extension[Image & Media](/categories/media)

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 2w ago

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 62% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity65

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

1340d 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

611.0M7](/packages/netresearch-rte-ckeditor-image)[plan2net/webp

Drop-in WebP, AVIF, and JPEG XL delivery for TYPO3 images — automatic, no URL or template changes

651.5M5](/packages/plan2net-webp)[friendsoftypo3/content-blocks

TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML

101466.4k45](/packages/friendsoftypo3-content-blocks)[spacecatninja/imager-x

Ninja powered image transforms.

29399.9k35](/packages/spacecatninja-imager-x)[christophlehmann/imageoptimizer

Optimize uploaded/processed images with binaries of your choice

46515.8k](/packages/christophlehmann-imageoptimizer)[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.

16256.1k](/packages/causal-extractor)

PHPackages © 2026

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