? ?
avatar waveywhite
waveywhite
26 Nov 2019

Hi,

Something we have developed for our Joomla sites is the means to render scaled and cropped images on the front-end, without opening up a can of worms. Is this something the Joomla team would be interested in?

In brief, on sites such as https://www.northernrailway.co.uk/ we have a component which renders images via URLs such as https://www.northernrailway.co.uk/img/2568/360/260/Tickets-to-mobile_Promo-Box_720x520_V2.jpg, which we then distribute via CDN.

The URL path elements are
<menu>/<id>/<width>/<height>/filename

The way we avoid abuse by constructing URLs which force the server to render arbitrary images, is that images are requested in the template like so:

require_once` JPATH_BASE . '/components/com_scaler/models/image.php';
     
$scaler = new ScalerModelImage();
$image =  $scaler-request($imagePath, $width, $height);
?>
<img src="<?=$image?> />

We store the image request in the database and render out a routed path. When the browser requests the image, the router uses the request id to find the image, renders it to specification and return it. We do an optimised scale-and-crop on images and use the Joomla caching layer.

Image requests to constructed URLs don't work. The image size on the path is compared with the database details and a 404 is returned if it doesn't match.

We find it's a massive help with usability because users don't have to worry about the absolute dimensions of images, they just need to worry about aspect ratio.

Please let me know if this would be a helpful contribution to Joomla.

-David.

avatar waveywhite waveywhite - open - 26 Nov 2019
avatar joomla-cms-bot joomla-cms-bot - labeled - 26 Nov 2019
avatar joomla-cms-bot joomla-cms-bot - change - 26 Nov 2019
Labels Added: ?
avatar brianteeman
brianteeman - comment - 26 Nov 2019

(dam I use that site several times a week and I never realised it was Joomla - well done)

avatar waveywhite
waveywhite - comment - 26 Nov 2019

(Haha! Well, that cheered me up today!)

avatar brianteeman
brianteeman - comment - 26 Nov 2019

How does it work with article images?

avatar waveywhite
waveywhite - comment - 26 Nov 2019

It doesn't at present work with images in article text, although it works with intro and full-text images.

To make it work with images in article text it needs a content plugin, to search for image tags and create the src links via the data model. A benefit of this is that the plugin could process the image according to the width and height specified in the WYSIWYG editor, to produce an optimised image. We use the scaler component to create responsive images for different DPIs, which could be an additional feature for a plugin.

avatar brianteeman
brianteeman - comment - 26 Nov 2019

It doesn't at present work with images in article text, although it works with intro and full-text images.

That is actually what I meant ;)

I can't speak for anyone else but it does sound like a good addition for Joomla 4 to me. Maybe the quickest thing to do to gauge opinion would be to make a small video recording of it in action in the admin?

avatar alikon
alikon - comment - 27 Nov 2019

sounds good to me too, at least on the paper, looking forward to see at some RFC/POC/PR

avatar waveywhite
waveywhite - comment - 27 Nov 2019

There's very little to show in the admin, so I'm not sure how much value a video would be. Here's the extent of the admin section.

Options. You may want to handle the existing options differently as the CDN and live domain options are just there to help us with how we arrange things, and it would help to have a default JPEG quality option.

image

A menu item. This is the SEF end-point for rendered images
image

And that's it!

avatar N6REJ
N6REJ - comment - 27 Nov 2019

This would have to be able to be turned off and I would like to know a LOT more about the technology doing the cropping/resizing. For some sites and some people touching an image in anyway is a quick way to lose a J! user.
For example, only product photography site I would blow a gasket if J! decided I didn't know what I wanted my images to look like.
Unless your developers are EXTREMELY familiar with how images are built internally I doubt they could do anything to my image(s) that wouldn't degrade them. Not bragging, ijs, I've got pro grade tools I run them thru before they ever land in my storage folders.
To the best of my knowledge there is no perfect responsive image handler YET.

avatar waveywhite
waveywhite - comment - 27 Nov 2019

Yes, definitely it needs to be able to be turned off. Currently on our projects we include it where we need it, however if it's included in Joomla then the component should have an "off" option which simply returns back the original image url, rather than a url for a processed image. If there is a content plugin as well, to handle in-text images, then that could be turned off separately if required.

We've done a large-scale professional photography site before and this isn't the technique we use for generating images for that. This is a usability enhancement to ensure that images fit with the design, which we find is a habitual problem which users struggle with.

The code we use is very simple and no doubt there's room for improvement. In the model, once the query is validated, we do a scaled centered crop using ImageMagick.

		$imagick = new Imagick(JPATH_ROOT . '/' . $path);
		
		$imagick->cropthumbnailimage($width, $height);
		
		$format = $imagick->getimageformat();
		if ($format == 'JPEG' || $format == 'JPG') {
			$imagick->setimagecompressionquality($this->params->get('jpeg_quality', 70));
			$imagick->stripimage();
		}
		
		$data->img = $imagick->getImageBlob();

The way you build responsive images using this is that you request multiple images in the template code, each one being a separate request. So, you are fully in control of how you map onto screen resolution, screen size or a bit of both.

avatar simbus82
simbus82 - comment - 27 Nov 2019

Wow nice!!!

We typically use a thing like this... https://gist.github.com/simbus82/3eb70128691ab93a6fd420ed6592e99f
but it is really "rude" (it's an old version, the actual used for some our customers generates scrset too.)
Really slow on the first load of page... but then it's good ;-)

I like a lot the Magento 1.9.x Image Processing.
In the frontend you simply call a function "$this->image(original_url)->resize(300,200)" to have a perfect cached resized image without losing the original.

avatar waveywhite
waveywhite - comment - 27 Nov 2019

Hi @simbus82 ,
Yes, it's very analogous to the Magento processing.

avatar N6REJ
N6REJ - comment - 28 Nov 2019

imagemagick has a great algorithm, although I've heard there are a couple of better ones but they were far above my brain cell capacity lol.
that magento behavior looks exactly like imagemagick's process.
@simbus82 your method sounds alot like retina behavior. I wonder what sites like smugmug use for their compression.

avatar Quy Quy - change - 5 Feb 2020
Labels Added: Information Required
avatar Quy Quy - labeled - 5 Feb 2020
avatar Quy
Quy - comment - 5 Feb 2020

@waveywhite please submit PR for consideration/testing.

avatar Quy Quy - change - 5 Feb 2020
Labels Added: ?
avatar Quy Quy - labeled - 5 Feb 2020
avatar waveywhite
waveywhite - comment - 5 Feb 2020

Yes. Sorry for the delay. I'll get on to this.

avatar infograf768 infograf768 - change - 7 Feb 2020
Title
Proposal for image scaling in template and layout files
[4.0] Proposal for image scaling in template and layout files
avatar infograf768 infograf768 - edited - 7 Feb 2020
avatar infograf768
infograf768 - comment - 7 Feb 2020

Modified title as this would have to be done for 4.0 (new feature).

avatar waveywhite
waveywhite - comment - 7 Feb 2020

I've uploaded the code to https://github.com/waveywhite/com_scaler - is someone able to take it from there? I'm unsure of the proper way to integrate it as a Joomla 4 PR.

A few issues with the code:

  1. It's Joomla 3 code and uses the MVC libraries which are being deprecated. However, it is extremely simple and there's no admin section apart from some settings.
  2. It uses a "fixed" inflector which can easily be taken out given that there is only one view
  3. The options could probably be simplified. It has an option to specify a pull CDN and the live domain of the site, which is when the pull CDN should be applied. Please feel free to remove these
  4. Caching needs thought! We use CDNs and Joomla file caching to mitigate server load. I suggest that somewhere is found in the images folder instead, so that the scaled images aren't flushed out with cache pruning.
avatar Quy Quy - change - 11 Mar 2020
Labels Removed: Information Required
avatar Quy Quy - unlabeled - 11 Mar 2020
avatar waveywhite
waveywhite - comment - 17 Mar 2020

Hi all. I'm looking at moving over to the Joomla 4 MVC for com_scaler. Is there a good example of best practice for a J4 MVC component? Or are we doing things like com_content does?

avatar waveywhite
waveywhite - comment - 17 Mar 2020

I've found https://github.com/ceford/j4xdemos-com-mywalks so I'll base my changes on that.

avatar rdeutz rdeutz - change - 18 Dec 2020
Status New Closed
Closed_Date 0000-00-00 00:00:00 2020-12-18 10:29:44
Closed_By rdeutz
avatar rdeutz rdeutz - close - 18 Dec 2020

Add a Comment

Login with GitHub to post a comment