Moregallery first image of the resource rendered in the collections extra?

MoreGallery
#1

Situation:

  • Parent-resource is set as collection
  • Child-resources are all of the gallery-type.
  • In the manager all children are hidden from the tree and are listed in the resource view.

The way the children are listed can be manipulated.
It is also possible to show an image from the child-resource, i.e. if it is a TV.

Is it possible to render the first image in the gallery via a snippet or something?

#2

I haven’t tried it yet, but I think you can indeed run the mgGetImages snippet as a snippet renderer in Collections to get the first image and to output that :wink:

#3

Hmmm, tried several options but do you have some clever suggestions on this?

#4

Hi Mark and Michiel,

An old toppic, but I have the same question: would like to show the first image of MoreGallery in the Collections List view.

It is easy to do with an image TV, but have no idea how to get the MoreGallery image to show up.

Did anyone try this before?

Thanks!

#5

Hi Johan, yes i’ve fixed it like this:

On the “albums”-page i have the next code:
<div class="row"> <ul class="image-gallery sort-destination lightbox" data-sort-id="portfolio" data-plugin-options='{"delegate": "a.lightbox-portfolio", "type": "image", "gallery": {"enabled": true}}'> [[!pdoPage@javelinpaging? &elementClass=modSnippet&element=pdoResources&parents=131&tpl=FotoalbumsItem&limit=20]] </ul> <div class="paging"> <ul class="pagination pagination-lg pull-right"> [[!+page.nav]] </ul> </div> </div>

And then on the chunk FotoalbumsItem i have:
<li class="col-md-3 col-sm-6 col-xs-12 isotope-item j[[+publishedon:strtotime:date=%Y]]"> <div class="image-gallery-item"> <a href="[[~[[+id]]]]"> <span class="thumb-info"> <span class="thumb-info-wrapper"> [[!mgGetImages? &resource=[[+id]]&imageTpl=FotoalbumsAfbeelding&limit=1&getResourceFields=1]] <span class="thumb-info-title"> <span class="thumb-info-inner">[[+pagetitle]]</span> <span class="thumb-info-type">[[+publishedon:date=%Y]]</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fa fa-link"></i></span> </span> </span> </span> </a> </div> </li>

Which in it’s turn uses chunk FotoalbumsAfbeelding:
<img data-plugin-lazyload data-plugin-options='{"effect" : "fadeIn"}' data-original="[[+file_url:phpThumbsUp=w=447&h=447&zc=1]]" class="img-responsive" alt="[[+resource.pagetitle]]" />

Maybe it can be done easier or less resource-hungry but this was my solution. Hope this helps.

#6

Thanks for your fast reply Michiel!

But that was not really what i needed to know, or maybe i interpreted your initial question wrong. :confused:

I would like to show the first image of MoreGallery in the List view of Collections:
You can see this printscreen: https://cl.ly/nHFK

So i have a parent with children that are all Gallery page types with images in it.
I changed the parent to a Collection to show the children as a nicer list, but i cant seem to figure out how to ‘pull’ of show the first image out of the MoreGallery.

#7

Haha, read the whole topic again, and see what you mean :slight_smile:

In the end i didn’t try to get it in to Collections, because of a lack time i had.
I think Mark’s suggestion is valid, but as said as above: no time no fun…

Sorry about that.

#8

No problem … I guess i’ll just have to knock on Mark’s (new) door :wink:

#9

Maybe late, but I solved this if anybody still interested.
There is several unobvious bumps: to call mgGetImages you need resource id, but can’t make renderer for ‘id’ column. Id column is mandatory and used for Collections core functionality. So I used ‘Snippet Renderer’ for some unused column (e.g."class_key’):

<?php
$galleryId = $scriptProperties["row"]["id"];
$thumb = $modx->runSnippet('mgGetImages', [ 
    'resource' => $galleryId, 
    'limit' => 1,
    'imageTpl' => 'collectionsGalleryImageRenderer_tpl'
]);
return '<img src="' . $thumb . '" width="150">';

Please note you can’t use @INLINE template inside snippet call, so I used chunk ‘collectionsGalleryImageRenderer_tpl’ that returns manager thumb url:

[[+mgr_thumb]]

Unfortunately in this setup img tag would be written into Collections grid as plaintext, not html element. So I set column Renderer to ‘rawHtmlMX’ that do the magic:

collections.renderer.rawHtmlMX = function(value, metaData, record, rowIndex, colIndex, store) {
    return value;
};

Put this custom javascript inside file and point system setting ‘collections.user_js’ to that file (I am doing some more stuff in that file too).