resize

resize

The "resize" Snippet is an output filter that operates on an asset ID and returns a URL for the image of the desired dimensions. This request will trigger the desired image size to be generated if it does not exist already.

Arguments

Specify the dimensions you want your image to appear separated by an "x": {width}x{height}

Be careful: the resize filter can distort the aspect ratio of your image! Use the scale2h or scale2w snippets if you need to ensure that the aspect ratio is preserved.

Example

Normally, the asset_id parameter would be supplied via the getPageAssets Snippet.

WARNING: use of an output filter inside a "formatting string" does not work!

[[getPageAssets? 
    &innerTpl=`<img src="[[+asset_id:resize=`500x300`]]" 
     width="500" 
     height="300" 
     alt="Whoops, this does not work!"/>`
]]

Instead, use a traditional MODX Chunk, e.g. myInnerTpl:

<img src="[[+asset_id:resize=`500x300`]]" 
     width="500" 
     height="300" 
/>

And then reference the Snippet normally

[[getPageAssets? 
    &innerTpl=`myInnerTpl`
]]

Although somewhat unconventional, it is possible to use the resize Snippet as a stand-alone Snippet and not as an output filter. This is useful if you wanted to display a single asset at a desired size. In the example below, asset ID 123 will be resized to dimensions of 500 x 300.

<img src="[[resize? &input=`123` &options=`500x300`]]" width="500" height="300" />