Image renderer should integrate with MODX Media Sources

[valZho]

• In the site I'm building, I have a Collection of products, i.e. each item/resource in my Collection is a product page.
• There is a TV in the product template that is an image container. That image TV is tied to a specific, non-standard MODX Media source, and the link (saved TV value) is, of course, relative to the media source base_url.
• In this case, the media source base_url is actually on a completely different domain from the main site.
• Collections.renderer.image ignores the media source on the TV and assumes that the link (value) from the TV is relative to the site's base_url ...thus breaking the image link in the Collections list

[theboxer]

You can create own image renderer that will have desired base_url.

I'll try to look into this again how to include media sources, but it will probably not be anytime soon.

[knightknight]

I had the same issue where I created a new MediaSource for some image TV's for a user with ACL controls. But renderer.image leaves out the MediaSource basePath or baseURL.

Dirty hack, I've hardcoded my path 'assets/images/' in assets/components/collections/js/mgr/extra/collections.renderers.js and added it as Collections.renderer.imageMedia

 Collections.renderer.imageMedia = function(value, metaData, record, rowIndex, colIndex, store) {
    if (value != '' && value != null) {
       var imgPath = MODx.config['collections.renderer_image_path'];
       return '<img src="' + MODx.config.base_url + 'assets/images/' + imgPath + value + '" width="64">';
   }
 };

[azeller]

bump :)

I don't want to do it this way. I love using Collections because it keeps the resource tree clean and simple for clients. But most of our clients need to get restricted to directories where they can't break anything...

So I would also appreciate it if Collections was media-source aware...

[sepiariver]

Yea it probably needs to be a snippet renderer that fetches the TV object, gets the media source and fetches the media source object for the base path?

[azeller]

@sepiariver yeah, something like that.

$modx->getObject('sources.modMediaSource',$options)) <- this is the media source.
You can use prepareOutputUrl($mediaSourceID) to get a good-to-go path to the image.

it's just that I am not a PHP-person, otherwise I would have fixed it myself :)

Andreas

[sepiariver]

The Collections renderers are actually in JS, but they rely on ExtJS methods and config values which, it's hard to know them enough to do anything. Also you may have to register some method to query the media sources, etc.

The best thing would be to specify a custom snippet renderer in your Collections grid settings, and do something along the lines of what you suggested. It would be more straightforward to do that, then get it in the Extra itself. Although maybe @theboxer will come back from his vacation and feel inspired ;) :P

[azeller]

I will check it out myself and see if I can figure it out :) as a J2EE guy, I feel like being lost in a strange land :)

[Spheerys]

Is someone make a fonctionnal snippet to use media source for the image rendering ?

[lukemcd]

I am using the Collections snippet renderer for thumbnails in the grid view. I ran into the media source issue and do not see an easy way to dynamically grab the media source path since Collections does not pass that information along.

There may be a way to do a getObject query by extracting the TV name and get the media source path, but I am not able to figure that out.

But I am able to get nice thumbnails by hard-coding the path in the snippet and using pThumb. I will post this in the forums as well:

$imgName = $modx->getOption('value', $scriptProperties, '');
$imgPath = 'assets/content/images/'; //Collections doesn't pass TV media source, hard-coding path
$thumb = $modx->runSnippet('pthumb', [ 
    'input' => $imgPath . $imgName, 
    'options' => '&w=120&h=120&zc=C' 
]);
return '<img src="' . $thumb . '" width="120">';

[chrisdempsey]

In case it helps anyone here's an updated version of lukemcd's snippet that assumes the default media source so you don't need to set $imgPath by hand.

$default_media_source = $modx->getOption('default_media_source');
$objSource = $modx->getObject('modMediaSource', $default_media_source);
$properties = $objSource->getProperties();
$imgPath = $properties['basePath']['value']; //Collections doesn't pass TV media source, hard-coding path

$imgName = $modx->getOption('value', $scriptProperties, '');
$thumb = $modx->runSnippet('pthumb', [ 
    'input' => $imgPath . $imgName, 
    'options' => '&w=60&h=60&zc=C'
]);

return '<img src="' . $thumb . '" width="120">';

[jcdm]

+1 for this. Just did it with a custom renderer for now, but it would be wonderful to be able to skip that process just for an image path.

[math-u]

+1 for this

[math-u]

I've just figured out to get custom media source path inside the Image renderer. Hope it will help someone:

$imgName = $modx->getOption('value', $scriptProperties, '');

$tvName = $scriptProperties["column"];
$tvName = substr($tvName, 3);

$tv = $modx->getObject('modTemplateVar', array('name' =>$tvName));
$tvMediaSourceId = $tv->get('source');

$mediaSource = $modx->getObject('modMediaSource', $tvMediaSourceId);
$mediaSourceProperties = $mediaSource->getProperties();
$mediaPath = $mediaSourceProperties['basePath']['value'];


if($imgName){
	$thumb = $modx->runSnippet('pthumb', [ 
    'input' => MODX_BASE_URL.$mediaPath.$imgName, 
    'options' => '&w=120&q=75'
	]);
	return '<img src="' . $thumb . '" width="120">';	
}
else{
	return 'null';
}

[Jako]

In MODX 3 you can use the following code:

<?php

use MODX\Revolution\modTemplateVar;
use MODX\Revolution\Sources\modMediaSource;

$imgName = $modx->getOption('value', $scriptProperties, '');

$tvName = $scriptProperties['column'];
$tvName = substr($tvName, 3);

$tv = $modx->getObject(modTemplateVar::class, ['name' => $tvName]);
$tvMediaSourceId = $tv->get('source');

$mediaSource = $modx->getObject(modMediaSource::class, $tvMediaSourceId);
$mediaSourceProperties = $mediaSource->getProperties();
$mediaPath = $mediaSourceProperties['basePath']['value'];

if ($imgName) {
    $thumb = $modx->runSnippet('pthumb', [
        'input' => MODX_BASE_URL . $mediaPath . $imgName,
        'options' => '&w=120&q=75'
    ]);
    return '<img src="' . $thumb . '" width="120">';
}
else {
    return '';
}