2

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

It showing no template suggestions.Here is my template sugestions

2

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

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

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'];
  }
}
  • 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 '18 at 15:50
  • Apologies for my reading comprehension. I'll update the answer, and it might get halfway there. – mlncn Nov 20 '18 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 '18 at 16:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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