Problem / Motivation

I have page-title.html.twig template in my theme D8 and is not been showing the {{ title }}. However is been displaying all wrappers around the title.

Here is my page-title.html.twig.
page-title.html.twig

{{ title_prefix }}
{% if title %}
<div class="sixteen floated page-title">
    <h2 class="title_page" {{ title_attributes }}>{{ title }}</h2>
</div>
{% endif %}
{{ title_suffix }}

Here is the output of this template page-title.html.twig.

<div class="sixteen floated page-title">
    <h2 class="title_page"></h2>
</div>

Why this is a problem ?

Because this is rendering unnecessary HTML and classes. This can affect the output of the page.

Solution

We should make sure that if we exclude the title, anything from page-title.html.twig should be remove.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

darol100 created an issue. See original summary.

id.tarzanych’s picture

I do agree with you.

Your suggestion is good, but I'd like to handle that with preprocesses, because we should be very careful with overriding system templates. This can make impossible to use some themes. I'll check what can we do with that

vaccinemedia’s picture

I have noticed that the entire page title block is still being shown. Here is an example of the code output on a node which has the title hidden:

<div id="block-mcr-central-page-title" class="contextual-region block block--core block--page-title-block">
    <div data-contextual-id="block:block=mcr_central_page_title:langcode=en" class="contextual" role="form"><button class="trigger visually-hidden focusable" type="button" aria-pressed="false">Open  configuration options</button><ul class="contextual-links" hidden=""><li class="block-configure"><a href="/admin/structure/block/manage/mcr_central_page_title?destination=node/3">Configure block</a></li></ul></div>
      <div class="block__content">
  <h1 class="js-quickedit-page-title page-title"></h1>
    </div>
  </div>

Quite a lot of code there for something which shouldn't be there at all ;)

rroose’s picture

Even though the node title is excluded the H1 tag is still rendered which could lead to complications concerning SEO. Any chance this will be fixed on a short term?

smaz’s picture

This is possibly quite a tricky one, because the page title is a block that can be placed in any region.

If you need a quick fix, I've done the following. This preprocesses the page title block, gets the current node, checks if it has the title excluded & if so, sets #access to FALSE on the render array for the block, so that it isn't displayed.

I did try setting $build to be an empty array, but that caused PHP warnings with other modules expecting certain keys to be there.

https://api.drupal.org/api/drupal/core%21modules%21block%21block.api.php...


/**
 * Implements hook_block_view_BASE_BLOCK_ID_alter().
 */
function HOOK_block_view_page_title_block_alter(array &$build, \Drupal\Core\Block\BlockPluginInterface $block) {
  // Get current node.
  $node = Drupal::routeMatch()->getParameter('node');
  if (!$node) {
    return;
  }
  // Check if the title for this node has been excluded from display.
  $exclude_manager = \Drupal::service('exclude_node_title.manager');
  if ($exclude_manager->isNodeExcluded($node)) {
    $build['#access'] = FALSE;
  }
}

Another option in the page-title.html.twig - use the render twig filter, because there's an issue with just checking variables: https://www.drupal.org/node/953034
This renders the title & the if statement is then checking against the result, rather than checking title isn't empty (which it may not be, if it's a render array).

{{ title_prefix }}
{% if title | render %}
<div class="sixteen floated page-title">
    <h2 class="title_page" {{ title_attributes }}>{{ title }}</h2>
</div>
{% endif %}
{{ title_suffix }}
TJM’s picture

Hi, After checking the box to remove title, the title text is removed. However, there is some blank space on the screen, because of the empty
tags. See the following html code where the title text has been removed.

I don't know what is the best thing to do to remove the empty
tag. My front page slider does not need a
title or an empty
title space.

Thanks... Ted

nedjo’s picture

@smaz: thanks for sharing your solution.

I opened a related issue, #2831911: Add a class to pages with excluded node title that wouldn't solve this bug but would provide a class to work with in a custom theme.

mlncn made their first commit to this issue’s fork.

mlncn’s picture

Status: Active » Needs work

I feel strongly smaz' approach to hiding the whole title block should be an option in the module itself, so i have a draft merge request that adds it.

If you want title blocks to entirely go away for full page nodes with excluded node title set, then this is the patch (or issue fork) for you.

If you don't want that, well, that's why this is a draft until a UI toggle and config are added!

mlncn’s picture

Welp, there hasn't been a lot of interest in this over the years, it seems.

It should be possible to do this same thing without adding anything to Exclude Node Title, and without any custom code, by configuring Entity Field Condition on the page title block to not show for any content types you enable Exclude Node Title on. Using this module:

https://www.drupal.org/project/entity_field_condition

Of course, at that point, you can replace Exclude Node Title with a boolean field and be done with it.