PHPackages                             shdev/spress-plugin-assets - 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. shdev/spress-plugin-assets

ActiveSpress-plugin[Templating & Views](/categories/templating)

shdev/spress-plugin-assets
==========================

It allows to asset boost your Spress site

0.3.1(8y ago)131MITPHP

Since Aug 16Pushed 8y ago1 watchersCompare

[ Source](https://github.com/shdev/spress-plugin-assets)[ Packagist](https://packagist.org/packages/shdev/spress-plugin-assets)[ RSS](/packages/shdev-spress-plugin-assets/feed)WikiDiscussions master Synced 3d ago

READMEChangelogDependencies (1)Versions (9)Used By (0)

Assets plugin for Spress
------------------------

[](#assets-plugin-for-spress)

[![Spress 2 ready](https://camo.githubusercontent.com/a2b3375d112445cece787d49b7e3a54da7001ce98eaf902c326006c460843192/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5370726573732532312d72656164792d627269676874677265656e2e737667)](https://camo.githubusercontent.com/a2b3375d112445cece787d49b7e3a54da7001ce98eaf902c326006c460843192/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5370726573732532312d72656164792d627269676874677265656e2e737667)

This plugin has the aim to bring the most features of [jekyll-assets](https://github.com/jekyll/jekyll-assets) to SPRESS.

\*\*This plugin requires Spress >= 2.2.

### How to install?

[](#how-to-install)

Go to your site folder and input the following command:

```
$ spress add:plugin shdev/spress-plugin-assets
```

As as soft dependency you need [ImageMagick](http://www.imagemagick.org/script/index.php)

Under macOS I used [Homebrew](https://brew.sh/) to install it with

```
$ brew install imagemagick
```

### How to use?

[](#how-to-use)

Store your assets in `src/assets` with your folder structure

For example this structure

```
./src/assets/
|- img
   |- header.jpg
   |- feature-image.jpg
|- css
   |- style.css
|- js
   |- app.js

```

In `config.yml` you can set the following options. Here the default values are displayed.

```
asset_output_path: 'build/assets'
asset_output_web_prefix: '/assets'
asset_defaults_gravity: 'Center'
asset_defaults_quality: ~
```

`asset_output_path` the path where the file is stored during building.

`asset_output_web_prefix` is the path prefix for the link.

`asset_defaults_gravity` is the default gravity for cropping a image if nothing is given in asset-filter options

`asset_defaults_quality` is the default quality for images. I would recommend 90. If this is `null` *imagemagick* is not necessary as dependency.

For example if you use a CDN you want the assets in an own build-folder and the URL prefix contains information about your CDN.

In your template you use the path relative to `src/assets` for your items with the asset filters.

#### Filter `asset_path`

[](#filter-asset_path)

This filter gives the path of

```
{{ 'img/header.jpg' | asset_path }}
```

Renders the URL

```
/img/header_813dec0e6ec1420d101c3f07bfc0a135.jpg

```

and writes the file

```
/img/header_813dec0e6ec1420d101c3f07bfc0a135.jpg

```

You see the output file is enriched with a hash value. It's a md5 sum which depends on the content of the file and some other information.

#### Filter `img`

[](#filter-img)

```
{{ 'img/header.jpg' | img }}
```

Renders the HTML

```

```

and writes the file

```
/img/header_813dec0e6ec1420d101c3f07bfc0a135.jpg

```

#### Filter `css`

[](#filter-css)

```
{{ 'css/style.css' | css }}
```

Renders the HTML

```

```

and writes the file

```
/css/style_813dec0e6ec1420d101c3f07bfc0a135.css

```

#### Filter `js`

[](#filter-js)

```
{{ 'js/app.js' | js }}
```

Renders the HTML

```

```

and writes the file

```
/js/app_813dec0e6ec1420d101c3f07bfc0a135.js

```

#### Filter options for `img`|`css`|`js`

[](#filter-options-for-imgcssjs)

If you want to set some attributes to the tags use the `attr` options. This options only effects the render output.

Example with img

```
{{ 'img/header.jpg' | img({attr:{class:'img-responsive', id:"header-image", alt:"Some importend text about the image"}}) }}
```

Renders the HTML

```

```

#### Filter options for all tags if the file extension is `jpg`|`jpeg`|`png`|`gif`

[](#filter-options-for-all-tags-if-the-file-extension-is-jpgjpegpnggif)

Like the shining example [jekyll-assets](https://github.com/jekyll/jekyll-assets) it uses [ImageMagick](http://www.imagemagick.org/script/index.php) for image manipulation.

You can use it with every filter but it should only usefull with `img` and `asset_path`

This options of the `convert`-command are used:

- [quality](http://www.imagemagick.org/script/command-line-options.php#quality)
- [resize](http://www.imagemagick.org/script/command-line-options.php#resize)
- [crop](http://www.imagemagick.org/script/command-line-options.php#crop)
- [gravity](http://www.imagemagick.org/script/command-line-options.php#gravity) only if `crop` options is present.

Also when `crop` is used a `+repage` will appended, look here [repage](http://www.imagemagick.org/script/command-line-options.php#repage) for more information

Here an example with all options at once

```
{{ 'img/feature-image.jpg' | img({resize: '300x300^', crop: '300x300+0+0', gravity: 'SouthEast', quality:60 }) }}
```

This creates a new images which is quadratic.

- `resize: '300x300^'` means resize the image that it cover a *300px* times *300px* area
- `crop: '300x300+0+0'` means crop to *300px* times *300px* but
- `gravity: 'SouthEast'` use the bottom-right corner
- `quality:60` reduce the quality to 60%.

Renders the HTML

```

```

and writes the file

```
/img/feature-image_6fa6fa3af470d85af98ac7f7b8d5c933.jpg

```

Be informed different image transformation options lead to other hash values used for the file.

So

```
{{ 'img/feature-image.jpg' | img }}
```

will not create the file

```
/img/feature-image_6fa6fa3af470d85af98ac7f7b8d5c933.jpg

```

### Cache folder

[](#cache-folder)

For a better performance the plugin cached all files in the folder `.cache/assets`. This saved time for the image manipulation. It will not clear old unused file. So please clean it up from time to time.

### asset boost on apache webserver

[](#asset-boost-on-apache-webserver)

As an extra you can asset boost your site if it runs with an apache webserver with the following `.htaccess` options.

```
RewriteEngine On

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.+\.(xml|html|css|js|eot|eot|woff2|woff|ttf|svg))$ /$1.gz [L]

Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"

Header set Vary "Accept-Encoding"
Header set Content-Encoding "gzip"

Header set Content-Type "application/javascript"

Header set Content-Type "text/css; charset=UTF-8"

ExpiresActive On
ExpiresDefault "access plus 1 year"
Header set Cache-Control "max-age=8916000, public"

```

I generate the *gzip* files as an after build step.

Wished features for the next releases
-------------------------------------

[](#wished-features-for-the-next-releases)

- a posteriori run of `jpegoptim` und `optipng`
- filter for outputing raw asset to twig. E.g. inline *js* or *css*
- filter for outputing transformed image to twig. E.g. inline base64 images
- asset boost configs for other web servers, I hope for *pull requests*
- render `css`|`js` or other files with twig before coping, this allows to inject e.g. colors from `config.yml` to the style files.
- scss processing
- babel processing

###  Health Score

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity9

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

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

Total

7

Last Release

3182d ago

### Community

Maintainers

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

---

Tags

assetsimagemagickspresstwigpluginspress

### Embed Badge

![Health badge](/badges/shdev-spress-plugin-assets/health.svg)

```
[![Health](https://phpackages.com/badges/shdev-spress-plugin-assets/health.svg)](https://phpackages.com/packages/shdev-spress-plugin-assets)
```

###  Alternatives

[kartik-v/yii2-widget-select2

Enhanced Yii2 wrapper for the Select2 jQuery plugin (sub repo split from yii2-widgets).

3279.7M191](/packages/kartik-v-yii2-widget-select2)[dereuromark/cakephp-ajax

A CakePHP plugin that makes working with AJAX a piece of cake.

55255.9k1](/packages/dereuromark-cakephp-ajax)[dereuromark/cakephp-feed

A CakePHP plugin containing a RssView to generate RSS feeds.

1353.7k1](/packages/dereuromark-cakephp-feed)[tomatophp/filament-menus

Menu Database builder to use it as a navigation on Filament Panel or as a Livewire Component

306.3k3](/packages/tomatophp-filament-menus)[benjaminmedia/wp-polylang-theme-strings

Polylang Theme Strings with support for Blade syntax

159.9k](/packages/benjaminmedia-wp-polylang-theme-strings)[dereuromark/cakephp-meta

A CakePHP plugin for SEO meta tags, OpenGraph and Twitter Cards

1012.9k1](/packages/dereuromark-cakephp-meta)

PHPackages © 2026

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