The MODX Collections extra is a great tool for managing anything from blogs to inventory lists. The grid view displays columns you customize to fit the most important item information. A thumbnail image column often fits the bill for an item list. The Collections documentation shows you how to set one up and use the built in image renderer for display. The built-in method is a great start but has two shortcomings (as of Collections v3.4.1):
1) The full-image is grabbed. It is displayed at a constrained width but still can take time to load and cannot be manipulated.
2) If the image is from a TV that uses a Media Source the image will not display because the full file path is not used.
But with the help of pThumb and the snippet renderer option in Collections it's easy to fix these issues. Here is what you can do:
1) Make sure Collections and pThumb are listed as installed under Extras > Installer (I didn't want to list this as a step but I did).
2) Go to Extras > Collection views. Right-click your view and select Update View.
3) At the bottom of the page select Add Column.
4) Fill in the Add Column window (note that this assumes our resources have an image TV called "myImg", change to reflect your TV name):
Label: image
Name: tv_myImage
Width: 60
Position: 2
Editor: {blank}
Renderer: {blank}
Snippet Renderer: customThumbnailRenderer
Hidden: {unchecked}
Sortable: {unchecked}
Click Save and close the Add Column window.
5) Click Save on the Update View page.
6) On the Elements tab choose New Snippet. Fill in:
Name: customThumbnailRenderer
Snippet code:
$imgName = $modx->getOption('value', $scriptProperties, '');
$imgPath = ''; //Leave this as an empty string if your TV does not use a Media Source. Otherwise fill in Media Source path (e.g. 'assets/content/images/')
$thumb = $modx->runSnippet('pthumb', [
'input' => $imgPath . $imgName,
'options' => '&w=60&h=60&zc=C'
]);
return '<img src="' . $thumb . '" width="60">';
Click Save.
That's it! If you have large images it may take a while for the Collection view to load the first time while it caches the thumbnails. Manipulate dimensions and other pThumb goodies as you see fit.
If it is not working comment out last line and instead put "return $imgPath . $imgName;", then in your Collection view see if the string being returned is the proper path for the image.
☆ A M B ☆
