PHPackages                             kerox/twig-image-placeholder-extension - 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. [Templating & Views](/categories/templating)
4. /
5. kerox/twig-image-placeholder-extension

ActiveTwig-extension[Templating & Views](/categories/templating)

kerox/twig-image-placeholder-extension
======================================

A Twig extension to generate images placeholder

v2.0.0(3y ago)1434MITPHPPHP >=8.1CI failing

Since Mar 21Pushed 3y ago1 watchersCompare

[ Source](https://github.com/ker0x/twig-image-placeholder-extension)[ Packagist](https://packagist.org/packages/kerox/twig-image-placeholder-extension)[ Docs](https://github.com/ker0x/twig-image-placeholder-extension)[ RSS](/packages/kerox-twig-image-placeholder-extension/feed)WikiDiscussions main Synced yesterday

READMEChangelog (5)Dependencies (3)Versions (6)Used By (0)

 [ ![Build](https://camo.githubusercontent.com/9db5996a222596c41e047cde04daf540628bab3e1498e90c15afb0eb0921ab28/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f776f726b666c6f772f7374617475732f6b657230782f747769672d696d6167652d706c616365686f6c6465722d657874656e73696f6e2f63693f7374796c653d666f722d7468652d6261646765) ](https://github.com/ker0x/twig-image-placeholder-extension/actions "Build") [ ![Coverage](https://camo.githubusercontent.com/214c65bcba08af5443860c35418b386e10b76f7f01341fbb0fbf018520985b80/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f67682f6b657230782f747769672d696d6167652d706c616365686f6c6465722d657874656e73696f6e3f7374796c653d666f722d7468652d6261646765) ](https://codecov.io/gh/ker0x/twig-image-placeholder-extension/ "Coverage") [ ![PHP Version](https://camo.githubusercontent.com/03a63ba52b34a79b1d70401a6c6374c6d58aa3a43c106107eee9f575146d0d1b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344253230382e312d3838393242462e7376673f7374796c653d666f722d7468652d6261646765) ](https://php.net "PHP Version") [ ![Downloads](https://camo.githubusercontent.com/b0c6c42ea9610a92daee4031400f260e4567714f762e9549527e72bbde53eff5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6b65726f782f747769672d696d6167652d706c616365686f6c6465722d657874656e73696f6e2e7376673f7374796c653d666f722d7468652d6261646765) ](https://packagist.org/packages/kerox/twig-image-placeholder-extension "Downloads") [ ![Latest Stable Version](https://camo.githubusercontent.com/ea13530efe5b78f9969c47465519680edb8d8f01fedb27b305692e198055e0e5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6b65726f782f747769672d696d6167652d706c616365686f6c6465722d657874656e73696f6e2e7376673f7374796c653d666f722d7468652d6261646765) ](https://packagist.org/packages/kerox/twig-image-placeholder-extension "Latest Stable Version") [ ![License](https://camo.githubusercontent.com/7159257eccd6516a3efe12b68ccd0675cf07ff0f6b3bd76c3df2b738596bf93a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6b65726f782f747769672d696d6167652d706c616365686f6c6465722d657874656e73696f6e2e7376673f7374796c653d666f722d7468652d6261646765) ](https://packagist.org/packages/kerox/twig-image-placeholder-extension "License")

Twig Image Placeholder Extension
================================

[](#twig-image-placeholder-extension)

A Twig extension to generate images placeholder

> Inspired by [simple-svg-placeholder](https://github.com/cloudfour/simple-svg-placeholder)

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

[](#installation)

You can install the extension using Composer:

```
composer require kerox/twig-image-placeholder-extension

```

#### Symfony

[](#symfony)

If you are using [Symfony Flex](https://flex.symfony.com/) you're done.

Otherwise, add the following lines to your `services.yaml`

```
services:
  ...

  Kerox\TwigImagePlaceholder\SvgPlaceholderExtension: null
```

#### Standalone

[](#standalone)

If you use Twig as standalone, then you need to add the extension manually

```
$extension = new \Kerox\TwigImagePlaceholder\SvgPlaceholderExtension();

$twig = new \Twig\Environment($loader);
$twig->addExtension($extension);
```

Usage
-----

[](#usage)

The following functions are available

- [SvgExtension](./src/SvgPlaceholderExtension.php)
    - svg\_placeholder()
    - svg\_placeholder\_uri()

Examples
--------

[](#examples)

#### Default

[](#default)

[![](./examples/default.svg?sanitize=true)](./examples/default.svg?sanitize=true)

```
{{ svg_placeholder() }}
```

#### Size

[](#size)

[![](./examples/size.svg?sanitize=true)](./examples/size.svg?sanitize=true)

```
{{ svg_placeholder(150, 150) }}
```

#### Colors

[](#colors)

[![](./examples/colors.svg?sanitize=true)](./examples/colors.svg?sanitize=true)

```
{{ svg_placeholder(300, 150, {
    bgColor: '#0f1c3f' ,
    textColor: '#7fdbff'
}) }}
```

#### Text

[](#text)

[![](./examples/text.svg?sanitize=true)](./examples/text.svg?sanitize=true)

```
{{ svg_placeholder(300, 150, {
   text: 'Foo Bar'
}) }}
```

Or Without:

[![](./examples/notext.svg?sanitize=true)](./examples/notext.svg?sanitize=true)

```
{{ svg_placeholder(300, 150, {
   text: false
}) }}
```

#### Data URI

[](#data-uri)

```

```

will output

```

```

Options Reference
-----------------

[](#options-reference)

OptionTypeDefaultDescriptiontext`string`,`null`,`false`Placeholder dimensionsThe text to display. If set to `false`, element `text` will not be added to the svg.fontFamily`string``sans-serif`The font to use for the text. For data URIs, this needs to be a system-installed font.fontWeight`string``bold`fontSize`float`20% of the shortest image dimension, rounded down.dy`float`35% of the `fontSize`Adjustment applied to the [dy attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dy) of the text element so it will appear vertically centered.bgColor`string``#ddd`The background color of the image. Defaults to `#ddd`.textColor`string``rgba(0,0,0,0.5)`The color of the text. For transparency, use an `rgba` or `hsla` color value.class`string`If provide, add a `class` attribute to the `svg` element.

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity69

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

Total

5

Last Release

1298d ago

Major Versions

v1.1.2 → v2.0.02022-10-23

PHP version history (4 changes)v1.0.0PHP ^7.2

v1.1.1PHP ^7.2 || ^8.0

v1.1.2PHP >=7.2

v2.0.0PHP >=8.1

### Community

Maintainers

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

---

Top Contributors

[![ker0x](https://avatars.githubusercontent.com/u/5331654?v=4)](https://github.com/ker0x "ker0x (28 commits)")

---

Tags

extensionimageplaceholdersvgtwigtwigimageextensionplaceholder

###  Code Quality

TestsPHPUnit

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/kerox-twig-image-placeholder-extension/health.svg)

```
[![Health](https://phpackages.com/badges/kerox-twig-image-placeholder-extension/health.svg)](https://phpackages.com/packages/kerox-twig-image-placeholder-extension)
```

###  Alternatives

[umanit/twig-image-extension

An extension to facilitate the integration of responsive images' markup in Twig templates.

1042.2k](/packages/umanit-twig-image-extension)[redant/twig-components

Define reusable components in Twig.

3819.8k1](/packages/redant-twig-components)

PHPackages © 2026

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