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.
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