Hi all

I looking for some architecture guidance on how to build the following:

I want to integrate a third party service for responsive images to solve the following problems:

• device-pixel-ratio-based selection
• viewport-based selection
• art direction-based selection
• image format-based selection More info on this here: https://dev.opera.com/articles/responsive-images/

The functionality I want to integrate into October is based on a third party service and would work as follows: The third party service allows for url based image manipulation and also takes care of serving images true a CDN.

For hard coded images I would propose to build a twig helper in October that automatically generates the required markup (based on an short hand version that defines the art direction when needed) to support image sizes, high-DPI images, different image types & art direction. Combining the url based image manipulation of the third party service with the picture tag.

For images managed from the backend I would propose to store the aspect-ratio for every breakpoint based on the design in a .yaml config file. Afterwards I would propose to store the x, y, width and height of the user generated crop for every image in a database. This would allow to serve images with the right art direction based on the aspect ratios defined by the designer. The third party service even allows to automatically do a saliency-based crop to focus on the points of interest. I would use this feature in the backend to propose a crop to the user. So this would go as follows when used for dynamic content in the backend:

• the user uploads a picture
• the third party does a saliency-based entropy crop for every breakpoint defined in the yaml file. (or with the inspector)
• the user can inspect the proposed crops
• if the auto proposed crop is not what the user wants to focus on for a given breakpoint he can open a cropper in a modal window and crop the region he wants to focus on, keeping in mind the locked aspect ratio defined in the yaml file. The integration would store in database the x,y,w,h variables retrieved from the cropper. These variables can then be used to output and image with the correct art direction using url based crop parameters. After applying the crop the third party service can output the required dpr, size and format since the crop operation always precedes the other operations.

My question boils down to the following:

I would like to build a solution that is as generic as possible. So wherever I want to add this functionality to a backend CRUD I want to be able to do so by simply specifying that it's a responsive image and specify an aspect ratio for every breakpoint required by the design of the site.

How would I do this in October?

• isolate the cropper functionality as a widget?
• register custom twig macro's for the required output?
• make the breakpoints and aspect ratios accessible to the inspector or the builder?
• bundle all functionality in a form widget (eg. instead of a "colorpicker" ,"image-cropper")

Any suggestion on how to integrate this with the October architecture?

Thanks in advance for some guidance!