6

How can I override container.html.twig for one submit button only?

It showing no template suggestions.Here is my template sugestions

3 Answers 3

5

Based somewhat on kiemi's answer, you could go for something to this degree:

<?php

/**
 * Implements hook_theme_suggestions_container_alter().
 */
function yourtheme_theme_suggestions_container_alter(array &$suggestions, array $variables) {
  $pieces = [
    $variables['element']['#type'],
    $variables['element']['#name'],
    $variables['element']['#display_id'],
  ];
  $suggestions[] = 'container__' . implode('_', $pieces);
}

This will produce a suggestion, for example, of container--view-articles-featured.html.twig

Of course, if you want it to follow true Drupal template suggestion standards, you'll want to add several suggestions with varying levels of specificity.

1
  • Only $variables['element']['#type'] has a value for me (user.pass form) Mar 11, 2020 at 16:02
3

The Template Suggest module now includes container template suggestions. An example of what it will provide for a view:

 FILE NAME SUGGESTIONS:
   * container--view--case-study--page-listing.html.twig
   * container--view--case-study.html.twig
   x container--view.html.twig
   * container--no-parent.html.twig
   * container.html.twig

For the original post use case of a submit button, here is what a typical container around a submit button will provide:

 FILE NAME SUGGESTIONS:
   * container--actions.html.twig
   * container--has-parent.html.twig
   x container.html.twig

So it makes it easy to target all actions-containing containers, which include submit buttons, with a container--actions.html.twig template. (Or all form containers with container--has-parent.html.twig.)

If the goal though is truly to target a container for one particular submit button and not other submit buttons, that's getting a good deal harder. The problem is even the ID of the form isn't any more precise than the template suggestions the module gives us (for example, this core form has edit-actions as its ID, and a webform which gets the suggestion container--webform-actions.html.twig simply gets the ID edit-actions!)

One approach would be to override container--actions.html.twig to remove the div etc. and try to reproduce them as needed in the input--submit.html.twig template (a suggestion which core provides). But that's risky because a container can have more than one input button.

Because the information in these buttons themselves are not naturally unique (for example, ID of edit-submit on core admin forms and edit-actions-submit on webforms), i'll hold off on further digging up possible template suggestions or approaches until the original poster (or other interested parties!) can clarify precisely their intention.

Here's the code the module uses, originally based on Kevin's answer on the related post:

function twigsuggest_theme_suggestions_container_alter(array &$suggestions, array $variables) 
{
  $element = $variables['element'];

  // We cannot count on template_preprocess_container having run, so we copy
  // its logic here to provide templates for forms (has parents) or not forms.
  // Special handling for form elements.
  if (isset($element['#array_parents'])) {
    $suggestions[] = 'container__has_parent';
  }
  else {
    $suggestions[] = 'container__no_parent';
  }

  if (isset($element['#type']) && $element['#type'] != 'container') {
    $suggestions[] = 'container__' . $element['#type'];
  }

  if (isset($element['#type']) && $element['#type'] == 'container' && isset($element['children']['#type'])) {
    $suggestions[] = 'container__' . $element['children']['#type'];
  }
}
3
  • 1
    Do you also have an example of what it will provide for submit buttons? As that's what OP asked for...
    – leymannx
    Nov 20, 2018 at 15:50
  • Apologies for my reading comprehension. I'll update the answer, and it might get halfway there.
    – mlncn
    Nov 20, 2018 at 16:19
  • Updated, sorry i'd jumped on the 'no template suggestions' and not the 'one submit button only' line. My answer covers submit buttons as a general case (to the exclusion of other things that get put in containers) but if it's really just for one submit button and not others we'd need to know how the OP wants to distinguish it— by form ID, by button vs input element, etc. to know if it's even possible.
    – mlncn
    Nov 20, 2018 at 16:42
1
function MYTHEME_theme_suggestions_container_alter(array &$suggestions, array $variables) {
  $suggestions[] = 'container__';
}

You can put something like this in your theme. I'm trying to do the same thing, but I only dont know how to get the variables...

1
  • The $variables are passed into the function. Use a debugger to inspect it.
    – Kevin
    Jun 25, 2018 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.