There seems to be a compatibility problem with the default definition of breakpoints and the Responsive Image module. When browser shown responsive images, they do not appear as defined.

We have seen that the problem is due to the way that the picture element is constructed. You can see the cause described on the involved function template_preprocess_responsive_image

// Retrieve all breakpoints and multipliers and reverse order of breakpoints.
// By default, breakpoints are ordered from smallest weight to largest:
// the smallest weight is expected to have the smallest breakpoint width,
// while the largest weight is expected to have the largest breakpoint
// width. For responsive images, we need largest breakpoint widths first, so
// we need to reverse the order of these breakpoints.

Probably would reconsider the comment was made on this issue Add Breakpoints module support. It seems that Drupal or at least his Responsive Image module is not prepared to deal with the definition of breakpoints as it does currently the Bootstrap theme.

CommentFileSizeAuthor
#7 2857335-7.patch1.45 KBmarkhalliwell
#5 2857335.patch980 bytesfrancescbassas
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

francescbassas created an issue. See original summary.

esteinborn’s picture

I've noted that the bootstrap.breakpoints.yml file included with Bootstrap theme are not weighted, and therefore provide no order of execution for the Responsive Images module in Core.

To fix this, you need to add weight in ascending order for those breakpoints ex:

bootstrap.screen-xs-max:
  label: screen-xs-max
  mediaQuery: 'all and (max-width: 767px)'
  weight: 0
  multipliers:
    - 1x
bootstrap.screen-sm-min:
  label: screen-sm-min
  mediaQuery: 'all and (min-width: 768px)'
  weight: 1
  multipliers:
    - 1x
bootstrap.screen-sm-max:
  label: screen-sm-max
  mediaQuery: 'all and (max-width: 991px)'
  weight: 2
  multipliers:
    - 1x
bootstrap.screen-md-min:
  label: screen-md-min
  mediaQuery: 'all and (min-width: 992px)'
  weight: 3
  multipliers:
    - 1x
bootstrap.screen-md-max:
  label: screen-md-max
  mediaQuery: 'all and (max-width: 1199px)'
  weight: 4
  multipliers:
    - 1x
bootstrap.screen-lg-min:
  label: screen-lg-min
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 5
  multipliers:
    - 1x
francescbassas’s picture

Makes sense. It seems but that is still this way. Should your change considered as patch?

esteinborn’s picture

I'd recommend a patch. I currently can't create one from this machine.

francescbassas’s picture

FileSize
980 bytes

Does this serve?

dbjpanda’s picture

Status: Active » Needs work

#5 patch does not work for me. Seems like nothing changed or happened even after applying the patch.

markhalliwell’s picture

Version: 8.x-3.2 » 8.x-3.x-dev
Status: Needs work » Fixed
FileSize
1.45 KB

I actually ran into this recently as well. It's also missing the 2x multiplier.

  • markcarver committed 4294e4a on 8.x-3.x
    Issue #2857335 by markcarver, francescbassas, esteinborn: Breakpoints...

Status: Fixed » Closed (fixed)

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