cloudinary/responsive_breakpoints_generator

Automate Art Direction a bit more

Closed this issue · 2 comments

alamowo commented

Hi,

first of all: you have built a great tool! I especially like your approach of making up new breakpoint depending on file size.

Long story

I've tried to use it for a project i'm working on, but noticed that it is kind of struggle to fit into my use case. I need to create the responsive images breakpoints for Drupal 8 site. It's an intranet, so we have a responsive grid with multiple columns from large to small.

In Drupal 8 you have to define breakpoints (css style) in a config file. Then you create a new "responsive image style", which gives you a form with multiple select fields. There you can choose a "regular image style" for each breakpoint defined in your configuration. These are like: "Teaser large: scale and crop the image to 1200px by 800px" or something like that.

On a website with like 20 different kinds of image use cases in 5 different breakpoints, you can get mad.

Short story

I've wondered how to use it for images that don't scale upon the whole viewport. But that is what art direction is used for, I guess.
But still it's a lot of work to do this for a site with lots of images in different dimension and aspect ratios.

Question

Are there plans to automate the art direction process?

Possible solution

You enter a URL and a css selector. The tool inspects the image dimensions in various screen resolutions, with puppeteer for example, and calculates the breakpoints accordingly.

idobarnoam commented

Hi @alamowo

The breakpoint generator does offer a way to "direct" the art direction.
you could read about it in length in the post below:
https://cloudinary.com/blog/push_button_art_direction_with_cloudinary_s_responsive_image_breakpoints_generator#comment-2973863753

also, you might find it useful to check out our other responsive solutions.

Hope this helps

roeeba commented

Closing this issue due to the time elapsed. Please feel free to either re-open the issue, contact our support at http://support.cloudinary.com or create a new ticket if you have any additional issues.