2

Is there a way to override the default page-title template using the theme suggestion. Like we can override node for article type as below,

For all nodes: node.html.twig

For nodes of article type: node--article.html.twig

same way,

for all page title: page-title.html.twig

for page title on article content type: ???

I tried many things like page-title--article.twig, field--page-title--article.html.twig, field--bartik-page-title--article.html.twig, node--article--page-title.html.twig etc.. these are not working. OR it is not possibel to do this with page-title file?

1

The page-title template is not aware about the context where it is placed and so there is no straightforward solution for a theme hook suggestion on the content type.

But you can override the field template, which is placed inside of page-title. This would be the twig name for the content type article:

field--node--title--article.html.twig

And this is the field--node--title.html.twig from core theme stable:

{#
/**
 * @file
 * Theme override for the node title field.
 *
 * This is an override of field.html.twig for the node title field. See that
 * template for documentation about its details and overrides.
 *
 * Available variables:
 * - attributes: HTML attributes for the containing span element.
 * - items: List of all the field items. Each item contains:
 *   - attributes: List of HTML attributes for each item.
 *   - content: The field item content.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 * @see field.html.twig
 */
#}
<span{{ attributes }}>
  {%- for item in items -%}
    {{ item.content }}
  {%- endfor -%}
</span>

I would use this field twig to start with, because this is not so cluttered as the standard field template.

  • Thanks for answer, this thing is working and I get your logic to get it done using the field. But still I have question why we can not get it done using page-title.html.twig. If you see the bartik theme templates folder and this link, on this link all teh available templates and their theme suggestions are mentioned EXCEPT page-title.html.twig. Is this template file a special case?, or just it is a just a customization to get thing done? Thanks – CodeNext Oct 28 '16 at 8:31
  • 2
    This is not a special case. There are a lot of the smaller templates, that have little or no context information at all. Put a hook_theme_suggestions_alter() in mytheme.theme and look what variables are provided for the different theme hooks. This is the information you have available to build your own suggestions. – 4k4 Oct 28 '16 at 9:23
  • A template can pull additional data from an outside context, when it adds the correct cache metadata as well. But be careful, templates have not too much context for a reason, it's cache efficiency. – 4k4 Jul 8 at 7:04
4

You can do this by adding your own suggestion. In your theme's ThemeName.theme file add a hook_theme_suggestions_HOOK_alter() for the page title:

// Add content type suggestions, e.g. page--node--article.html.twig.
function ThemeName_theme_suggestions_page_title_alter(array &$suggestions, array $variables) {
  // Are we looking at a node?
  $node = \Drupal::routeMatch()->getParameter('node');
  // Object check required, sometimes it's a string, yes, really. Who knew?
  if (!empty($node) && is_object($node)) {
    array_splice($suggestions, 1, 0, 'page_title__' . $node->getType());
  }
}

Then create templates per node type, e.g. page-title--article.html.twig, page-title--custom-content-type.html.twig etc.

Edit: rather than the array_splice you can just push suggestions onto the array, e.g.:

  if (!empty($node) && is_object($node)) {
    $suggestions[] = 'page_title__node';
    $suggestions[] = 'page_title__node_' . $node->getType();
  }

array_splice() is just a trick I commonly use to position suggestions in the $suggestions array so I can control when they are picked up and used.

  • This is the thing I was looking for...!!!!! I was expecting, like all other templates(page.html.twig) this kind of suggestion alternating feature we can do with page-title.html.twig. So this is the code for that...Hmmm. It will take sometime me to grasp this code, but this is the answer...Thanks. I would have accepted this as an answer if this would have appeared first as THIS is the thing I was looking for, but I have already awarded somebody, so it is not a good thing to change, So definitely up-vote. Although I will check the rules of DA for this. Very very thanks for answer. – CodeNext Nov 1 '16 at 13:43
  • 1
    Sure, I think they're both valid answers, but this is more correct to the original question. 4k4's answer is good if someone doesn't want to mess around with PHP/adding functions etc. 4k4 is also right that many templates have very little context, and thats OK, instead we just add it ourselves when and where required, this is the greatness of Drupal IMHO. – Jeff Burnz Nov 3 '16 at 9:22
  • Hi Jeff, I was just trying to understand your second method, I just have one question, instead of $suggestions[] = 'page_title__node_' . $node->getType(); will it not be $suggestions[] = 'page_title__' . $node->getType();? I may be wrong, so need guidance on that, Why this question arises, because if it is first case then the suggestion will be page-title--node-article.html.twig while we want page-title--article.html.twig, this is just my logic, may be wrong, so just wan to know what is right, Very Thanks. – CodeNext Nov 29 '16 at 7:00
  • @CodeNext you can put whatever you want, it makes no different to Drupal. Use whatever suits your naming conventions. – Jeff Burnz Dec 9 '16 at 3:11
0

I was struggling with this because for the theme suggestions alter hook for page title, there is jack for data in the $variables array, so it's near impossible to come up with any useful logic to create suggestions. You can load the current node and use that data to come up with suggestions, but not much else.

In my case I needed to come up with suggestions based on which block was rendering the page title template. In order to do this, I made use of drupal_static.

/**
 * Implements hook_preprocess_HOOK() for Block document templates.
 */
function bax_commercial_theme_preprocess_block(array &$variables) {
  $current_rendered_block = &drupal_static(__FUNCTION__);
  $current_rendered_block = $variables['elements']['#id'];
}

/**
 * Implements hook_preprocess_page_title().
 */
function bax_commercial_theme_theme_suggestions_page_title_alter(array &$suggestions, array $variables) {
  $current_rendered_block = &drupal_static('bax_commercial_theme_preprocess_block');
  if (isset($current_rendered_block)) {
    $suggestions[] = 'page_title__block__' . $current_rendered_block;
  }
}

Because of the render order, this is valid and works well for me. It may or may not work for everyone.

-1

Yes. Turn on Twig debugging and view source.

It'll give the name of template suggestion to use.

Twig templates go down to the field level.

  • I think, you did not get my question or I may failed to represented proper. I know which template is as mentioned in question it is page-title.html.twig, and I can make changes there, that all I know. But, if you may be familiar with the way to override the entire template using the name convention of twig file itself, for that I have provided example in the my question with node.html.twig. – CodeNext Oct 28 '16 at 4: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.