lci / modx-image-helper
Image helper is for MODX Revolution, allowing you to scale images.
v1.0.0-beta
2019-05-16 17:56 UTC
Requires
- guzzlehttp/guzzle: ~6.0
- intervention/image: ^2.4
- lci/orchestrator: ^1.2.0
This package is auto-updated.
Last update: 2024-04-17 04:33:14 UTC
README
ImageHelper is a simple extra to scale, fit, pad or encode your images to an exact size. Can be used as a snippet or output filter.
It is using the popular Intervention Image package.
Alternative to pThumb, phpThumbsUp and even older phpThumbOf
Install via Composer
If you have not already installed Orchestrator, please install first.
Run the following command:
composer install lci/modx-image-helper
Or add to your composer.json file as in the require section and then you can run composer update
.
And then to install within MODX
$ cd core/
$ php vender/bin/orchestrator orch-package lci/modx-image-helper
Snippet Properties
Property | Short Cut | Description | Default |
---|---|---|---|
crop | c | Crop strategy fit, pad or scale. Fit will scale the to fit the height and width but if the ratio does not match it will be cropped to match. Pad will scale but if the ratio does not match will pad the image. Scale will always keep the ratio and will not pad or crop to make it fit. | scale |
encode | e | Encode image format, Set value to data-url for encoding image data in data URI scheme (RFC 2397) | |
height | h | Set the desired height in pixels | |
width | w | Set the desired width in pixels | |
quality | q | Set from 1 to 100, with 100 as the best | 60 |
src | s | The image path required when used as a snippet |
Examples
As a snippet
Scale image to fit within a 300x200 box:
<img src="[[imageHelper? &src=`[[*myTV]]` &width=`300` &height=`200` &quality=`60`]]" alt="Scale My Image">
Pad image to make it exactly 300x200 with no trimming of the image:
<img src="[[imageHelper? &src=`[[*myTV]]` &crop=`pad` &width=`300` &height=`200` &quality=`60`]]" alt="Pad My Image">
Encode:
<img src="[[imageHelper? &src=`[[*myTV]]` &crop=`pad` &encode=`data-url` &width=`300` &height=`200` &quality=`60`]]'" width="300" height="300" alt="Encoded image test">
Output modifier filter
<img src="[[*myTV:imageHelper=`&width=300&height=200&quality=60`]]" alt="My Image">