2

On the block layout page, I added the "Site Branding" block twice, once for normal use (all nodes except content type landing page) and once for landing page use (all nodes of content type landing page).

I themed the block using the twig template block--system-branding-block.html.twig, but this modifies both blocks.

Is there a way to get more specific and create a twig template for each block, or should I re-create the landing page block some other way so that I can use a different template?

EDIT: My goal is to actually change the HTML of the block, so I can't use a pure CSS approach.

2 Answers 2

3

There's a few things you can do. Here's three.

  1. Consider using a pure CSS approach. If you look at the body element for your page there may well be different classes you can use to make different selectors for styling the block. Modern CSS, particularly with the availability of :before and :after pseudo selectors, is incredibly powerful and you very often don't need custom HTML to adjust styling for different cases.

  2. You can also implement hook_theme_suggestions_alter in your theme (in the file mytheme.theme) to supply alternative template suggestions based on the current path, for example.

Following this example, your code might look like:

function THEME_NAME_theme_suggestions_block_alter(array &$suggestions, array $variables) {
  $current_path = \Drupal::service('path.current')->getPath();
  $result = \Drupal::service('path.alias_manager')->getAliasByPath($current_path);

  $path_alias = trim($result, '/');
  $path_alias = str_replace('/', '-', $path_alias);
  $path_alias = str_replace('-', '_', $path_alias);
  $id = $variables['id'];

  $suggestions[] = 'block__path_alias__'.$path_alias;
  $suggestions[] = 'block__' . $id . '__path_alias__'.$path_alias;
}
  1. Another option would be to create a second variant of the site branding block then use the option in Drupal's block system which lets you turn blocks on or off by content type.
4
  • I'm actually changing the HTML in the block (hard-coding a couple links) so I can't go with a pure CSS approach. Commented Aug 10, 2018 at 13:04
  • @PatrickKenny I have added some (untested) sample code for you. Commented Aug 10, 2018 at 14:27
  • As you want this to vary by content type, as long as there's a common path alias structure you should be able to grab the common part from the alias and use that in the suggestion. Commented Aug 10, 2018 at 15:36
  • @PatrickKenny another possible solution occurred to me, so have added that to my answer as well. Commented Aug 11, 2018 at 17:58
1

Try this module Block Content Machine Name

Will provide additional template suggestion like block--block-content--[MACHINE_NAME].html.twig.

2
  • This works for block content (custom blocks made at /admin/structure/block/block-content), but does it work for system blocks (site branding)? Commented Aug 10, 2018 at 15:23
  • Yes, this module works also with system blocks for example machine name of site branding block is sitebranding . you can see it from admin/structure/block/manage/sitebranding .
    – berramou
    Commented Aug 10, 2018 at 15:27

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.