Responsive images with the Gallery addon and phpThumbOf (and optional caching over a CDN), might be of use to someone.

19 Posts

c.reiss Reply #1, 13 years, 1 month ago

Hi,

I just thought I'd share this here, as it is something that took me a while to figure out. I'm using the gallery addon with modx revolution, and I wanted to have responsive images. So users with a small screen size only have to download small images, which is a tremendous speedboost for mobile users.

There are a lot of solutions out there, but my demands were specific:

Uses the img tag (so no picturefill)
Is cacheable over a CDN (so adaptive images was out, since it uses dynamic images)
Is based on user window resolution, not connection speed (so hisrc was out as well)

I ended up using a javascript/jquery based srcset polyfill, which can be found here: https://github.com/JimBobSquarePants/srcset-polyfill. Srcset.js needs the following syntax with an image in order to work:

<img src="small.jpg" 
     srcset="small.jpg 1w,
	     medium.jpg 320w,
	     large.jpg 500w" />

The srcset attribute lets the script know where the different versions can be found. What I did is use the gallery addon to retrieve the large master-image, and resize that when necessary using phpthumbof. So for example for one image, this is what I used:

<img src="[[!phpthumbof? &input=`large.jpg` &options=`&w=320&zc=0`]]" 
     srcset="[[!phpthumbof? &input=`large.jpg` &options=`&w=320&zc=0`]] 1w,
             [[!phpthumbof? &input=`large.jpg` &options=`&w=500&zc=0`]] 320w,
             large.jpg 500w" />

To make this usable for all my images, I created a chunk called "srcset.returnimg", which I call for the file example.jpg using the following syntax:

[[!$srcset.returnimg? src=`example.jpg`]]

The code for this chunk looks like this:

<img src="[[!phpthumbof? &input=`[[+src]]` &options=`&w=320&zc=0`]]" 
     srcset="[[!phpthumbof? &input=`[[+src]]` &options=`&w=320&zc=0`]] 1w,
     [[!phpthumbof? &input=`[[+src]]` &options=`&w=500&zc=0`]] 320w,
     [[+src]] 500w" />

And this outputs the responsive images for each image you send to it. It also gives you convenient control over the breakpoints you're using for your images with one chunk.

If you want to use this chunk with the gallery addon, you can just use the call to $srcset.returnimg in a template, and gallery will automatically output all your images as responsive images. I hope this is of use to someone, it works marvellously for me. Since the urls that phpthumbof outputs are static I can even have cloudflare cache them, which means even faster downloads for mobile users.

The only potential downside is that users who have javascript turned off get to see the small version regardless of their window resolution. But that is something I'm fine with, and you could fix this with an img in a noscript tag and display:none for the responsive img. The extra overhead for also downloading the responsive img would be only a minor penalty. [ed. note: c.reiss last edited this post 13 years, 1 month ago.]

19 Posts

c.reiss Reply #2, 13 years, 1 month ago

By the way, after some experimenting I've switched to the picturefill polyfill: https://github.com/scottjehl/picturefill. The syntax is a little more verbose, but it is more actively maintained and works a little better.

Changing to this was just a matter of adapting the syntax for the chunk $srcset.returnimg (and I've changed the name as well of course). Works like a charm!

MODX Staff
12,272 Posts

Ryan Thrash Reply #3, 13 years, 1 month ago

Nice solution … thought I'd worry about using this on a busy site with phpThumb since it can tend to take a server to its knees. Have you looked at using this with ThumbsUp?

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

☆ A M B ☆
191 Posts

jgrant Reply #4, 13 years, 1 month ago

Is there a particular reason you're calling everything uncached? Cached (i.e. [[phpthumbof? ...]] ) would be much better for performance.

Extras :: pThumb • Resizer • imageSlim • setPlaceholders

19 Posts

c.reiss Reply #5, 13 years, 1 month ago

Quote from: jgrant at Aug 11, 2013, 03:08 PM

Is there a particular reason you're calling everything uncached? Cached (i.e. [[phpthumbof? ...]] ) would be much better for performance.

Not really, I thought that that was necessary

. I'm calling it cached now, thanks for the suggestion!

And Ryan, I looked into phpThumbsUp, but not as a way to automatically generate the smaller versions on upload (just as a complete responsive image solution). I'll check into it, 'cause it looks like an even better solution. I'll report back with the results! [ed. note: c.reiss last edited this post 13 years, 1 month ago.]

☆ A M B ☆
191 Posts

jgrant Reply #6, 13 years, 1 month ago

Quote from: c.reiss at Aug 12, 2013, 06:39 AM

Not really, I thought that that was necessary . I'm calling it cached now, thanks for the suggestion!

Yeah, it's easy to think that actually. There's a fair amount of misinformation out there : )
But almost all of the time cached is what you want. Go with cached as the default, and uncached only in cases where you know exactly why you need that. I wrote a more detailed explanation of it here recently, if you're interested.

phpThumbOf does have some significant performance bottlenecks, especially once you get a lot of images in your cache. You might have a look at pThumb too. It's almost identical to phpThumbOf (the snippet name is the same so you don't even have to change any of your existing code), but I fixed all the performance problems. Once the thumbnails have been generated it adds very little extra weight to the page, unlike the original version.

Extras :: pThumb • Resizer • imageSlim • setPlaceholders

19 Posts

c.reiss Reply #7, 13 years, 1 month ago

Quote from: rethrash at Aug 11, 2013, 11:45 AM

Nice solution … thought I'd worry about using this on a busy site with phpThumb since it can tend to take a server to its knees. Have you looked at using this with ThumbsUp?

I've been trying to get my solution to work with phpThumbsUp (so it'll automatically create the necessary thumbnails when anything is uploaded through the gallery addon), but I ran into two problems:

phpThumbsUp will only automatically create resized images when an image is uploaded through the file manager. It will not trigger if you upload files through the gallery addon. I could not find a way to trigger it after an upload through the gallery addon.

If I get the first problem solved, I've still got the issue of how to refer to the created resized images. Maybe I could use the [[phpthumbsup? &input=`x`]] syntax, and let it figure out for itself that the images are already cached? It would be faster to be able to link directly to the resized version, but from what I understand the filenames are pretty difficult to keep track of.

Would you maybe know if there's a way around these problems? I'd love to hear it if you do, because that would make phpThumbsUp an even better solution. Until then pThumb is doing a good job though, and not causing a lot of extra overhead.

By the way: I'm not using the vanilla phpThumbUp responsive image solution because I'd like to be able to manage my images through the gallery addon, which is what I think you were referring to originally. [ed. note: c.reiss last edited this post 13 years, 1 month ago.]

19 Posts

c.reiss Reply #8, 13 years, 1 month ago

Quote from: jgrant at Aug 12, 2013, 07:18 AM

Quote from: c.reiss at Aug 12, 2013, 06:39 AM

Not really, I thought that that was necessary . I'm calling it cached now, thanks for the suggestion!

Yeah, it's easy to think that actually. There's a fair amount of misinformation out there : )
But almost all of the time cached is what you want. Go with cached as the default, and uncached only in cases where you know exactly why you need that. I wrote a more detailed explanation of it here recently, if you're interested.

phpThumbOf does have some significant performance bottlenecks, especially once you get a lot of images in your cache. You might have a look at pThumb too. It's almost identical to phpThumbOf (the snippet name is the same so you don't even have to change any of your existing code), but I fixed all the performance problems. Once the thumbnails have been generated it adds very little extra weight to the page, unlike the original version.

By the way, I switched to pThumb, and it's a lot faster, thanks! I get one error when I clear my cache manually though:

[OnSiteRefresh]
Warning: Missing argument 3 for phpThumbOf::__construct(), called in /home/myname
/domains/mywebsite.com/public_html/core/cache/includes/elements/modplugin
/9.include.cache.php on line 47 and defined in /home/myname/domains/mywebsite.com
/public_html/core/components/phpthumbof/model/phpthumbof.class.php on line 39

Any ideas what's causing this, or how to fix it? (It might have something to do with that when I was installing pThumb, it only showed console running... and no messages after that. I just clicked ok, and everything worked fine afterwards, except for the weird error message above. A subsequent reinstall showed all normal status messages, but the error still persists.) [ed. note: c.reiss last edited this post 13 years, 1 month ago.]

☆ A M B ☆
191 Posts

jgrant Reply #9, 13 years, 1 month ago

Try this: edit the phpThumbOfCacheManager plugin and change line 42 from

$phpThumbOf = new phpThumbOf($modx, $pt_settings);

to

$phpThumbOf = new phpThumbOf($modx, $pt_settings, FALSE);

Thanks for pointing that out! It was a dumb oversight on my part and I'll fix it very soon in the next version.

Extras :: pThumb • Resizer • imageSlim • setPlaceholders

19 Posts

c.reiss Reply #10, 13 years, 1 month ago

Quote from: jgrant at Aug 12, 2013, 08:45 AM

Try this: edit the phpThumbOfCacheManager plugin and change line 42 from
$phpThumbOf = new phpThumbOf($modx, $pt_settings);
to
$phpThumbOf = new phpThumbOf($modx, $pt_settings, FALSE);
Thanks for pointing that out! It was a dumb oversight on my part and I'll fix it very soon in the next version.

You mean core/components/phpthumbof/elements/plugins/plugin.phpthumbofcachemanager.php right? Because I changed it, logged out and back in, and the error still persists (it still shows up when I clear the cache). Or do I need to do something else? Is it the $debug variable that it's missing? [ed. note: c.reiss last edited this post 13 years, 1 month ago.]