We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 10638
    • 57 Posts
    Hi I setup a the TV according to guide here and called my TV ’blogImage’ -> http://rtfm.modx.com/display/ADDON/Gallery.Setting+Up+the+GalleryItem+TV

    I am at the same time trying to create a blog (also following the guide on rtfm.modx.com).

    The custom TV works fine in the revo manager. I can select the image and crop it, etc.

    Is there any particular trick to get this working inside a getResourcesTag tpl?

    I have tried to access the TV value directly using -

    [[!getResourceField? &id=`[[+id]]` &field=`blogImage`]]
    


    but no result. sad

    I want to be able to choose an image for a resource, and then have it show up as a thumb on the ’blog’ page which lists out all of the blog articles.

    I tried to make use of the galleryItem snippet but I think I’m trying to make it do things it wasn’t really designed for. Seeing as you have to pass the snippet an ID of the image you want to use it’s not very useful in this situation.

    Has anyone had any luck with this? grin Thanks!


    EDIT: The TV [[*blogImage]] works normally when inserted directly into a resource. I just can’t seem to get it working when it’s inside a TPL called by the getResourcesTag snippet.

    Is there a particular setting I need to use to get that to work?


    EDIT: If I use [[+tv.blogImage]] instead it does actually show something although it is in this format.

    {"gal_src":"http://localhost/sos_dev/assets/components/gallery/files/2010/10/pic-02.png","gal_id":2,"gal_name":"Photo 02","gal_description":"Interesting photo 02.","gal_image_width":"500","gal_image_height":"280","gal_orig_width":1313,"gal_orig_height":760,"gal_album":"1","gal_watermark-text":"","gal_watermark-text-position":"BL","gal_other":"","gal_rotate":"0","gal_sizer":100,"gal_cropCoords":"{\"left\":0,\"right\":502,\"top\":0,\"bottom\":352,\"relRight\":0,\"relBottom\":0,\"on\":true}","gal_cropTop":0,"gal_cropRight":0,"gal_cropBottom":0,"gal_cropLeft":0}
    

      • 10638
      • 57 Posts
      SOLUTION: grin

      Add this to your [[!GetResources ]] snippet call.

      &processTVs=`1`
      

        • 10638
        • 57 Posts
        Hmmm. I have another problem. embarrassed

        I am finding it difficult to understand the correct use of the GalleryItem custom TV.

        I created a TV called blogImage and I am using it in multiple instances, one is on the main list of blog articles, and in another instance I am using it in a related blog articles setup.

        The problem is, I can only set the width and height (and other phpThumb) properties via the TV controls on the actual resource. I need the images to be quite large on the main list of blog articles (each with an image), but on the related blog articles I just need a small thumb. The images are part of the TPL used for the getResources call.

        I tried using the phpthumb output filter by jaredloman, and this would work fine, but I am unable to grab just the SRC of the blogImage TV.

        Is there a way to access these values when using a custom galleryitem TV? I just need the source URL!!!!! laugh laugh

        eg:
        [[+tv.blogImage:image]]
        
          • 28215
          • 4,149 Posts
          You cannot do just the URL with the TV - you should use the GalleryItem snippet instead.
            shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
            • 10638
            • 57 Posts
            Hi thanks for your reply. cool

            I tried to use the GalleryItem snippet prior to this and the problem I ran into was that the snippet required me to pass it the ID of the image.

            eg:
            [[!GalleryItem? &id=`12`]]  
            


            It could be that I am completely misunderstanding the appropriate use of the snippet. undecided

            If I used the above code in the TPL then I found I couldn’t understand how to pass it an ID of the gallery item I wanted. I didn’t even understand how to associate a gallery item with a resource. I think that’s where I got stuck – I can’t quite understand the connection between the GalleryItem and a resource, or how to make the association. Ideally when I am calling the GetResources snippet for each article retrieved, if the resource (blog post in this case) has an associated GalleryItem then I could grab that and apply additional phpThumb filters to it (mainly just to control the size).

            The reason I went down the route of using the custom TV was that:
            1) it has a beautiful easy-to-use custom TV filter where I can grab a photo from a gallery and associate it to a blog post – perrrfect!

            The problem is that I am left with no way to manage the phpThumb options in the different sizes that associated photo will appear as, ie: thumb size, large size, extra-large size. You are limited to setting the height, width and other phpThumb options on the custom TV and that translates to loss of flexibility on the front-end.

            Again, it’s more likely than not that I am trying to wrangle this in the wrong way and that’s why I am hitting this difficulty. laugh


            The only other way I could think to get this working is like below.

            eg:
            [[!GalleryItem? &id=`[[*galleryItemID]]`]]  
            


            And then create a text TV where the I can manually enter the ID of the image (from the gallery) I want for this particular blog post. I actually don’t know that this is possible. It was just an idea.

            Hope this makes some sense. laugh
              • 73
              • 37 Posts
              Bit late in the day I know, but maybe this snippet will help?
              Mostly derived from core/components/gallery/elements/tv/output/galleryitem.php by the talented splittingred (thanks smiley)
              Image can be resized and should also maintain any applied cropping.
              <?php
              /**
               * galleryImageGenerator
               *
               * 2014 by Toby Trembath <http://twobyte.com>
               *
               * Built upon the excellent Gallery Package by Shaun McCormick <[email protected]>
               *
               * DESCRIPTION
               *
               * This Snippet uses galleryItem TV and formats appropriately for template position.
               * IMPORTANT, Output options for your GalleryItem TV *Must* be set to string
               *
               * PROPERTIES:
               *
               * &TVstring string containing TV values as JSON required
               * &width integer optional.
               * &height integer optional.
               *
               * Dependent on the excellent Gallery and PHPThumb Packages
               *
               * USAGE:
               *
               * [[galleryImageGenerator? &TVstring=`[[*featureImage]]` &width=`296`]]
               * Requires Chunk called photo-pic to render <img>, todo: make this a tpl property
               */
              /* example &TVstring json we will pass in..
              {
              	"gal_src":"/assets/gallery/3/34.jpg",
              	"gal_id":34,
              	"gal_name":"Cool Kitchen title",
              	"gal_description":"Cool Kitchen Alt",
              	"gal_image_width":1270,
              	"gal_image_height":847,
              	"gal_orig_width":3735,
              	"gal_orig_height":2490,
              	"gal_album":"3",
              	"gal_watermark-text":"",
              	"gal_watermark-text-position":"BL",
              	"gal_other":"",
              	"gal_rotate":"0",
              	"gal_sizer":"34",
              	"gal_cropCoords":"{\"left\":0,\"right\":762,\"top\":128,\"bottom\":849,\"relRight\":508,\"relBottom\":0,\"on\":true}",
              	"gal_cropTop":128,
              	"gal_cropRight":508,
              	"gal_cropBottom":0,
              	"gal_cropLeft":0
              }
              */
              $TVstring = $modx->getOption('TVstring', $scriptProperties);
              $width = (int) $modx->getOption('width', $scriptProperties);
              $height = (int) $modx->getOption('height', $scriptProperties);
              
              if (!$TVstring){
              	$modx->log(modX::LOG_LEVEL_ERROR, '[galleryImageGenerator] $TVstring "'.$TVstring.'" not understood!');
              	return;
              }
              
              // Taken from the GalleryItem output script, except value changed to be $TVstring
              
              $corePath = $modx->getOption('gallery.core_path',null,$modx->getOption('core_path').'components/gallery/');
              $modx->addPackage('gallery',$corePath.'model/');
              
              if (!empty($TVstring) && $TVstring != '{}') {
                  $data = $modx->fromJSON($TVstring);
                  if (empty($data)) return '';
              
                  $item = $modx->getObject('galItem',$data['gal_id']);
                  if ($item) {
                      /* get filters */
                      $filtersArray = array();
                      if (!empty($data['gal_rotate'])) {
                          $filtersArray['rot'] = (string)$data['gal_rotate'];
                      }
                      /* text watermark */
                      if (!empty($data['gal_watermark-text'])) {
                          $filtersArray['wmt'] = (string)$data['gal_watermark-text'].'|5|'.$data['gal_watermark-text-position'].'|ffffff|||5|||100|0';
                      }
              
                      /* get any other params */
                      $other = !empty($data['gal_other']) ? $data['gal_other'] : '';
                      if (!empty($other)) {
                          if (substr($other,0,1) != '&') {
                              $other = '&'.$other;
                          }
                      }
                      $dimensions = array();
                      
                      $data['gal_cropLeft'] = !empty($data['gal_cropLeft']) ? $data['gal_cropLeft'] : 0;
                      $data['gal_cropTop'] = !empty($data['gal_cropTop']) ? $data['gal_cropTop'] : 0;
                      $data['gal_cropRight'] = !empty($data['gal_cropRight']) ? $data['gal_cropRight'] : 0;
                      $data['gal_cropBottom'] = !empty($data['gal_cropBottom']) ? $data['gal_cropBottom'] : 0;
                      
              		if(!empty($width) && $width > 0){
              			//$dimensions['w']=$width;
              			$scale = ( $data['gal_image_width'] - $data['gal_cropLeft'] - $data['gal_cropRight'] )/$width;
              			$dimensions['w'] = round($data['gal_image_width']/$scale);
              		}
              		if(!empty($height) && $height > 0){
              			//$dimensions['h']=$height;
              			$scale = ( $data['gal_image_height'] - $data['gal_cropTop'] - $data['gal_cropBottom'] )/$height;
              			$dimensions['h'] = round($data['gal_image_height']/$scale);
              		}
              		if(count($dimensions)==0){
              			$dimensions = array(
              	            'w' => $data['gal_image_width'],
              	            'h' => $data['gal_image_height']
                          );
                          $scale = 1;
              		}
              		$dimensions['f'] = 'png';
              		
              		
                      /* crop */
                      if (!empty($data['gal_cropCoords'])) {
                          $filtersArray['crop'] = round($data['gal_cropLeft']/$scale).'|'.round($data['gal_cropRight']/$scale).'|'.round($data['gal_cropTop']/$scale).'|'.round($data['gal_cropBottom']/$scale);
                      }		
              		
                      $filters = '';
                      foreach ($filtersArray as $filter => $val) {
                          $filters .= '&fltr[]='.$filter.'|'.$val;
                      }
              
                      $url = $item->get('image',$dimensions).$filters.$other;
              
                      $props = array (
              		   'thumbnail' => $url,
              		   'url' => $url,
              		   'name' => $data['gal_description'],
              		   'alt' => $data['gal_description'],
              		   'title' => $data['gal_name'],
              		   'class' => $data['gal_class']
                      );
                      
                      $value = $modx->getChunk('photo-pic', $props);
              		
                  } else {
                      $value = '';
                  }
              } else { /* if empty dont return json, return blank */
                  $value = '';
              }
              return $value;
              
              ?>