Download the PHP package shdev/spress-plugin-assets without Composer

Assets plugin for Spress

This plugin has the aim to bring the most features of jekyll-assets to SPRESS.

**This plugin requires Spress >= 2.2.

How to install?

Go to your site folder and input the following command:

As as soft dependency you need ImageMagick

Under macOS I used Homebrew to install it with

How to use?

Store your assets in src/assets with your folder structure

For example this structure

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

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

This filter gives the path of

Renders the URL

and writes the file

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

Renders the HTML

and writes the file

Filter css

Renders the HTML

and writes the file

Filter js

Renders the HTML

and writes the file

Filter options for img|css|js

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

Example with img

Renders the HTML

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

Like the shining example jekyll-assets it uses ImageMagick 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
• resize
• crop
• gravity only if crop options is present.

Also when crop is used a +repage will appended, look here repage for more information

Here an example with all options at once

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

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

So

will not create the file

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

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

I generate the gzip files as an after build step.

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