Image Resizer Improvements - specify maxWidth/maxHeight

[wezell]

Parent Issue

No response

User Story

As a site builder, often when I am resizing images, what I am looking to do is actually just specify a maxWidth and/or a maxHeight.

Take resizing phone images for example. You can have images that are portraits (vertical) and images that are landscape (horizontal) - right now, in dotCMS you might specify a width to resize these images which might shrink landscaped images larger than that width but might also have the negative side effect of enlarging portrait images to the specified width. In practice, you almost never want to enlarge images that are narrower than your specified width. This is where a maxWidth would come in - it would act as a constraining box that would shrink images larger than that width to the maxWidth but would leave images smaller than that width alone. Same with maxHeight

If you specified both a maxWidth and a maxHeight, it would in essence act as a constraining box and shrink any images larger than the maxWidth/maxHeight proportionally and leave images smaller than that alone. When you couple this with a wrapping div, having this would allow you to build a nice thumbnail gallery that does not force images smaller than it to grow (like our thumbnailer, but without the additional whitespace added to the image) like this:

Acceptance Criteria

Maintain all current resizing functionality.
Example image urls:
/da Pathing
http://127.0.0.1:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/1000minh
http://127.0.0.1:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/500minw
http://127.0.0.1:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/200maxh
http://127.0.0.1:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/200maxw

long form pathing
http://127.0.0.1:8080/contentAsset/image/84e8159f-0e66-4970-9098-79f4e7e24686/image/resize_minh/1000
http://127.0.0.1:8080/contentAsset/image/84e8159f-0e66-4970-9098-79f4e7e24686/image/resize_maxh/100
http://127.0.0.1:8080/contentAsset/image/84e8159f-0e66-4970-9098-79f4e7e24686/image/resize_maxw/100
http://127.0.0.1:8080/contentAsset/image/84e8159f-0e66-4970-9098-79f4e7e24686/image/resize_minw/200

1. If there is a hard width or height specified, respect it first
2. If there is maxw and/or maxh for max image resizing, respect them second
3. if there is a minw and/or minh respect them last.

These cannot be combined.

[jcastro-dotcms]

NOTE TO QA:

Based on the rules stated by Will in the ticket's description:

1. If there is a hard width or height specified, respect it first
2. If there is maxw and/or maxh for max image resizing, respect them second
3. If there is a minw and/or minh respect them last.

Here are some tests scenarios that can be used to verify that the new resizing options are working as expected:

-> Testing image with /dA/:

Base image:

• URL (surfboard): http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1
• Original Width: 240px
• Original Height: 550px

Scenarios:

1. Specify width: http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/500w
   Result: The image is enlarged proportionately to 500px width.

2. Specify width and height: http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/350w/500h
   Result: The image is set to 350px width and to 500px height. The surf board must show up as deformed.

3. Specify maximum width and maximum height: http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/500maxw/200maxh
   Result: The image will be 200px height. The height will be adjusted to be lower than 500px.

4. Specify minimum width or height:

• Case # 1: http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/350minw
• Case # 2: http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/700minh

Result: The image is enlarged proportionately to 350px width for case # 1, and to 700px height for case # 2.

5. Specify both minimum width and height:

• Case # 1: http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/600minh/350minw
• Case # 2: http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/500minh/900minw

Result: The image is resized proportionally in the most restrictive (smallest) dimension. So, for case # 1, the new image will be 350px width, with the proportionally adjusted height greater than 600px. For case # 2, the new image will be 900px width, with the proportionally adjusted height greater than 500px.

6. Specify both hard width and minimum width (the same for hard height and minimum height): http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/350w/500minw
   Result: The image is enlarged to 300px width. The minimum width parameter is ignored.

7. Specify a hard width and minimum height: http://localhost:8080/dA/84e8159f-0e66-4970-9098-79f4e7e24686/image1/350w/1000minh
   Result: A hard width is being set first, so the image is reduced to 350px width. The minimum height will be ignored.

> Testing image with /contentAsset/

Base image:

• URL (beach): http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset
• Original Width: 1200px
• Original Height: 801px

Scenarios

1. Specify width: http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_w/500
   Result: The image is reduced proportionately to 500px width.

2. Specify width and height: http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_w/350/resize_h/500
   Result: The image is set to 350px width and to 500px height. The beach must show up as deformed.

3. Specify maximum width and maximum height: http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_maxw/800/resize_maxh/200
   Result: The image will be 200px height. The width will be adjusted to be lower than 800px

4. Specify minimum width or height:

• Case # 1: http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_minw/1300
• Case # 2: http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_minh/950

Result: The image is enlarged proportionately to 1300px width for case # 1, and to 950px height for case # 2.

5. Specify both minimum width and height:

• Case # 1: http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_minh/950/resize_minw/2000
• Case # 2: http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_minh/1000/resize_minw/900

Result: The image is resized proportionally in the most restrictive (smallest) dimension. So, for case # 1, the new image will be 2000px width, with the proportionally adjusted height greater than 950px. For case # 2, the new image will be 1000px height, with the proportionally adjusted width greater than 900px.

6. Specify both hard width and minimum width (the same for hard height and minimum height): http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_w/350/resize_minw/500
   Result: The image is reduced to 350px width. The minimum width parameter is ignored.

7. Specify a hard width and minimum height: http://localhost:8080/contentAsset/image/fdeab4b6-5f06-4a47-a779-32dc3cc1f10b/fileAsset/resize_w/350/resize_minh/1000minh
   Result: A hard width is being set first, so the image is reduced to 350px width. The minimum height will be ignored.

[bryanboza]

Fixed, tested on master // docker // FF

Tested each escenario and now we are able to send and set the filters without problems.