Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I am trying to inject a div wrapper around the subfeatures regions in the page.html.twig template, which is located in the templates/generated directory of my subtheme:
{% if subfeatures.has_regions == true %}
<div{{ subfeatures.wrapper_attributes }}>
<div{{ subfeatures.container_attributes }}>
<div class="subfeatures-inner-wrapper">
{{ page.subfeatures_first }}
{{ page.subfeatures_second }}
{{ page.subfeatures_third }}
{{ page.subfeatures_fourth }}
</div>
</div>
</div>
{% endif %}
Not only does it not take, but the entire region vanishes. Not sure if this has to do with the Twig templating system in general or is specific to Adaptivetheme, but I thought I'd start here. It seems as though the problem starts with the fact that the template is generated. Any thoughts on how to do this?
Comment | File | Size | Author |
---|---|---|---|
#5 | About Wildlife Preserves Wildlife Preserves.png | 2.65 KB | RKopacz |
Comments
Comment #2
Jeff Burnz CreditAttribution: Jeff Burnz commentedYou can't do it and regenerate the layout using the theme settings. This is how the theme works (it's nothing to do with Drupal or twig etc).
Why do you need this wrapper? It can be done with JavaScript, but first it would be good to know why you need it, perhaps there is another solution.
Comment #3
Jeff Burnz CreditAttribution: Jeff Burnz commentedThere is potentially a way to fix this issue - introduce a "row" template. Then page.html.twig is vastly simplified to calls to that template for each row. Row templates would have suggestions, and you could add the internal wrappers in a row template suggestion.
This is something I thought about a long time ago, but never implemented. I think I'll give it a crack today and test drive it, it would very much simplify page generation but requires quite a lot of changes and they must be backwards compatible. Hmmm....
I'll change this to a feature request and see how far we get.
Comment #4
wellme CreditAttribution: wellme at Zyxware Technologies commentedComment #5
RKopacz CreditAttribution: RKopacz as a volunteer commented@Jeff Burnz thanks for the reply. I suspected that the 'generated' nature of this template is why I couldn't do it.
I am attaching a small screenshot to show what I am trying to do. the upper part of the screenshot is sidebar second. The lower part of the screenshot is the subfeatures container. You see that I am getting padding between the edge of the screen in mobile and the background styles on sidebar second, which is the desired effect. But on subfeatures, the background is out to the edge.
An inner wrapper to which I could apply the background styles I suspect would solve the problem. It did for certain views pages where I was having a similar issue.
EDIT: Yes, a row template is an interesting idea. I'd e happy to test it for you, the site I am working on would be a good testing place.
Comment #6
Jeff Burnz CreditAttribution: Jeff Burnz commented@RKopacz I can't tell by a screenshot sorry, since I don't know whats been added to the CSS, however an issue like that is solvable with CSS.
I''ve made great progress in the row template idea, I have it all working (with suggestions etc), I've got a bit more to do on it then it should be good to go.
Comment #7
Jeff Burnz CreditAttribution: Jeff Burnz commentedI have this working, I want to go for it and just commit it. It's a massive improvement and backwards compatible. The old page.html.twig will continue to work, and the next time the layout is saved the new template/s will generate and the row.html.twig template will kick in.
New page templates will look like this:
Row template:
Template suggestions for rows - example here is for row main and we're looking at the front page:
Ideas for useful default template suggestions are welcome, and you can always add more e.g. :
function ThemeName_theme_suggestions_row_alter(array &$suggestions, array $variables) {...}
Comment #8
Jeff Burnz CreditAttribution: Jeff Burnz commentedNote that because the latest version of AT uses flex layout by default, adding an internal wrapper around the
{{ regions }}
variable in the row template will break the layout of columns.This is because
display: flex;
does to recurse down the tree, it only applies to direct child elements.Therefor it is necessary to declare
display: flex
on the new internal wrapper.I have created a useful class for new themes, but you will need to do this for existing sub-themes yourself if you choose to switch to the new flex-builder layout system, if you're using the site-builder layout (uses floats) there are no issues.
The new class is:
flex-container
Template suggestion example:
row--subfeatures.html.twig
Otherwise declare it in your CSS:
Comment #10
RKopacz CreditAttribution: RKopacz as a volunteer commented@Jeff Burnz This is truly excellent. I will test it out today. I'm on 8.x-1.0-rc2+24-dev at the moment. Just one question, where when I set up the subtheme do I choose between site builder and flex builder? I do not recall that option, although I have no doubt that it's in there somewhere.
Comment #11
Jeff Burnz CreditAttribution: Jeff Burnz commentedYou can't. It has to be done in code.
Comment #12
Jeff Burnz CreditAttribution: Jeff Burnz commented