backdrop / backdrop-issues

Issue tracker for Backdrop core.
144 stars 40 forks source link

[UX] Make hero block images truly responsive. #2307

Open klonos opened 7 years ago

klonos commented 7 years ago

During the BADCamp training session when @quicksketch added the kitten image as the hero block background, upon resizing the screen to demo the responsiveness of the page, the image did resize properly, but the focal point (kitten face/eyes) was lost due to the resize (kitten ears still cute though 😄 ). Perhaps we should consider adding a 3rd part JS solution like https://github.com/wentin/ResponsifyJS/ that would solve this issue?

...perhaps we could make that generic so that it could be used for all images like ones added and displayed through fields or inside the body field of nodes.

wesruv commented 7 years ago

To get this done in core so it'd work for most people, this would be very tricky. It would require the user to set where the focal point of the image is (there's a Drupal module for that) and then JS on the page to reinforce that (don't think there's a Drupal module for this, but Squarespace does it).

I think this is a contrib candidate, unless anyone else has a better idea how to accomplish this.

klonos commented 7 years ago

I think this is a contrib candidate...

Yeah, this was my initial reaction as well, but I think that this is a similar case to the drop-down menus that we've included in core. You see, there's a lot of people that are actually facing this issue and they are not aware of Focal Point. So, you end up with a dozen contrib modules that are trying to solve the same issue and you have end-user confusion. What we did with the drop-down menus in Backdrop is to pick the most feature-rich solution out there and put it in core. I bet you that we won't see many menu modules ported in contrib for a long time (besides those that handle mega-menus, which SmartMenus does handle, but not out of the box) and that's a good thing. There will be no "Which one should I use?" questions and no confusion.

With the hero block being one of our big selling features and because we also have it in the default front page, people will be using it more. They will be facing what they will be perceiving as a "non-working", unresponsive thing. We know why and we can try to explain all we want, but people don't really care. They like it when "things just work".

It's not just the hero block. We'd be putting to good use a solution to this issue with post node images, user account images and image thumbnails in the upcoming media browser solution. Things will "magically" just work (most of the time) and people will have a better UX out of the box. The alternative would be to leave things as is and have users go on a "best solution" hunt, trying to find a contrib module that does this, then ask people to port it, then ask for it to have better integration with core etc.

It would require the user to set where the focal point of the image is (there's a Drupal module for that)

Yeah, that's how Focal Point and ImageField Focus work, but there's also modules like Image Focus Crop and Smart Crop that automate things by using face detection and/or entropy in order to require minimal user input or even not at all. In fact, ImageField Focus uses Smart Crop as a fallback when there's no user input:

New! Integrates with Smart Crop By default, Focus Scale And Crop performs a standard Scale and Crop when no focus data is available for the image. But if the Smart Crop module is available, an extra option will show up allowing you to set Scale and Smart Crop as the fallback action instead.

quicksketch commented 7 years ago

Also related to this issue: Center hero image by default #2296.