You are here


Posted May 21, 2019

I've been working on a site with events, and tearing my hair out over how to print formatted dates with the correct timezone value in Twig templates, specifically node.html.twig and views-view-fields.html.twig. The issue was first, getting the formatted date to display in the template; and secondly, when I managed to get it displaying, it was not in the correct timezone; it was off by several hours. The accepted answer to this StackExchange question was the key to cracking the problem....

Tags: Drupal 8, twig, date, fields, theming

read more

Posted May 17, 2019

I'm working on a website which has icons on file upload links, like so: This is nice 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 put an alt of "PDF" on them and be done. However, in this case, they're background images. So, we want to add a visually hidden span at the end of file links with the filetype, e.g. "(PDF)". This...

Tags: Drupal 8, accessibility, theming, twig

read more

Posted Apr 23, 2019

By default, the label for the core Search module text input in Drupal 8 is set to invisible, that is, it's present but hidden by applying the "visually-hidden" class so users of assistive technology can read it. But what if you want to display it visually? That's not so easy. There's no way to do it through configuration, and little to no information about how to do it with code. I muddled around and finally found where the visibility was being set, in SearchBlockForm.php in the core Search...

Tags: Drupal 8, search block form, label visibility, forms, theming

read more

Posted Apr 17, 2019

Data attributes on HTML elements can be very handy for targeting certain elements with CSS and/or Javascript. Let's say, for example, we have a site with a menu whose links have a different background colour depending on what category they belong to, cats or dogs.The HTML might look like this: <ul class="menu">  <li class="menu-item">    <a href="#">Cats rule</a>  </li>  <li class="menu-item"...

Tags: Drupal 8, twig, CSS, data attributes, html

read more

Posted Mar 26, 2019

I've been working on a website with the requirement to truncate certain text fields—display the first several words of the text, with a "show more" link which on click, expands the rest of the text. As I was under a very tight deadline, I found and implemented a jQuery plugin. Quick and easy. However, that approach creates several problems. One, it's a lot of code for a pretty simple function. Two, since it's applied client-side, not server-side, it didn't work on first page hit. People...

Tags: Drupal 8, twig, html, javascript, content display, theming

read more

Posted Aug 4, 2016

(Note that this technique is totally deprecated by Flexbox and CSS Grid, but it's interesting for historical purposes, I guess). If you've ever tried to do it, you know that vertically centring elements in CSS is notoriously difficult. Horizontal centring is a relative breeze, but vertical is another story. I often have a use-case where I want to vertically centre some text on top of an image, say for a site banner. For example: I have a few requirements: I want the image to be an actual...

Tags: front end, CSS, vertical centering

read more