June 24, 2024
The Drupal Responsive Background Image module is a nice little module that gives you a preprocess function to display an image field as a, you guessed it, responsive background image. This is useful for hero images, when you want the image to display at different sizes on different-size screens, because you don't want to load an enormous 2000+-pixel-wide image on mobile screens.
The creator of…
Continue reading How to use Responsive Background Image in a page or node template
January 20, 2021
The following preprocess function will give you unique classes on the body tag for each Group content type (from the Group module). It adds two classes, one that includes the Group type that the content is in as well as the Group content type (e.g. group-content--client-group--node-page); and one with just the Group content type (e.g. group-content--node-page).
Place this code in your theme's .…
Continue reading Add body classes per group content type - Drupal 8 & 9
January 20, 2021
The following template suggestion (placed in your theme's .theme file) will give you field template suggestions per entity type, e.g. field--node.html.twig, field--group.html.twig, field--media.html.twig, etc. I wanted to theme all fields in Groups the same way, and didn't want to have to create field templates for each group type, which was the least granular template suggestion available.
This…
Continue reading Template suggestion for field templates per entity type - Drupal 8 & 9
October 23, 2020
I wanted to change the format of the comment submitted timestamp on my blog, and figured it could be done in Twig - but nope. There's an active issue on Drupal.org to allow the format to be changed in the UI, but until that's done, you need to use a theme preprocess function.
function THEMENAME_preprocess_comment(&$variables) { $date_formatter = \Drupal::service('date.formatter…
Continue reading Change format of comment created date - Drupal 8 & 9
May 17, 2019
I'm working on a website which has icons on file upload links, like so:
This works for people who can see the icons, but what about those who can't? Accessibility means giving all users an equivalent experience, regardless of how they're accessing the site.
If the icons were inline images, we could add alt text with the filetype. However, in this case, they're background images.
So, we want to…
Continue reading Add file type indicator to file field links for accessibility - Drupal 8-10