Use phpThumbsUp (or similar) to resize images

ContentBlocks
#1

I have a website that is a catalogue.

Thousands of standard-sized rows, each row composed of text and an image. There are thousands of rows in the whole site. Catalogue ‘pages’ are individual manufacturers, each set up as a Resource. Each ContentBlock row is a product.

I wanted to use a two thirds:one third two column layout with the images in the right column.

My images are of varying sizes (mostly for historical reasons), and I wanted the bootstrap css or phpThumbWhatever to fit the image to the column width, or near enough, and to resize the image as the screen size shrinks, in a mobile-friendly fashion.

I though that this must have been done before, but I couln’t find any examples in the documentation, or this forum.

I tried amending the Properties of the default Image field so that the tag looks like this:

<img src="[[phpThumbsUp? &input=`[[+url]]` &options=`w=250&zc=1`]]" alt="[[*pagetitle]]" title="[[*pagetitle]]">

Which gets the images the right size, and fills in the other fields too.

Having established all that - it occurs to me that this isn’t necessarily a good idea - resizing things comes with overhead after all.

Is there a better way?

Nic Boyde

#2

There indeed is overhead in resizing images. But there’s also overhead in serving images that are too large to your visitors, so it’s always going to be a compromise somewhere.

My personal preference is to indeed resize the images like you’re doing. That prevents out of control image sizes on the frontend, at the expense of some server processing. Make sure the generated images are properly cached.

The best approach is to resize images on upload to the exact sizes you need it, but that’s not always possible or convenient to set up.

In terms of which phpThumbWhatever to use, the current phpthumb flavour I would recommend is pThumb.