This is rough draft

Problem/Motivation

So I think this solution is awesome. It would be awesome to have a full blown Ui that rivals Responsive Images

Proposed resolution

We create a custom entity and UI similar to Responsive Images

But when you click “Add Easy Responsive Style” the form you can select different images styles and pair it was a text field for viewport.

Then a custom formatter on the image field can point to this new easy responsive style.

Then utilizing a module template renders it automatically.

Remaining tasks

User interface changes

API changes

Data model changes

Comments

smustgrave created an issue. See original summary.

seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented

I definitely think the UI for this could be improved! Mostly built this module as a tool for myself (as how most modules start) and usability was not my main concern as you might have noticed.

If you could maybe mock some screens on how you think it could look, I'd be happy to review. Once we agree on the interface we could get this done.

smustgrave’s picture

smustgrave commented

So my initial thought was doing something similar to responsive images.

Where you could create a set of image styles, without the new for breakpoints since the code handles that.

Then in your media display there would be a formatter for easy responsive images that you could select.

Just a rough thought but I've been using this module on projects now as I find the concept great.

christian.wiedemann’s picture

christian.wiedemann commented

Hi,

I think we need a field formatter where we can select the image handling:

Imagehandling

  • Scale
  • Aspect Ratio: Here is a dropdown to select the generated aspect ratios
  • Responsive: Here are the breakpoint listed and you can select an aspect ratio for each breakpoint
  • Background Image: (Is this possible?)

What do you think. We could provide a Merge Request.

seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented

This issue is currently about 2 different changes.

  • Improve the UI to set up the responsive image style and ratio's
  • Adding a formatter

I think we should implement those improvements separately. @Christian.wiedemann could you create a new issue for just the formatter? That is probably the quickest way to get it in.

As a first response:
Scale: - Not sure what you mean by this? The JavaScript should automatically pick the optimal image for a specific ratio?
Aspect Ratio: Here is a dropdown to select the generated aspect ratios - This makes sense to me.
Responsive: Here are the breakpoint listed and you can select an aspect ratio for each breakpoint - This would be extra cool!
Background Image: (Is this possible?) - I'm not sure how this should work. A background image is mostly placed on some sort of wrapper. Having an empty div with a background image from a formatter doesn't seem more useful than an actual image tag?

smustgrave’s picture

smustgrave commented

Sorry for going MIA.

But looks like you got the idea. Initial thought UI would be very similar to Responsive Images but instead using this.

smustgrave’s picture

smustgrave commented

So since https://www.drupal.org/project/easy_responsive_images/issues/3281910 allows admins to select a ratio what should this ticket cover? Know I opened it but opening of the field formatter covers everything

seanb’s picture

seanb
Primary language Dutch
Location Netherlands
commented
Status: Active » Closed (won't fix)

Let's close this one for now if the formatter covers what you initially needed. Thanks!