Custom MODX Collections renderer for Image+

collections.imageplus.js

Collections.renderer.imageplus = function(value, metaData, record, rowIndex, colIndex, store) {
    if (value != '' && value != null) {
        var data = Ext.decode(value);
        var url = MODx.config.connectors_url + 'system/phpthumb.php?imageplus=1';
        
        var params = {};
        params.src = MODx.config['collections.renderer_image_path'] + data.sourceImg.src;
        params.w = 100;
        if (data.sourceImg.src.indexOf('.png') !== -1) {
            params.f = 'png';
        }
        
        for (var i in params) {
            url += '&' + i + '=' + params[i];
        }
        
        return '<img alt="" src="' + url + '" width="' + (params.w || 80) + '">';
    }
}

Where in MODX Revo should this be placed?

Where in MODX Revo should this be placed?

See official documentation - https://docs.modx.com/extras/revo/collections

Custom renderers
Custom renderers can be easily added by creating a JS file (and CSS file if needed) and specifying URLs to those files in system settings. JS files can contain functions (see sample renderers here) that can then be used collectively.

File save in folder with site, example in http://take.ms/3vfWB
Renderer may be is "Collections.renderer.imageplus"

Just came by this and wanted to add you can use "ImagePlus.MIGX_Renderer" in the meantime.

Hi everyone!
This renderer shows not cropped images(((
ImagePlus.MIGX_Renderer - shows cropped, but don`t work with new created resources if using some not default media source - directed folder or MIGX resource dinamic path....

Here is the renderer with cropping :) Thanks!
https://gist.github.com/jenswittmann/e26ee4a3740cc7acf865e041a7af66f5