If you happen to use responsive image module in Drupal 8, and you want to use a custom breakpoint group in the responsive image style you’ve created, then you can do this by creating a custom breakpoint config file.

Custom Breakpoint Group

In Drupal 8, there is no longer an interface where you can add breakpoints. Breakpoints are now set in a config file, within a module or theme. In this case, we will be creating the custom breakpoint group inside the enabled theme of your Drupal 8 site.

What you need to do first is to create a config file inside your enabled theme called themename.breakpoints.yml, where themename is the name of your current theme enabled.

Before we define our custom breakpoints, it is important to understand what we need to set up in the config file:

  • themename.identityname - This is the breakpoint machine name format you will need to assign for each breakpoint entry
  • label - This is  the human-readable label for the breakpoint
  • mediaQuery - This is where we put the actual media queries
  • weight - This is the positional order for the breakpoint. Keep in mind that the smallest width should have the lowest weight, while the largest width should have a larger weight value. 
  • multipliers - This is the pixel resolution multiplier that you want to be supported

Now, let’s say you want to implement these following media query:

    @media only screen and (min-width : 320px)

    @media only screen and (min-width : 480px)

    @media only screen and (min-width : 768px)

    @media only screen and (min-width : 992px)

    @media only screen and (min-width : 1200px)

In the themname.breakpoints.yml config file, we will be writing these as:

themename.mobileretina:
  label: mobile retina
  mediaQuery: 'only screen and (min-width: 320px)'
  weight: 0
  multipliers:
    - 1x
themename.mobile:
  label: mobile
  mediaQuery: 'only screen and (min-width: 480px)'
  weight: 1
  multipliers:
    - 1x
themename.tablet:
  label: tablet
  mediaQuery: 'only screen and (min-width: 768px)'
  weight: 2
  multipliers:
    - 1x
themename.desktop:
  label: desktop
  mediaQuery: 'only screen and (min-width: 992px)'
  weight: 3
  multipliers:
    - 1x
themename.wide:
  label: wide
  mediaQuery: 'only screen and (min-width: 1200px)'
  weight: 4
  multipliers:
    - 1x

After creating the config file for your custom breakpoint group, rebuild your cache and you should be able to see your custom breakpoint group when you add or edit a responsive image style.
 


Was this helpful? Share this content, and you might be able to help others