Feature #77532

Epic #77810: Improve (responsive) image handling

Add possibility to define multiple croppings per image

Added by Joe Jones over 2 years ago. Updated 7 months ago.

Status:
Closed
Priority:
Could have
Assignee:
Category:
Backend User Interface
Target version:
-
Start date:
2016-08-17
Due date:
% Done:

0%

PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

The current implementation of the cropping tool does just support one cropping area.
For future features like "cropping area per viewport" we need the possibility to define multiple cropping areas.

This could be done on a key basis. So you can define multiple cropping keys and define a cropping area for each key.

For example:
The image is 100px100px

Cropping keys:
  • mobile: y 10, x 10, w 40, h 40
  • tablet: y 10, x 10, w 60, h 60

Original Ticket Text:

Dear BE-Team,

it would be great to create different edits of one resource media file. The cropping feature is great, so it would be a great topping not to refer a media file twice to get two different cropping areas (e.g. headerimage and menuimage of the same > keyimage) but add a second edit of the media file.

Best wishes
Martin


Related issues

Related to TYPO3 Core - Story #75880: Add art direction capabilities to BE Closed 2017-02-23
Blocks TYPO3 Core - Feature #61796: Images: Responsive Area of Interest Cropping Closed 2014-09-22

History

#1 Updated by Sascha Egerer over 2 years ago

  • Subject changed from More Edits of one Image (Crop and future features) to Add possibility to define multiple croppings per image
  • Description updated (diff)
  • Category set to Backend User Interface
  • Status changed from New to Accepted
  • Assignee set to Sascha Egerer

#2 Updated by Frans Saris over 2 years ago

  • Parent task set to #77810

#3 Updated by Michiel Roos over 2 years ago

On it!

#4 Updated by Michiel Roos over 2 years ago

Currently the crop is stored in the sys_file_reference table in the 'crop' field as a json value: {"x":55.81250000000001,"y":83.88500000000002,"width":570,"height":248.52,"rotate":0,"scaleX":1,"scaleY":1}

We can store up to 4000 characters in that field.

If we add the crop key name to the example crop value above, we get around 117 characters using the key name 'default'. So when we do a preservative estimate of 200 chars for a crop, the field can hold 20 cropings.

#5 Updated by Sascha Egerer over 2 years ago

Michiel Roos wrote:

Currently the crop is stored in the sys_file_reference table in the 'crop' field as a json value: {"x":55.81250000000001,"y":83.88500000000002,"width":570,"height":248.52,"rotate":0,"scaleX":1,"scaleY":1}

We can store up to 4000 characters in that field.

If we add the crop key name to the example crop value above, we get around 117 characters using the key name 'default'. So when we do a preservative estimate of 200 chars for a crop, the field can hold 20 cropings.

I think that should be enough. If not you can extend the fieldsize...

#6 Updated by Gerrit Code Review over 2 years ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/49889

#7 Updated by Gerrit Code Review over 2 years ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/49889

#8 Updated by Gerrit Code Review over 2 years ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/49889

#9 Updated by stephen leger over 2 years ago

Hi guys,

Multiple cropping is only a little part of the problem.

What if i want different quality for each size ?
What if i have 12 breakpoints ?
What if i want different images for each breakpoint ?

Multiple cropping is a great feature,
but multiple file reference with all feature allready
available for each one is probably a far better way to go !
(and easyest too)

All pieces are allready here, it only require a rendering method
witch take care of taking x sources and render a single
picture srcset or whatever data attribute.

Maybe grouping files references as a srcset could be a viable option ?

#10 Updated by Frans Saris about 2 years ago

  • Status changed from Under Review to Resolved

Resolved with #75880

#11 Updated by Benni Mack 7 months ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF