Problem/Motivation

Currently the subtheme's breakpoints.yml file has "screen" as the name of the group the breakpoints belong to. This can be a little confusing as groups are usually provided by themes. For example, see the screenshot for how the Responsive Image config screen lists them.

Steps to reproduce

Install theme, create subtheme, enable Responsive image module and review the list of breakpoint groups in the dropdown.

Proposed resolution

Use the subtheme name as the default breakpoint group name.

Additional breakpoint groups can be added manually.

Remaining tasks

Is it is simple as changing the "group" from screen to SUBTHEME in the yml file? I can provide a patch.

User interface changes

The sub theme's breakpoint group would now be the name of the theme.

API changes

It shouldn't affect any existing subthemes, only new ones.

Data model changes

CommentFileSizeAuthor
#3 use_subtheme_name_as_breakpoint_group-3209637-3.patch1.61 KBimclean
#2 p.patch1.61 KBimclean
bs4 breakpoint group.png8.51 KBimclean

Comments

imclean created an issue. See original summary.

imclean’s picture

imclean commented
Status: Active » Needs review
StatusFileSize
new p.patch1.61 KB
imclean’s picture

imclean commented
StatusFileSize
new use_subtheme_name_as_breakpoint_group-3209637-3.patch1.61 KB

Fix patch name for clarity.

imclean’s picture

imclean commented

The bootstrap4 theme also uses the breakpoint group "screen" so only one group shows. Perhaps the BS4 breakpoint group should be changed to "Boostrap 4".

  • VladimirAus committed 5858646 on 2.1.x authored by imclean 
    Issue #3209637 by imclean, VladimirAus: Use subtheme name as breakpoint...
vladimiraus’s picture

vladimiraus
Primary language English
Location Brisbane 🇦🇺
commented
Status: Needs review » Reviewed & tested by the community

Thanks for the patch.

According to official documentation https://www.drupal.org/docs/theming-drupal/working-with-breakpoints-in-d...
it needs to be called group: yourtheme.group1 so I will update accordingly.

I also setup similar task for bootstrap5 theme: https://www.drupal.org/project/bootstrap5/issues/3210540

vladimiraus’s picture

vladimiraus
Primary language English
Location Brisbane 🇦🇺
commented
Status: Reviewed & tested by the community » Fixed
dadderley’s picture

dadderley commented

I updated the theme on one of my sites from Bootstrap4 2.1.6 to Bootstrap4 2.1.7.
I use a child theme based on Bootstrap4 2.1.4

As soon as I did the update, the site stopped generating responsive images.

I originally set up the responsive image styles using the Breakpoint group 'screen'.
After doing the update I noticed there is a new Breakpoint group called 'bootstrap4.screen'.

On the Responsive Image screen I changed the Breakpoint group from 'screen' to 'bootstrap4.screen' and it all works.

The group name in the 'bootstrap4.breakpoints.yml' was 'screen'
The group name in the 'mytheme_name.breakpoints.yml' was also 'screen'
I should have spotted that earlier.

I have changed the group name in my child theme's 'mytheme_name.breakpoints.yml' file to 'mytheme_namescreen' so it's all good now.

mytheme_name.screen.xs-max:
  label: xs-max
  mediaQuery: '(max-width: 575.98px)'
  weight: 1
  group: mytheme_name.screen
  multipliers:
    - 1x
    - 2x

I understand the issue and why the changes were made to the theme breakpoint functionality.
But when updating the theme killed my site, it did cause much consternation.

vladimiraus’s picture

vladimiraus
Primary language English
Location Brisbane 🇦🇺
commented

Thanks @dadderley.

I added breaking changes note: https://www.drupal.org/project/bootstrap4/releases/2.1.7

dadderley’s picture

dadderley commented

@ VladimirAus

Thanks for your work on this theme.
I really like using it as a base theme. I am using it in 4 projects.

Status: Fixed » Closed (fixed)

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