phpThumbOf and image template variables

108 Posts

lukemcd Reply #1, 15 years, 8 months ago

Recently I played with the ModX Revolution add-on phpThumbOf. I thought I would share the code and open it up if anyone has suggestions for a different approach.

My pages have a template variable called mainImage. The input type for this variable is Image, it outputs a path to a selected image.

To place the image on a page that uses the template variable I use the basic code for calling a template variable:

<img src="[[*mainImage]]" />

If I want to use phpThumbOf to create and display a 240x120 version of the image I use:

<img src="[[*mainImage:phpthumbof=`w=240&h=120`]]" />

Now let’s say I want to find out the mainImage template variable from a different page and display a thumbnail version of it. First off, to be able to get the template variable from another resource I install the getResourceField add-on. For this example we can say I am trying to get the mainImage variable from the resource with the id 8. If I just wanted to display the full image I could use:

<img src="[[getResourceField? &id=`8` &field=`mainImage` &isTV=`1`]]" />

I can now use both getResourceField and phpthumbof to create the thumbnail:

<img src="[[getResourceField:phpthumbof=`w=240&h=120`? &id=`8` &field=`mainImage` &isTV=`1`]]" />

For extra credit I am going to slip in the option with getResourceField to have a default image in case the mainImage template variable is empty:

<img src="[[getResourceField:default=`/images/placeholder.jpg`:phpthumbof=`w=240&h=120`? &id=`8` &field=`mainImage` &isTV=`1`]]" />

Hope this helps!

The code above was updated April 12, 2011 to incorporate the solution from Mark H. to properly use the output modifier. The previous version used the snippet below which you will see referred to in the comments.

~~My solution was to create a snippet to do the thumbnail processing. I created a snippet called createThumb and gave it the code:~~

$options = "w=$width&h=$height";
$thumbnail = $modx->runSnippet("phpthumbof",array('input' => $input, 'options' => $options));
echo $thumbnail;

~~Now I can use this to create the thumbnail:~~

<img src="[[!createThumb? &input=`[[getResourceField? &id=`8` &field=`mainImage` &isTV=`1`]]` &width=`240` &height=`120`]]" />

☆ A M B ☆
44 Posts

mattyrobins Reply #2, 15 years, 8 months ago

Lukemcd

Great work.

Quick query: this would work fine if you were calling an image from the same resource each time.

On a site that I have developed (using Jared Loman’s phpthumb snippet), which is at www.turnaroundweek.com, I have a main page containing articles - each article has an accompanying picture. Both the article and the picture on the homepage link to an article page. I presume that I can create and display the image on the article page using code:

<img src="[[*articleimage:phpthumbof=`w=240&h=120`]]" />

I want to start using phpthumbof. How can I find the "articleimage" TV from my article page and display a thumbnail version of it on my homepage?

Sorry if this is a silly question or if I haven’t explained myself very well.

8 Posts

NSV Reply #3, 15 years, 8 months ago

You have to create your "articleimage" TV.
Input : text and output : image
Authorize this TV on your template and configure your page as well.

284 Posts

novolo Reply #4, 15 years, 8 months ago

Quote from: NSV at Jan 30, 2011, 05:07 PM

Input : text and output : image

The other way round?
input: image
output: default / plaintext

MODX Free Template Base: MODX-Boilerplate | my blog (lots of MODX stuff) | my gitHub (translations) | MODX User Groups Germany (Facebook)

108 Posts

lukemcd Reply #5, 15 years, 8 months ago

Thanks modxnovice. I used a set resource ID number in the example to keep it simple. In practice I am using this code to dynamically display the latest posts to a news blog. The blog code is from Shaun McCormick’s "Creating a Blog in MODx Revolution" tutorial. There is a "Latest Posts" widget which uses the following code:

[[!getResources? 
  &parents=`34,35`
  &hideContainers=`1`
  &tpl=`latestPostsTpl`
  &limit=`5`
  &sortby=`publishedon`
]]

The tutorial has you create a `latestPostsTpl` chunk:

<li>
  <a href="[[~[[+id]]]]">[[+pagetitle]]</a>
  [[+publishedon:notempty=`<br /> - [[+publishedon:strtotime:date=`%b %d, %Y`]]`]]
</li>

To enable phpThumbOf and an image template variable called `mainImage` I modified the chunk to:

<li>
  <a href="[[~[[+id]]]]"><img src="[[!createThumb? &input=`[[getResourceField:default=`/images/placeholder.jpg`? &id=`[[+id]]` &field=`mainImage` &isTV=`1`]]` &width=`240` &height=`120`]]" width="240" height="120" alt="news item" /></a>
  <a href="[[~[[+id]]]]">[[+pagetitle]]</a>
  [[+publishedon:notempty=`<br /> - [[+publishedon:strtotime:date=`%b %d, %Y`]]`]]
</li>

Hope that helps.

☆ A M B ☆
44 Posts

mattyrobins Reply #6, 15 years, 8 months ago

Thanks Lukemcd. I’ll check it out and let you know how I get on...

116 Posts

landonpoburan Reply #7, 15 years, 6 months ago

Quote from: lukemcd at Jan 22, 2011, 01:37 PM

My solution was to create a snippet to do the thumbnail processing. I created a snippet called createThumb and gave it the code:
$options = "w=$width&h=$height";
$thumbnail = $modx->runSnippet("phpthumbof",array('input' => $input, 'options' => $options));
echo $thumbnail;

Modified your snippet to allow for zoom cropping.

$width;
$height;
$zc;

// Check if $zc is set
$zc = isset($zc) ? $zc : 0;

// Get options from Snippet call
$options = "w=$width&h=$height&zc=$zc";

// Create the Thumb code using phpthumbof
$thumbnail = $modx->runSnippet("phpthumbof",array('input' => $input, 'options' => $options));

// return the thumb
echo $thumbnail;

Snippet call example

<img src="[[!createThumb? &input=`[[!getResourceField? &id=`19` &field=`CateringImage` &processTV=`1`]]` &width=`79` &height=`53` &zc=`1`]]" />

--
Landon Poburan
Web Designer and Developer

http://www.categorycode.ca
http://www.landonp.com

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #8, 15 years, 5 months ago

The solution to all this is real simple.

Instead of..

<img src="[[getResourceField? &id=`8` &field=`mainImage` &isTV=`1`:phpthumbof=`w=240&h=120`]]" />

place the output modifiers after the snippet name, but before the question mark

<img src="[[getResourceField:phpthumbof=`w=240&h=120`? &id=`8` &field=`mainImage` &isTV=`1`]]" />

If you would be throwing in a property set, reference it before the output filter, like this...

<img src="[[getResourceField@propertySet:phpthumbof=`w=240&h=120`? &id=`8` &field=`mainImage` &isTV=`1`]]" />

Should do the trick and get rid of the need to use a wrapper snippet.

At the time this topic was posted that wasn’t documented, but it has on the Output Modifier page on the RTFM at least for 1-2 months now.

Oh, and you may want to reconsider calling that custom snippet uncached... I do think phpthumbof would use its cache anyway, but it still needs to process on every request, checking if it was cached or not.

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

108 Posts

lukemcd Reply #9, 15 years, 5 months ago

Thanks Mark H.! Your solution works great, it’s nice to remove the need for the snippet. I have updated the original instructions.

49 Posts

digitalmaster Reply #10, 14 years, 1 month ago

Thanks! Great resource.. should be added to the rtfm plugin documentation!