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?