Custom image & imagePlus render for MODX Collection Extra

collections.customrenderer.js

//-----------------------------------------------------------
//  Collections Customrenderer
//-----------------------------------------------------------
/*
 * @author: Steeve from lawebfabric
 * @website: http://www.lawebfabric.com
 * @tutorial modx website: http://www.tutocms.fr/
 */
// ------------------------------
// ENGLISH
// ------------------------------
// 1. Copy the file and put it inside the assets/components/collections/js/mgr/extra folder
// 2. Go to the system setting's and set the collections.user_js system setting to the script. 
//    Example : /assets/components/collections/js/mgr/extra/collections.customrenderer.js
// 3. Set the collections.renderer_image_path to your image path. Example : {assets_url}upload/
// 4. Go to Extras > Collection. 
// 5. At the bottom of the page click on Add column whith NAME : tv_myTVName. Don't forget to add tv_ before your TV name !
//    Then inside the render field add Collections.renderer.image for an image TV OR Collections.renderer.image for an imagePlus TV.

// IMPRTANT : You can use the ImagePlus.MIGX_Renderer too for an ImagePlus TV. 
// This is the easiest way to get it worked and you don't need to do the first, second and third step !
// But the thumbnail is a bit bigger than with the custom renderer. 
// And you can change the width of the thumbnail in the line 20 of the script (params.w = 100;) to the desired width.

// https://modx.com/blog/2014/09/30/collections-easily-customizable-admin-views-for-content-types/
// THANKS TO @julien.studer AND @johnmacdonald on SLACK for helping.

// ------------------------------
// FRENCH
// ------------------------------
// 1. Copiez le fichier et placez-le dans le dossier assets/components/collections/js/mgr/extra.
// 2. Accédez aux paramètres système et définissez le paramètre système collections.user_js sur le script.
//    Exemple: /assets/components/collections/js/mgr/extra/collections.customrenderer.js
// 3. Définissez collections.renderer_image_path sur votre chemin d’image. Exemple: {assets_url}upload/
// 4. Allez à Extras> Collection.
// 5. En bas de la page, cliquez sur Ajouter une colonne avec NOM : tv_myTVName. N'oubliez pas d'ajouter tv_ avant le nom de votre variable de modèle!
//    Ensuite, dans le champ de rendu, ajoutez Collections.renderer.image pour une image TV OU Collections.renderer.image pour une imagePlus TV.

// IMPRTANT: Vous pouvez également utiliser ImagePlus.MIGX_Renderer pour une variable de modèle ImagePlus.
// C'est le moyen le plus simple de le faire fonctionner et vous n'avez pas besoin de faire la première, deuxième et troisième étapes !
// Mais la vignette est un peu plus grande qu'avec le moteur de rendu personnalisé.
// Et vous pouvez modifier la largeur de la vignette dans la ligne 20 du script (params.w = 100;) à la largeur souhaitée.

// https://modx.com/blog/2014/09/30/collections-easily-customizable-admin-views-for-content-types/
// MERCI À @julien.studer ET @johnmacdonald de SLACK pour leur aide.

Collections.renderer.image = function(value, metaData, record, rowIndex, colIndex, store) {
    if (value != '' && value != null) {
        //var baseUrl = MODx.config.collections_renderer_basepath_img;
        var baseUrl = MODx.config['collections.renderer_image_path'];
        if (value.indexOf('http://') === 0) {
            baseUrl = '';
        }
        return '<div class="myimagerenderer"><img src="' + baseUrl + value + '" width="100"></div>';
    }
}

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';
        }
        params.sx = data.crop.x;
        params.sy = data.crop.y;
        params.sw = data.crop.width;
        params.sh = data.crop.height;
        params.aoe = 1;
        
        for (var i in params) {
            url += '&' + i + '=' + params[i];
        }
        
        return '<img alt="" src="' + url + '" width="' + (params.w || 80) + '">';
    }
}

Collections.renderer.datetimeCustomTwoLines = function(value, metaData, record, rowIndex, colIndex, store) {
    if (value == 0) return '';

    var d = Date.parseDate(value, 'Y-m-d H:i:s');

    var date = Ext.util.Format.date(d, 'd F');
    var year = Ext.util.Format.date(d, 'Y');

    return '<div class="collections-grid-date">' + date + '<span class="collections-grid-time" style="font-size:16px;">' + year + '</span></div>';
}