Hello,

how to use responsive images with bootstrap ?

In my sub-theme I created a file bootstrap_subtheme_front_office.breakpoints.yml here is its contents :

bootstrap_subtheme_front_office.screen-xs-max:
  label: screen-xs-max
  mediaQuery: 'all and (max-width: 767px)'
  weight: 1
  multipliers:
    - 1x
bootstrap_subtheme_front_office.screen-sm-min:
  label: screen-sm-min
  mediaQuery: 'all and (min-width: 768px)'
  weight: 1
  multipliers:
    - 1x
bootstrap_subtheme_front_office.screen-sm-max:
  label: screen-sm-max
  mediaQuery: 'all and (max-width: 991px)'
  weight: 1
  multipliers:
    - 1x
bootstrap_subtheme_front_office.screen-md-min:
  label: screen-md-min
  mediaQuery: 'all and (min-width: 992px)'
  weight: 1
  multipliers:
    - 1x
bootstrap_subtheme_front_office.screen-md-max:
  label: screen-md-max
  mediaQuery: 'all and (max-width: 1199px)'
  weight: 1
  multipliers:
    - 1x
bootstrap_subtheme_front_office.screen-lg-min:
  label: screen-lg-min
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 1
  multipliers:
    - 1x

On drupal in "Image Styles", I created several image styles.

In "Responsive image styles", I created a new style.

I applied "Responsive image styles" to a view.

My problem :
When I reduce my window, the picture style does not change.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

zenimagine created an issue. See original summary.

zenimagine’s picture

zenimagine’s picture

I managed to make it work with :

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

Status: Active » Closed (works as designed)
rodtatham’s picture

#3 worked for me, but I think

mediaQuery: 'all and and (min-width: 992px) and (max-width: 1199px)'

should be:

mediaQuery: 'all and (min-width: 992px) and (max-width: 1199px)'

Thanks so much!