April 14th, 2020  | Categories: Composer, Drupal 8, Drush 9

PROBLEM
You done f**ked up. You did a $ composer uninstall on a module before you disabled it. You go in to import or do something else drush related. Boom! Errors!

I recently received the following errors when I accidentally did this with views_accordion:

The "views_accordion" plugin does not exist. Valid plugin IDs for Drupal\views\Plugin\ViewsPluginManager are: entity_reference_revisions, serializer, data_export, default, default_summary, entity_reference, grid, html_list, opml, rss, table, unformatted_summary
[warning] include_once(/appdata/www/web/modules/contrib/views_accordion/views_accordion.module): failed to open stream: No such file or directory Extension.php:147
[warning] include_once(): Failed opening '/appdata/www/web/modules/contrib/views_accordion/views_accordion.module' for inclusion (include_path='/appdata/www/vendor/pear/archive_tar:/appdata/www/ACF-D8-Enterprise/vendor/pear/console_getopt:/appdata/www/ACF-D8-Enterprise/vendor/pear/pear-core-minimal/src:/appdata/www/vendor/pear/pear_exception:.:/opt/rh/rh-php72/root/usr/share/pear:/opt/rh/rh-php72/root/usr/share/php') Extension.php:147

SOLUTION
You will need to re-install the missing module again, then do a cache refresh, then disable it, then uninstall it. Like the following:

$ composer require drupal/views_accordion
$ drush cr
$ drush pm:uninstall views_accordion
$ composer remove views_accordion
$ drush cr

The first $ drush cr refreshes the cache. This step is very important because it then determines the link to the “newer” views_accordion module. That was the key! Then you should be able to disable the module and uninstall it the correct way.

Need to remember this for later! Mistakes happen…

November 1st, 2019  | Categories: Drupal, Drupal 8

PROBLEM
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:

global:
  css:
    theme:
      dist/style.css: {}
      https://fonts.googleapis.com/css?family=Source+Sans+Pro: {  }

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:

SOLUTION
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:

global:
  css:
    theme:
      dist/style.css: {}
      https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700: {  }

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

July 1st, 2019  | Categories: Drupal, Drupal 8, Things To Remember

PROBLEM
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?

SOLUTION
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.

April 18th, 2019  | Categories: Drupal, Drupal 8, NIFTY TRICKS, Things To Remember

PROBLEM
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?

SOLUTION
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!

April 17th, 2019  | Categories: Drupal, Drupal 8, Drush 9, Things To Remember

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)
$ 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 drupal/core webflo/drupal-core-require-dev –with-dependencies Update Drupal 8 core
$ composer update Update Drupal core with all the 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=”my_email@yahoo.com” –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
March 20th, 2019  | Categories: Drupal, Drupal 8, IPad/IPhone, JQuery

PROBLEM
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?

SOLUTION
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
	$("ul.office_main_top_level").removeClass("nice-menu");
	$("ul.office_main_top_level").removeClass("nice-menu-acf-main-navigation");
	$("ul.office_main_top_level").removeClass("nice-menu-down");
	$("ul.office_main_top_level").removeClass("sf-js-enabled");
	$("ul.office_main_top_level").removeClass("sf-arrows");
	$("ul.office_main_top_level").removeClass("nice-menus-processed");
}

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() {
	$("ul.office_main_top_level").toggle();
	$("#office_main_nav_hamburger i").toggleClass("fa-times fa-bars");
});

$(".expand_link", context).click(function() {
	$(this).closest("li").children("ul.office_main_sub_level").toggleClass("expand_sub_level_mobile");
	$(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.

March 12th, 2019  | Categories: Drupal, Drupal 8, Twig

PROBLEM
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:

https://www.drupal.org/node/953034
https://www.drupal.org/forum/support/module-development-and-code-questions/2016-04-07/drupal-8-regions-with-and-empty
https://drupal.stackexchange.com/questions/175389/how-do-i-properly-detect-if-region-is-empty

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.

SOLUTION
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.

February 14th, 2019  | Categories: Drupal, Drupal 8, Pattern Lab

PROBLEM
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.

SOLUTION
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!

January 31st, 2019  | Categories: Drupal, Drupal 8, Twig

PROBLEM
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!


SOLUTION
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.

item.url.getOption("attributes").target
item.url.getOption("attributes").class

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.target
field_link[0].options.attributes.class|join(" ")

December 21st, 2018  | Categories: Drupal, Drupal 8, Things To Remember

PROBLEM
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!
SOLUTION
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.

TOP