I'd like to add a class of 'svg' to my site_logo img itself using template preprocess. Here's what I have written:

 function mythemename_preprocess_block__system_branding_block(&$variables) {
      $variables['elements']['content']['site_logo']['attributes']['class'][] = 'svg';

The kint($variables) readout for where I'd expect my class to be shows DEPTH TOO GREAT. See: enter image description here

I've seen some documentation saying it has to do with Kint's depth limit, which doesn't seem right as the preprocess isn't very complex. It suggested using +Kint::dump();, which I tried and can't seem to get working. +Kint::dump($variables) didn't work.

2 Answers 2


You don't need to dig into $variables['element']. In a block preprocess function, the content of the block is available in $variables['content'], so you could use the following code.

$variables['content']['site_logo']['#attributes']['class'][] = 'svg';


Altough this is generally valid for blocks, it doesn't work for the system branding block. The branding block overrides the block template with block--system-branding-block.html.twig, where the output of {{ content }} is removed, which breaks the normal rendering of the block. Instead the template contains the html markup for the <img> tag directly:

{% extends "block.html.twig" %}
 * @file
 * Theme override for a branding block.
 * Each branding element variable (logo, name, slogan) is only available if
 * enabled in the block configuration.
 * Available variables:
 * - site_logo: Logo for site as defined in Appearance or theme settings.
 * - site_name: Name for site as defined in Site information settings.
 * - site_slogan: Slogan for site as defined in Site information settings.
{% block content %}
  {% if site_logo %}
    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
      <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
  {% endif %}
  {% if site_name %}
    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
  {% endif %}
  {{ site_slogan }}
{% endblock %}

To reinstate the correct behavior you could override block--system-branding-block.html.twig in your theme and replace the <img> markup with the render array:

{{ content.site_logo }}

Then the changes made in preprocess are effective again.

Or simply go along with the template as it is now and add the attributes to the html markup of the template.

  • Thanks. I tried, and the class appears properly in my kint($variables) readout, but doesn't appear in the actual markup. $variables['content']['site_logo']['#attributes']['class'][] = 'svg'; Commented Jun 26, 2016 at 2:12
  • I checked how this block is processed and to my surprise this is done quite unusual with the result that all changes in preprocess are ignored. I put this in the answer.
    – 4uk4
    Commented Jun 26, 2016 at 11:24

Another possibility:

 function mythemename_preprocess_block__system_branding_block(&$variables) {
    $variables['logo_class'] = 'svg';

... and in the Twig template:

<img src="{{ site_logo }}" class="{{ logo_class }} alt="{{ 'Home'|t }}" />

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.