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?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

RKopacz created an issue. See original summary.

Jeff Burnz’s picture

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

Jeff Burnz’s picture

Category: Support request » Feature request

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

wellme’s picture

Status: Active » Needs work
RKopacz’s picture

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

Jeff Burnz’s picture

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

Jeff Burnz’s picture

Title: Can't insert a div wrapper into page.html.twig » Can't insert a div wrapper into page.html.twig - replace row generation with a row.html-twig template
Assigned: Unassigned » Jeff Burnz
Category: Feature request » Task

I 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:

{{ attach_library('theme_name/theme_name.layout.page') }}
<div{{ attributes }}>
  {{ rows }}
  {{ attribution }}
</div>

Row template:

<div{{ wrapper_attributes }}>
  <div{{ container_attributes }}>
    {{ regions }}
  </div>
</div>

Template suggestions for rows - example here is for row main and we're looking at the front page:

<!-- FILE NAME SUGGESTIONS:
   x row--main--front.html.twig
   * row--main--node-article.html.twig
   * row--main.html.twig
   * row.html.twig
-->

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) {...}

Jeff Burnz’s picture

Note 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

<div{{ wrapper_attributes }}>
  <div{{ container_attributes }}>
    <div class="subfeatures-inner-wrapper flex-container">
      {{ regions }}
    </div>
  </div>
</div>

Otherwise declare it in your CSS:

.subfeatures-inner-wrapper {
  display: flex;
}

  • Jeff Burnz committed b7fa598 on 8.x-1.x
    Issue #2784369 by RKopacz: Can't insert a div wrapper into page.html....
RKopacz’s picture

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

Jeff Burnz’s picture

when I set up the subtheme do I choose between site builder and flex builder?

You can't. It has to be done in code.

Jeff Burnz’s picture

Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

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