Using GalleryItem with Getresources produces duplicate images in Modx Revolution

53 Posts

scorchsoft Reply #1, 12 years, 2 months ago

Hi. The title is the problem that I was having. Here is the solution:

The code to loop through every child page:

[[!getResources? &parents=`[[*id]]`  &tpl=`tpl.pageItemWImage`  &limit=`100` &depth=`1` &processTVs=`1` &includeTVs=`1` &showHidden=`1` ]]

The chunk (tpl.pageItemWImage) that is to repeat for every sub page:

<div class="pageItem imagepageitem">
  
  [[!GalleryItem? &id=`[[!getPicId? &imageTV=`[[+tv.pageImage]]`]]`   &imageWidth=`145` &imageHeight=`140` &imageZoomCrop=`1` ]]		     	
  <a href="[[~[[+id]]]]" class="itemimage"><img src="[[!+galitem.image]]&fltr[]=bord|-1|-1|000000" alt="[[!+galitem.name]]" /></a>
  
  <h2><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
  <div class="text">
  	[[+introtext]]
  </div>
  <a href="[[~[[+id]]]]" class="moreinfo">More Information ></a>
  <br class="c">
</div>

Here is the code for the 'getPicID' snippet. You will need to add this manually

<?php
$obj=json_decode($imageTV);
return $obj->gal_id;

Note: Each page has the GalleryItem template variable 'pageImage' with the output method set to default.

53 Posts

scorchsoft Reply #2, 12 years, 2 months ago

This is a common issue that I was having across multiple sites. I have posted this so that people can find it if they do a google search.

39 Posts

northernape Reply #3, 12 years, 2 months ago

Hi,
Thanks for sharing this article, works great. However, I still get duplicate images after first loop. Any pointers on what I could be doing wrong?

19 Posts

Evan Reply #4, 8 years, 4 months ago

Quote from: scorchsoft at Jan 23, 2012, 02:44 PM

This is a common issue that I was having across multiple sites. I have posted this so that people can find it if they do a google search.

So I found this post with a Google search, and tried the method you described here since I was having this same issue when using a GalleryItem image inside a getResources call. But I wound up taking a slightly different approach to solve it. I created an output filter snippet that truncates the output of the GalleryItemTV, which gave me a bit more control over the HTML, as well as the image itself as far as using pthumb to resize, crop, etc. on page render. First I created two output filter snippets so I could play around with them:

truncateGalleryItemTV_path
This one truncates the output down to just the path of the image.

$t = $input;
$t = ereg_replace("[<].*src=", "", $t);
$t = ereg_replace("\" alt=\"\" title.*[>]", "", $t);
$t = ereg_replace("%2F", "/", $t);
return $t;

truncateGalleryItemTV_id
This one truncates the output all the way down to just the image id, which is basically the filename minus the file extension.

$t = $input;
$t = ereg_replace("[<].*gallery%2F.*%2F", "", $t);
$t = ereg_replace(".jpg", "", $t);
$t = ereg_replace(".png", "", $t);
$t = ereg_replace(".gif", "", $t);
$t = ereg_replace(".tif", "", $t);
$t = ereg_replace(".tiff", "", $t);
$t = ereg_replace("\" alt=\"\" title.*[>]", "", $t);
return $t;

What I found is I could use truncateGalleryItemTV_id in a cached GalleryItem snippet call, much like the getPicId method above, but with much better success at not having the image repeat in each getResources loop. I believe the GalleryItemTV is set to output=galleryItem and the getResources call was made with processTVs=`1`. Then the chunk that inserts the image looked sorta like this:

<div class="slide">
    [[GalleryItem? &id=`[[+tv.projectPageImage:truncateGalleryItemTV_id]]` &imageWidth=`930` &imageHeight=`523` &imageZoomCrop=`1`]]<a href="[[~[[+id]]]]"><img src="[[+galitem.image]]" alt="[[+galitem.name]]" /></a>
</div>

This worked pretty well, but I really like using pthumb because it saves a cached version of the resized and zoom-cropped image, plus the URLs just looked prettier. So again, the GalleryItemTV is set to output=galleryItem and the getResources call was made with processTVs=`1` and my final solution for the image chunk just calls the tv directly, truncates it to just the image path, and has some pthumb action thrown at it:

<div class="slide">
   <a href="[[~[[+id]]]]" title="[[+longtitle]]"><img src="[[+tv.projectPageImage:truncateGalleryItemTV_path:pthumb=`w=930&h=523&zc=1`]]" alt="[[+longtitle]]" /></a>
</div>

Resulting HTML looks like:

<div class="slide">
   <a href="/works/modern/aspen-residence-1.html" title="Aspen Residence 1"><img src="/assets/components/phpthumbof/cache/168.4a7b7aac4012bcf897438fab66b39aa4.jpg" alt="Aspen Residence 1" /></a>
</div>

The older I get, the faster I was.

http://www.evanchute.com/

197 Posts

jonahnaylor Reply #5, 6 years, 2 months ago

Hi I got this working with php7 with some help on irc by updating it to:

truncateGalleryItemTV_path:

<?php
$t = $input;
    $t = preg_replace("/[<].*src=/", "", $t);
    $t = preg_replace("/\" alt=\"\" title.*[>]/", "", $t);
    $t = str_replace("%2F", "/", $t);
    echo $t;

[ed. note: jonahnaylor last edited this post 5 years, 8 months ago.]

Yorkshire UK based hosting provider: https://www.simulant.uk