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.

Members fund testing for the Drupal project. Drupal Association Learn more

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
markcarver’s picture

Status: Active » Closed (works as designed)