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.

November 1st, 2018  | Categories: Drupal, Drupal 8, JQuery, Pattern Lab

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

branding-bar:
  js:
    dist/02-molecules/menus/branding-bar/branding-bar.js: {}
  dependencies:
    - 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.

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

<!--DO NOT REMOVE-->
{{ 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>

<!-- UNCOMMENT AS NECESSARY -->
<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 -->
<script>Drupal.attachBehaviors();</script>

</body>
</html>

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.

December 1st, 2017  | Categories: Drupal, Drupal 8, Drush 8

PROBLEM
I have a content type linking to another content type (entity reference). I have a JSON feed that has that information of node titles. It’s using the same examples from the previous two blog posts but slightly modified to add some more data. For example, one item of the JSON array looks like the following:

        {
            "title": "Drupal 8 Change Taxonomy Term In Migrate",
            "pubDate": "2017-11-29 14:23:04",
            "link": "http://www.longlivethemonkey.com/syntaxnotes/?p=300",
            "guid": "http://www.longlivethemonkey.com/syntaxnotes/?p=300",
            "author": "admin",
            "thumbnail": "",
            "description": "content...",
            "content": " here's some cool content... to fill in later... well maybe never cause this is just test crap",
            "categories": [
                "RANDOM",
                "CRAP"
            ],
            "articles": "WINTER COAT,BOXER SHORTS,T SHIRT"
        },

The only thing that’s new is articles. These articles are titles of nodes in the Article content type. Using data like this I need to modify the previous YML to import and link to the articles.

SOLUTION
I first need to explode the string then find the reference and import it into the new node.

Here’s what my YML looks like (for just handling the articles… the rest of the YML is the same as the previous blog entries… except in the fields I added sn_articles for the articles):

  # explode the string, find the article entity and populate
  field_article_reference_0:
    -
      plugin: explode
      source: sn_article
      delimiter: ','
    -
      plugin: entity_lookup
      ignore_case: true
      value_key: title
      entity_type: node
      bundle_key: type
      bundle: article

It successfully links to the proper article!

Also since I didn’t put a cheat sheet before on some drush migrate commands:

$ dr migrate-import migration_try_6

$ dr migrate-rollback migration_try_6

$ dr migrate-import migration_try_11 --update

$ dr mmsg migration_try_12
TOP