Node title fields "title" class has no effect
Currently we're adding a "title" class to node title fields as rendered by Display Suite in an attempt to get the Bulma Title element display. However, because we're adding the class to a wrapper <div>
that contains an <h2>
element, the "title" class has little or no effect. The current markup:
<div class="title is-size-4">
<div>
<h2>
<a href="/some/path" hreflang="en">Title</a>
</h2>
</div>
</div>
The <h2>
wrapper is a Display Suite addition rendered as part of an inline template, meaning we don't have access to it at the template level.
Using octavia_preprocess_field()
we can add classes to the <h2>
, and in a template we can {% set use_item_wrapper = false %}
(see field.php.twig
in bulma
) to suppress the inner <div>
wrapper, resulting in the following markup:
<div>
<h2 class="title is-4">
<a href="/some/path" hreflang="en">Title</a>
</h2>
/div>
But this is still not what Bulma is expecting. We don't get bottom margin on the "title" element because it's a :last-child
. Also, since we're adding classes in a preprocessor, skins or child themes won't have the ability to modify them.
So instead, take the following approach:
- In
octavia_preprocess_field()
, reset the$variables
to the#context
set for the inline template. This means we have direct access to settings like thewrapper
,entity_url
, andoutput
. - In
field--node-title.html.twig
, output thewrapper
tag and add class attributes. - In child templates, set
view_mode_size_class
to override the defaults for one or more view modes.
The resulting field output is what we want and can be modified by child templates.
<h2 class="title is-4">
<a href="/some/path" hreflang="en">Title</a>
</h2>