Follow-up to #2260061: Responsive image module does not support sizes/picture polyfill 2.2

Move fallback image to the responsive image style, this way the fallback can be defined in the config of the theme and the site builder only has to select the mapping on the display formatter.

Theme builders should be the ones who decide what the fallback image style should be, this means the fallback image style for a responsive image style should be defined in config. It also makes a lot more sense to use the same fallback image style for all <picture> tags that are output using the same responsive image style (either by using '#theme' => 'responsive_image' or the field formatter). So logically the fallback image style should be defined on the responsive image style (vs on the field formatter settings as it is now).

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Task
Issue priority Major because it highly increases the DX for themers, and UX for site builders using responsive images.
Prioritized changes The main goal of this issue is usability and user experience. This is also further cleanup after the larger cleanup in a recent critical change: #2260061: Responsive image module does not support sizes/picture polyfill 2.2.
Disruption

May be disruptive to a small number of beta sites.

Any effects on core systems are addressed in this patch, and there are no known contributed modules this would affect.

As of April 20, 2015, there are roughly 250 public beta sites. Responsive images module is not enabled by default, so a smaller number of those sites could be using responsive images. Those sites would need to add a fallback style to their responsive image mappings, rather than defining it in field formatters.

Because multiple fields could use the same responsive image mapping, defining the fallback image style separately on each field, an upgrade hook might be difficult. Providing a BC layer might be possible, but that seems like a significant amount of technical debt for a small number of sites.

The benefits of this change outweigh the disruption, as it allows fallback styles to be defined in one place rather than in many places, which is a big simplification for the much larger number of sites that may use this in the future.

Comments

attiks’s picture

Title: Implement Picture polyfill 2.1 » Move fallback image to the responsive image mapping
Status: Needs review » Active
wim leers’s picture

Title: Move fallback image to the responsive image mapping » Move fallback image style into the responsive image mapping

Fallback image style, right?

P.S.: wow, that's a huge amount of tags :D

attiks’s picture

Issue tags: -Usability, -mobile, -revisit before release candidate, -frontend performance, -media queries, -Design Initiative, -d8mux, -JavaScript

Removed some tags

wim leers’s picture

Let's get this done?

attiks’s picture

Great idea, Jelle?

jelle_s’s picture

Assigned: Unassigned » jelle_s

;-)

jelle_s’s picture

Title: Move fallback image style into the responsive image mapping » Move fallback image style into the responsive image style entity
Assigned: jelle_s » Unassigned
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new19.09 KB
wim leers’s picture

Could only find one nitpick :) Leaving at NR so others can review too.

Would be great to update the IS in two ways:

  1. Explain why this change is necessary, because it's actually a BC break
  2. A beta evaluation
+++ b/core/modules/responsive_image/src/ResponsiveImageStyleForm.php
@@ -100,6 +100,15 @@ public function form(array $form, FormStateInterface $form_state) {
+      '#title' => t('Fallback image style'),

$this->t()

Status: Needs review » Needs work

The last submitted patch, 7: 2349461-7-responsive-image-fallback.patch, failed testing.

jelle_s’s picture

Status: Needs work » Needs review
StatusFileSize
new19.87 KB

New patch. Fixes the nitpick from #8 and fixes the failing tests.

jelle_s’s picture

StatusFileSize
new1.51 KB

Forgot the interdiff.

jelle_s’s picture

Issue summary: View changes

I did my best at updating the issue summary. I'll have a look at the beta evaluation. I've never written one before so bear with me :-).

jelle_s’s picture

Issue summary: View changes

Added beta evaluation.

jelle_s’s picture

yched’s picture

Oooh, +1 !

rainbowarray’s picture

Took a quick look at the code, and it looks good. Wim gave the thumbs-up, so I think we're good on that front. I'll give it a test to make sure it works.

rainbowarray’s picture

Tested, and this works fine.

This is going to be a big time saver for people who reuse a mapping in multiple places.

rainbowarray’s picture

Status: Needs review » Reviewed & tested by the community

This looks RTBC to me. Wim gave the thumbs up on the code, and I'm verifying that this works as tested. I can select a fallback image style as I create a responsive image style. It is editable when I go back to the image style. The fallback selector does not appear on the field formatter on a content type field display tab. And the fallback image shows up properly in a picture element.

Great quick work on this!

webchick’s picture

Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs change record

Assuming the beta eval is correct, we need a change record draft for this. However, apart from a bunch of stuff in responsive_image module, I'm not seeing a huge impact on any other core modules. Did you manage to do this without breaking BC, or is it only breaking particular types of contrib modules?

rainbowarray’s picture

This would affect modules, themes or sites that are using responsive image styles, since they would define the fallback image style in the responsive image style rather than in the field formatter or through the use of the theme function.

A change record would be good in case anybody is doing that. I'm not aware of contrib modules that are implementing this right now, and it's probably doubtful that there are many themes or sites that are doing so either. This change actually makes it a lot easier for people to make use of responsive image styles, but yes, this is a change.

rainbowarray’s picture

In reviewing https://www.drupal.org/core/beta-changes, I think it's a stretch to call this a disruptive change, and I think the impact is definitely bigger than any disruption.

jelle_s’s picture

I agree with #21. At first I misread https://www.drupal.org/core/beta-changes#disruption

Introduces a BC break that will affect many contributed modules, or require some contributed modules to make non-trivial changes

as

Introduces a BC break that will affect any contributed modules, or require some contributed modules to make non-trivial changes

So if nobody objects I'd change this to non-disruptive in the IS.

Are there guidelines somewhere on how to write a change record? I haven't done it before.

wim leers’s picture

Nope, no guidelines. The guideline I use: the information that I'd personally want to be given for a change :)

rainbowarray’s picture

Here's a good write-up on how to write a change record: https://www.drupal.org/contributor-tasks/draft-change-record

rainbowarray’s picture

Issue summary: View changes

Updating the issue summary to make clear this is not disruptive.

rainbowarray’s picture

Status: Needs review » Needs work
Issue tags: +Needs reroll

Patch no longer applies. We need a reroll.

jelle_s’s picture

Status: Needs work » Needs review
StatusFileSize
new19.92 KB

Rerolled patch, I'll start writing a change record as well.

jelle_s’s picture

Change record created at https://www.drupal.org/node/2472153

jelle_s’s picture

rainbowarray’s picture

Status: Needs review » Reviewed & tested by the community

Moving this back to RTBC. Beta evaluation updated, change notice posted and patch rerolled. Should be good to go!

attiks’s picture

Code looks good, and a good looking change record

alexpott’s picture

Issue tags: +D8 upgrade path

Tagging because if we were doing beta to beta upgrades this would need a hook_update_N

rainbowarray’s picture

Issue summary: View changes
rainbowarray’s picture

Edited the beta evaluation to provide a more accurate assessment of the potential for disruption. Also edited the change notice at https://www.drupal.org/node/2472153 to provide guidance for existing sites that they will need to define a fallback style in their responsive image mappings.

rainbowarray’s picture

Issue summary: View changes
rainbowarray’s picture

Issue summary: View changes
jelle_s’s picture

RE #32: Not sure an update hook is possible here:

Field instance A can use responsive image style 1 with fallback image style "large".
Field instance B can use responsive image style 1 with fallback image style "medium".

Now that the fallback image style is moved from field instance to responsive image style, how would we update in that case? (See "Disruption" in the Beta phase evaluation as it is explained very well there)

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

This is a followup of the critical #2260061: Responsive image module does not support sizes/picture polyfill 2.2 and it improves the UX of configuring responsive images. Considering that responsive_image is not enabled in standard I think the disruption will be minimal. Because the UX improvement outweighs the disruption - you only have to configure fallback once per responsive image mapping rather than on every field formatter - I think this is acceptable for beta. Committed 7388924 and pushed to 8.0.x. Thanks!

Thank you for adding the detailed beta evaluation to the issue summary.

  • alexpott committed 7388924 on 8.0.x
    Issue #2349461 by Jelle_S, mdrummond, attiks, Wim Leers: Move fallback...
jelle_s’s picture

Woohoo! Thank alex! And thanks everyone for the hard work and feedback!

amateescu’s picture

I'm writing beta9 to beta10 upgrade path functions in the HEAD to HEAD module and I was thinking if at least a minimal implementation would be enough for this issue.

Considering the scenario from #37, how about updating the responsive image style config entity to use the first fallback image style encountered (i.e. of the first field instance), and, in case the following field instances are configured with a different fallback image style just have the update function output a warning message to let the user know that manual intervention is required?

Or is that still too much trouble for no real gain? :)

attiks’s picture

I think a warning will suffice

rainbowarray’s picture

@amateescu Sounds like a good plan. Thanks for working on that!

amateescu’s picture

Ok, here it is: #2479801: Upgrade path for #2349461 (move fallback image style configuration). I haven't tested it yet so I'd appreciate a quick look at the patch if anyone has some time for that :)

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.