Including Bold Font In Drupal 8 Library

In Drupal 8, we are now putting everything in a libraries.yml file for the theme. When using fonts from other sources (HTML5), you need to list it like such:

      dist/style.css: {} {  }

Doing it this way is just fine and dandy but what about the specific bold? If you look at the Source Sans Pro on google fonts, you see this font does Bold, Italic, etc.

However, in practice, if you just include the code above and make the font bold in the style, bold isn’t really bold. It’s more like a different color; not really bolding the text:

There are no notes in Drupal of how to include the different boldnesses or anything of different fonts. I kinda had to play around with it. With the google fonts, you can select the different fonts you want and it will give you what you need to include in your page… But that’s no good for Drupal 8 since it’s using yml files!

In order to get the font to be the real bold text, I put the following in the yml:

      dist/style.css: {},700: {  }

So just add the :400,700 to the end of the thing. Now it looks correct:

Views Exposed Filter Query Strings

This post is just something I found out that I will need to remember.

With views, when I have an exposed filter, what ends up in the query string matters. I would like a clean look so the URL can be something like ?taxonomy=research . I had set up a view so it does do that but then when I went to set up another one, it used the taxonomy id (i.e. ?taxonomy=345 ). How did it get that way?

It’s all about how you set up the exposed filter in the view. In your view, in the Settings, next to the exposed filter under FILTER CRITERIA, when you select what specific taxonomy to use, you’ll see an option at the very bottom for Selection type. This could be either Dropdown or Autocomplete.

If you select Dropdown, it will use the taxonomy id in the URL (i.e. ?taxonomy=345 ).

If you select Autocomplete, it will use the taxonomy name in the URL (i.e. ?taxonomy=research ).

Have to remember that. But it would be nice for Views to give you the option.

Disable Caching On Specific View In Drupal 8

I may be the only one who struggled with this for a good half hour… and in Drupal time, that’s nothing. I have a view that’s a block of a random piece of content. Unfortunately, Drupal caches everything. So how do I get it to display something random if it doesn’t display something random until the cache is refreshed in Drupal?

Turns out it was easy! (It’s not easy to find the solution online, however.)

In the view, under the Advanced tab, there is Caching. Turn that to none.

That’s it! Have to remember that!

Composer/Drush Notes For Drupal 8

While I had some time, I thought I might create a post for some composer and drush commands that I use A LOT… just for a reference.

This list is for Drupal 8/Drush 9.

Command What It Does
$ drush cr Clears cache (duh; you use this 1239832 times a day)
$ drush en coder Enable a module (ex. coder)
$ drush pmu coder Disable a module (ex. coder)
$ composer require drupal/coder Install a module (ex. coder)
$ composer remove drupal/coder Uninstall a module (ex. coder); disable it first!
$ composer require drupal/migrate_tools:4.0-beta2 Install a specific version of a module (ex. migrate tools)
$ drush sql-dump –-result-file=’/path/to/database/backup.sql’ Get a database backup easy
$ composer update Update Drupal 8 core & modules
$ drush updb Update the database after a Drupal core and/or module update (duh; do this after you run composer update; same as going to update.php)
$ drush status Tells you important information such as Drupal version, Drush version, etc.
$ drush sqlc Get into the database (MySQL) easy
$ drush uli Get a temporary URL to log into the Drupal site to bypass password; good for when you lose your password or your account is locked out and you’re the admin
$ drush sql-connect The database connection string
$ composer -V The version of composer you’re running
$ drush user-create janny_m –mail=”” –password=”my_p@ssword” Create a user (janny_m) with email and password
$ drush user-add-role “administrator” janny_m Make a user an administrator
$ sudo /usr/local/bin/composer self-update Update composer

Making Nice Menus Responsive In Drupal 8

I highly recommend Nice Menus for Drupal. I’ve been using it for years and it makes things pretty simple. It’s easy to style over to what you need plus it’s keyboard accessible (which is the huge one)!

Anyway, as far as mobile-friendly/responsive goes, Nice Menus is not. It lacks in that department.

So how do we style it? How do we make it a hamburger menu?

Turn off nice menus! It kinda sucks, but you need to do it in order to put things into your menu template and create mobile-friendly design.

First, to turn off nice menus, put something like this in a JS file (which DOES use JQuery so be careful; that’s another post for another day):

// we only need to do stuff if it's on mobile
if ($(window).width() < 770) {
	// let's remove the nice menus on resolutions that are 768 and lower

Removing those classes will turn off the JavaScript that’s happening with Nice Menus for keyboard accessibility, styles, etc.

Now add something like this to your template at the top (but outside the first ul):

<a href="javascript: void(0);" id="office_main_nav_hamburger"><i class="fa fa-bars"></i><span class="hide">Expand</span></a>

(I’m using Font Awesome for icons.)

Add this after the links in the lis (only if they have children):

<a href="javascript: void(0);" class="expand_link"><i class="fa fa-angle-down"></i><span class="hide">Expand</span></a>

Add some more stuff to your JS file (I did it inside the if window statement above):

$("#office_main_nav_hamburger", context).click(function() {
	$("#office_main_nav_hamburger i").toggleClass("fa-times fa-bars");

$(".expand_link", context).click(function() {
	$(this).children("i").toggleClass("fa-angle-down fa-angle-up");

I won’t walk you through all the CSS but at least now you may have a understanding of how to make Nice Menu’s responsive.

Empty Region Displaying In Drupal 8

This is a strange one but one that’s been talked about many, many times in Drupal 8. In Drupal 8, if you check to see if a region is empty, it isn’t empty. You need to do a few things to adequately determine if a region is truly empty.

See these:

So, I would like to determine if a block is empty before I display it so I can put a Bootstrap wrapper around it. However, just using:

{% if page.left_sidebar %}
	<div class="left_sidebar">{{ page.left_sidebar }}</div>
{% endif %}

won’t work. To give some background, the region on most pages has a secondary menu (a left navigation). However, on pages where this doesn’t display, it would display an empty region even though there was no menu there.

At first I did:

{% if page.left_sidebar|render|striptags|trim %}
	<div class="left_sidebar">{{ page.left_sidebar }}</div>
{% endif %}

and this seemed to work! However, today, when I got to putting a webform in a region, it didn’t work. Striptags for some reason took out everything. Come to find out Webforms use some sort of “lazyBuilding” or something I don’t give a shit about. #stupidShit

Anyway, now my code above doesn’t work. But buried deep in one of those links above is this gem:

{% if page.left_sidebar|render|striptags("<drupal-render-placeholder>")|trim %}
	<div class="left_sidebar">{{ page.left_sidebar }}</div>
{% endif %}

This seems to work for the moment. If this turns out to not work later (which it might not for other needs… or in like 10 minutes when I find another issue), I will re-evaluate.

Get Image URL From Referenced Media Into View In Drupal 8

I have a view of all blog posts. Each blog post has an image which is a referenced Media. On the view of all the blog posts, I would like to use a Pattern Lab template. So, I need to pass an image URI to a Pattern Lab template. However, when I add the image to the Fields in the view, it outputs the image with no option of outputting the URI of the image.

I forget if there was a way to do this without a custom module in D7. D8 does offer a custom module to do this but come on! This is so simple! We shouldn’t have to have a custom module just to output the src of an image!

What I finally figured out how to do (after looking at a few forums) is to add a relationship to the media.

In the view, follow these steps:

  1. Expand Advanced on the right side.
  2. Click Add to the right of Relationships.
  3. Choose Media referenced from field_image (where field_image may be what the field is for your content type.)
    Screen shot of Media referenced from field_image
  4. Apply (to this display).
  5. Under Fields click Add.
  6. Search for image and select the Image with category Media.
    Screen shot of Image with Media category
  7. On the next screen for Formatter choose URL to image.

There you go! You should see the path to the image and NOT the stupid public:// path either!

Getting it from the twig template was difficult too but here’s how I got it:

{{ fields.field_media_image.content|striptags|trim }}

Why striptags and trim? Cause if you have suggestion comments on (like I do), it is outputting a field so you want to get rid of that and just have the string itself.

Now you can pass that pretty output into your pattern lab template or do whatever you want with it!

Get Link Attributes In Twig Of Menu In Drupal 8

We’re using Pattern Lab with our Drupal 8 installation so I will need to get the link attributes of menu items so I can pass them to the link pattern. I am using the Link Attributes Widget for giving the option of opening links in new windows and adding classes to links.

However, I need to be able to get these attributes from the Drupal twig template to pass them into the Pattern Lab template.

I tried to do this months ago but couldn’t figure it out. Months later, I’m a lot better at twig than before. I went through looping through the items in item and getting the keys. Nothing was working. The only thing I could do was to output the link using the link function in Drupal. That would properly output the link.

But I wanted to use the link pattern in Pattern Lab!

After a while at this, I stumbled upon a post on Drupal of someone trying to do the same thing (just get the attributes of a damn menu link in twig)!

Use this code to get the target and the classes. (This is looping through the items array… i.e. for item in items) Note that class is in an array so you might want to add |join(” “) afterward.


Now I can move forward!

Extra… But by the way, normally to get the target and classes of these for regular field links, use this:

field_link[0].options.attributes.class|join(" ")

Stop Caching In Drupal 8 Custom Module Block

I created a custom module for next/previous posts since there isn’t one out there for D8. And even if one is out there, it wouldn’t fit our needs since we have different taxonomies and different blogs.

I ran into this caching of blocks issue I had when I developed the flex_carousel module for D8 and it was super annoying. I worked around it using JQuery. I wasn’t happy about that solution.

Now I ran into this issue again; and this time it cannot be JSed around. It needs to not cache.

I developed the module to display next/previous posts when you’re on a blog content type. It works fine if you’re always on the same node but you’re always not on the same node so in other words, it doesn’t work. It keeps the same next/previous posts no matter what node you’re on.

Caching needs to be turned off for this block!
Add this simple function (method) to your block class. Looks something like…

class NextPreviousPost extends BlockBase {
	public function build() {
		/* your build code here */

	 * {@inheritdoc}
	public function getCacheMaxAge() {
		return 0;

It’s that simple! It changed my life.

jQuery Is Not Defined In Pattern Lab

I’ve been tasked with something very tedious. I’m to migrate Drupal 7 to Drupal 8. However, for the theme in Drupal 8 it has been decided we are going to use Pattern Lab. Specifically, using the Emulsify theme as a start.

I got lots of JavaScript errors on the Pattern Lab site to start. I needed to uncomment and create syslinks. Basically, follow the instructions in the \web\themes\custom\acf_enterprise\components\_meta\_01-foot.twig file.

After I got all that working, I proceeded to add jQuery to my branding bar file (located at \web\themes\custom\acf_enterprise\components\_patterns\02-molecules\menus\branding-bar\branding-bar.js).

Per the instructions, I uncommented the JavaScript so that it’s using Drupal behaviors as well. Ex.

(function ($, Drupal) {

    Drupal.behaviors.branding_bar = {
        attach: function (context) {

})(jQuery, Drupal);

Also make sure to include jQuery in the library for your theme on the Drupal 8 side… For example, my branding bar library (\web\themes\custom\my_theme\my_theme.libraries.yml) looks like this:

    dist/02-molecules/menus/branding-bar/branding-bar.js: {}
    - core/drupal
    - core/jquery

It works in Drupal 8! However, it does not in Pattern Lab (i.e. on /themes/custom/my_theme/pattern-lab/public/?p=viewall-molecules-menus).

Soooo… that’s the jist. And I’m getting a jQuery not defined error.

Try googling this. NOTHING HELPFUL.

What they forget to mention is that you need to include jQuery in the footer of Pattern Lab. I.E in that \web\themes\custom\my_theme\components\_meta\_01-foot.twig file you have to muck around with to get other things to work.

My file now looks like this:

{{ patternLabFoot | raw }}

<!-- Drupal-specific usage -->
<!-- example using symlinking -->
<!-- cd web/themes/custom/emulsify/components/js -->
<!-- ln -s ../../../../../core/assets/vendor/domready/ready.min.js ./ -->
<!-- ln -s ../../../../../core/misc/drupal.js ./ -->

<!-- need to include jQuery!!! -->
<script src="../../js/jquery-2.0.0b2.js"></script>

<script src="../../js/ready.min.js"></script>
<script src="../../js/drupal.js"></script>
<script src="../../js/debounce.js"></script>

<script src="../../../../dist/scripts-styleguide.js"></script>

<!-- If using Drupal.behaviors, uncomment for them to work in Pattern Lab -->


Notice the include of jquery-2.0.0b2.js. They forgot to mention to put that in there. JQuery now works on it so I should be good to go for about twenty minutes until I run into the next problem.

Also to note that their version of JQuery may not be the same one you’re used to. You may need to include the REAL version of JQuery in this footer file.

… I feel like I’m going to be updating this blog a lot since this theme and the impossible task of Pattern Lab has fallen entirely on my plate.