Sep 17 2019
Sep 17

The Drupal 8 Publish Content module is a simple module that provides you additional permissions to allow users to publish or unpublish content without having to give the user the ability to administer all the content on your site. This module is a lightweight solution to help you build out your content management workflow on your Drupal 8 site.

The module also adds some additional features such as:

  • A publish/unpublish menu tab or action link for your content
  • A publish/unpublish link that can be used in views to create a customized publishing workflow

Download the Drupal 8 Publish Content module like you would any other Drupal module. You can download it with Composer using the following command:

composer require drupal/publishcontent

Install the Publish Content module.

Click on the Permissions link under the Publish Content module listing on the Extend page or Navigate to People > Permissions and find the Publish Content section. You will find a bunch of granular publishing permissions for deciding who can publish or unpublish content on your site.

Publish Content Permissions

If you navigate to a piece of content on your site, you will notice there is now an Unpublish/Publish link.

Publish Content Menu Tab

This link is also available to add in views for content listing views.

Publish Content View Link

This module provides you a ton of flexibility for building out your content management workflow on your Drupal 8 website.

Sep 12 2019
Sep 12

The Drupal 8 SVG Image module changes the image field widget to allow for SVG images to be uploaded on your Drupal 8 website. This module also allows you to set the width and height of the image as well as choose if the image should be displayed as an or tag.

Download the Drupal 8 SVG Image module like you would any other Drupal module. You can download it with Composer using the following command:

composer require drupal/svg_image

Install the SVG Image module.

Navigate to Structure > Content Types > Article and select Manage Fields. You should have an image field on your Article content type. Click the Edit button.

In the Allowed File Extensions text box add “svg” to the list.

Allow svg format

Save the page, then go to the Manage display tab for the Article content type.

Click the gear icon next to your image field and you will notice you have additional options for SVG images. The first is that you can render the SVG as an tag (which is enabled by default). The second is that you can set the width and height of the SVG image.

SVG Image Options

You can now create an Article and upload your SVG image!

Sep 10 2019
Sep 10

Download the Menu Item Extras module like you would any other Drupal module. You can download it with Composer using the following command:

composer require drupal/menu_item_extras

Install the Menu Item Extras module. The module also provides a Demo module that can be used to see some examples of a menu with fields and display modes configured. In this case, we will just look at the base Menu Item Extras module.

Navigate to Structure > Menus > Main Navigation. The first thing you should notice is that there are additional links to Manage fields, Manage form display, Manage display, and View mode settings. This is very similar to what you have probably used on other entity types.

If you need to store any additional data for a menu link, you can do this on the Manage fields page. One potential use of this is to add an image field:

Manage Fields

You can then manage the way this is displayed on the menu link add/edit form:

Manage Form Display

You can also control how this menu item is displayed:

Manage Display

If you navigate to Structure > Display modes > View modes you can add additional view modes for menu items. In this example, I created a new view mode for Custom menu links. I called the view mode Image Link.

Custom Menu Link

You can now navigate back to Structure > Menus > Main Navigation and go to Manage display. In the Custom Display Settings section, you can enable the Image Link view mode and configure the display settings for the Default links and the Image Link view mode displays.

Custom Display Settings

You can now navigate to the View Modes Settings tab and select what view mode to use for each link in your menu.

View Mode Settings

This additional flexibility allows you to do a lot with your menu items. You could use this to build out a customized mega menu (this would require additional theme and template development). You could also use this to customize the display of menu items (perhaps by adding icons next to menu links, adding additional menu link descriptions, and more. The module provides you the site building tools to customize your menu items, now it’s up to you to decide how you want to use it!

Sep 06 2019
Sep 06

To get started, you will need a Drupal 8 site. If you don’t have one, you can create a free Drupal 8 development site on Pantheon. Once you have your Drupal 8 site installed, make sure you have some Article content. You will also need to enable the JSON:API module.

API Module

That is it for setup on the Drupal site. The next step is to install the Gatsby Source Drupal plugin.

npm install --save gatsby-source-drupal

Or

yarn add gatsby-source-drupal

Next open the gatsby-config.js file so we can configure the plugin. Add the following code to the Gatsby config.

Gatsby Drupal Config

If you re-run your Gatsby development server, you will be able to open the GraphiQL explorer at http://localhost:8000/___graphql and explore the data the Drupal database is providing. In this case, I am filtering by the article content type. You can use the Explorer panel on the left to build the query and the play button at the top to run the query.

GraphQL Explorer

Now that you know your Gatsby site can see your Drupal data, we need to consume this data during the Gatsby build process and create pages. In this case, we want to create a page on our Gatsby site for each Article. We want to make sure we use the path that was configured in Drupal as the path to our Article. Anytime we want to create pages during the Gatsby build process, we can do so in the gatsby-node.js file. Go ahead and open that file up.

Add the following code to that file:

const path = require('path');
 
exports.createPages = async ({ actions, graphql }) => {
 const { createPage } = actions;
 
 const articles = await graphql(`
   {
     allNodeArticle {
       nodes {
         id
         title
         path {
           alias
         }
       }
     }
   }
 `);
 
 articles.data.allNodeArticle.nodes.map(articleData =>
   createPage({
     path: articleData.path.alias,
     component: path.resolve(`src/templates/article.js`),
     context: {
       ArticleId: articleData.id,
     },
   })
 );
}

This code does a few things. First it uses GraphQL to pull in the id and path of all the Articles from your Drupal site. It then loops through this list and calls Gatsby’s createPage method which will create a Gatsby page for this Article. We make sure we pass in the correct path and a template (which we still need to create). We also pass in the Article id as the context. You will see why this is important in a few minutes.

Create the src/templates folder if it doesn’t already exist, then create a file called article.js. Add the following code to this new article.js file:

import React from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'gatsby';
 
import Layout from '../components/layout';
 
const Article = ({ data }) => {
 const post = data.nodeArticle;
 
 return (
   <Layout>
     <h1>{post.title}</h1>
     <img 
        src={data.nodeArticle.relationships.field_image.localFile.publicURL}
        alt={data.nodeArticle.field_image.alt}
      />
 
     <div
       dangerouslySetInnerHTML={{ __html: post.body.processed }}
     />
   </Layout>
 );
};
 
Article.propTypes = {
 data: PropTypes.object.isRequired,
};
 
export const query = graphql`
 query($ArticleId: String!) {
   nodeArticle(id: { eq: $ArticleId }) {
     id
     title
     body {
       processed
     }
     field_image {
        alt
      }
     relationships {
        field_image {
          localFile {
            publicURL
          }
        }
      }
 
   }
 }
`;
 
export default Article;

This might seem a bit confusing at first. The first section contains the React component called Article. It receives a data prop which contains Article data. It returns outputs the title and the body text in a Layout component.

The second part contains the propTypes. This just says that our Article component will receive a prop called data that will be an object and it will be required. This is just a way to validate our props.

The third part is where it gets a bit more confusing. As you already know, we ran one query in the gatsby-node.js file to get the data, but here we are also running a page query. When using Drupal as a backend, it’s useful for each template to run it’s own page query so it can build the page in a self contained manner. This is especially important when you want to implement live preview (which we will cover in the future). This query takes the id and loads additional Article data such as the title and the body field. Notice that the relationships field has to be used to pull in the actual image.

Another thing to note here is that this is not the best way to pull in images. It’s recommended to use the Gatsby Image component, but that makes the GraphQL a little more complicated so we will revisit that in more depth in the future.

If you shut down and re-run your Gatsby development server, it should create the article pages at the same path they were created on your Drupal site. There is no listing page (another thing we will fix in the future), but you can manually paste one of the known paths into the address bar to see your Article content on your Gatsby Site!

Gatsby Article Page

Sep 05 2019
Sep 05

The Drupal 8 Field Defaults module is a handy little module that allows you to bulk update the default values of a Drupal field. This is helpful if you have ever added a field to a content type or entity and wished you could have the default value apply to all the existing content on your Drupal site.

Download and install the Field Defaults module just like any other Drupal 8 module.

You can visit the configuration page by going to Admin > Configuration > System > Field Defaults settings. The only setting is the ability to retain the original entity updated time when default values are updated.

Field Default Module Settings

Navigate to a Content Type and go to Manage Fields. Edit one of the fields on the content type. In the screenshot below, I am editing a text field called Example. You will notice under the default value section there is a new fieldset called Update Existing Content. If you needed to change the default value and wanted it to apply to all of your existing content on the site, you would use the checkboxes to update the defaults.

Field Default Module Update Content

That’s it! There really is not a lot to it, but it’s useful when you are adding new fields to existing sites.

Sep 02 2019
Sep 02

The Drupal 8 Allowed Formats module allows you to configure what text formats are available for each field. By default, all the text formats a user has permission to use are available for every field that uses text formats. Sometimes you want a field to have html, but have a more limited set of html tags. This can easily be accomplished by creating a new text format and using the Allowed Formats module to limit the field to using that text format.

Download the Drupal 8 Allowed Formats module.

composer require drupal/allowed_formats

Install the Drupal 8 Allowed Formats module.

Go to Admin > Structure > Content Types and select Manage Fields. If you edit the Body field you will see an Allowed formats section that allows you to specify what formats you can use on this

Allowed formats checkboxes

This means you could easily create a new field on a content type and set it to only allow the Restricted HTML text format. You could also create a new text format that could be used on specific text fields.

Sep 02 2019
Sep 02

The first step is to download the Drupal 8 Scheduler module and install it. Downloading the module is easy with composer:

composer require drupal/scheduler

In this example, we are only going to cover the Scheduler module. The module comes with a Scheduler Rules Integration module that can be used to integrate Scheduling conditions, actions, and events with the Drupal 8 rules modules.

Drupal Scheduler Module module page

If you navigate to the User permissions page, you can see there are three permissions for the Scheduler module. Typically, you will allow your content editors to schedule content to be published and possible see the list of all content that is scheduled.

Drupal Scheduler Module permissions page

In the Admin menu, navigate to Configuration > Content authoring > Scheduler to get to the Scheduler settings page. Here you can set it up so a content administrator only has to enter the date and the content will be published at a default time. This is useful if you always want content to be published at the same time of day. For now, leave everything at the default.

Drupal Scheduler Module settings page

Click on the Lightweight cron menu item from the Scheduler settings page. If you are only scheduling content to be published occasionally and don’t care if it’s published at exactly the correct time, then you will not need to worry about this admin page. If you need more fine grained control and would like up to the minute publishing, this page provides useful information.

By default, the scheduler actions happen on the default Drupal cron run. Typically you will set up cron to run every hour or possibly once a day, depending on your site needs. The Scheduler module provides a more lightweight cron process available at a callback URL that only runs the scheduler instead of all the default Drupal cron hooks. This makes it more efficient for up to the minute publishing.

Drupal Scheduler Module lightweight cron page

Navigate to Admin > Structure > Content Types. Select Edit on one of the content types you would like to allow scheduling on. In this example, we will use the Article content type.

Content Type Edit

Click on the Scheduler section. Here you can turn on the ability to publish or unpublish this type of content using the Scheduler module. You can specify that creation time should match the publishing time, require that the content be scheduled, and even make sure a new revision is created when the content is published. You can also change how the scheduler options appear on the node edit page (when creating or editing content). For now, just check to turn on Publishing and to change the content creation time to match the scheduled publish time. Then click the Save content type button.

Drupal Scheduler content type options

Now create a new Article and set the Scheduling date and time. Make sure the Article is unpublished and save it. Once that date and time passes and the Drupal cron process runs, this new Article will now be published! Keep in mind, the date/time is based on your site’s timezone settings.

Drupal Scheduler options

You can go to the Content admin page and click the Scheduled menu tab to view all the scheduled content on your site.

As you can see, it’s incredibly easy to set up and start using the Scheduler module. You should now be able to empower your content editors to schedule their content to be

Aug 31 2019
Aug 31

Make sure to download the Quicklink module using composer.

composer require drupal/quicklink

Enable the module just like you enable any other module.

Head on over to the configuration page at Admin > Configuration > Development > Performance > Quicklink.

In the Prefetch Ignore Settings section, you can configure what Quicklink should not prefetch. You can specify URL patterns on this page that should be ignored.

Quicklink Settings

In the Optional Overrides section, you can configure some various override options such as the parent CSS selector for the prefetch links, the allowed domains, and prefetch paths.

Quicklink Settings

In the When to Load Library section, you can control when QuickLink will be loaded on the page. You can even specify for it not to load on specific content type pages.

Quicklink Settings

The Extended Browser Support section allows you to load the Intersection Observer polyfill which allows quicklink to work in IE11 and some older browsers.

Quicklink Settings

The last section allows you to enable debug mode. For the most part, the defaults work well so leave everything at the default.

Quicklink Settings

To test this out, you will want to make sure you have a webpage with multiple links on it. A blog listing page works well. In my example, I used the Devel Generate module to generate a bunch of Article content to fill up my homepage.

Next make sure you are logged out. I recommend using an incognito or private browsing window. Open up your developer tools and go to the Network tab. Now refresh the page, wait for everything to load and start scrolling. You will notice that the network tab shows additional activity as the links are pre-fetched.

Aug 30 2019
Aug 30

The first step is to install Drupal Console. You may have already watched the last episode that covers this, however, if not, you can install with composer using:

composer require drupal/console

This will install Drupal console in your project in the ./vendor/bin/ directory. This means you can run Drupal console using:

./vendor/bin/drupal [command]

Note, in my examples I am using Lando for my local development environment. I have it set up to allow me to run Drupal console commands on my site by running lando drupal. You can decide to install Drupal Console globally and add it to your path. Depending on the development environment your setup might be slightly different.

You can get a list of all the Drupal console commands by running Drupal Console command with no command argument:

drupal

To generate a boilerplate module with Drupal console run:

drupal generate:module

Fill out the questions asked by Drupal console. Make sure to enter a module name and description. In this example, I added a package name, didn’t include a composer.json file, and didn’t include a themable template:

Drupal Console Generate Module

At the end of the questions Drupal console will ask you if it should proceed with creating the module for you. Hit enter to default this to yes.

Drupal Console Generate Module

The next step is to create our custom entity. We want our entity to be a content entity, not a config entity. This can be accomplished with the following Drupal console command:

drupal generate:entity:content

Make sure to select the module you just created. In this case, I will call the entity Statistic and accept everything else at its defaults.

Drupal Console Generate Entity

When you get through all the questions, you will see all the files that were created:

Drupal Console Generate Entity

Now before you go turn this module on, we are going to take a quick look at the code. At the time of this guide, there is a bug that will cause you some headaches if you don’t fix it prior to enabling the module!

Take a look through all the files generated to create the entity. Don’t worry if you are a bit confused at this point, there are a lot of files and a lot of things going on here!

Open up the Statistic.php file (located in the src/Entity folder). If you called your entity something else, it will be the name of the Entity class.

At the top of the file you might notice that the line of code importing EditorialContentEntityBase is missing a semicolon. This is a bug in the code generation tool, make sure to add a semicolon there!

Fix Content Entity Error

This file is doing a lot, but the core of what it is doing is create the structure for your entity. This structure will be created in the database when you install the module. Go ahead and install the module to see how it works. You will notice that once you install the module you are given some menu options under the Admin > Structure menu.

The Statistics setting page is a placeholder where you could eventually add additional configuration settings. This file is controlled by the src/Entity/StatisticSettingsForm.php file.

You will notice you can manage field and display field just like you can with a content type. At this point, we could be done and just use the UI to configure the entity from here. However, in this case we want to add one more field to our entity before we call it finished.

Uninstall the module and open back up the Statistic.php file. Go down to the baseFieldDefinitions method and add the following code after the $field[‘name’] variable is set.

$fields['value'] = BaseFieldDefinition::create('string')
  ->setLabel(t('Value'))
  ->setDescription(t('The value of the Statistics entity.'))
  ->setRevisionable(TRUE)
  ->setSettings([
    'max_length' => 50,
    'text_processing' => 0,
  ])
  ->setDefaultValue('')
  ->setDisplayOptions('view', [
    'label' => 'above',
    'type' => 'string',
    'weight' => -4,
  ])
  ->setDisplayOptions('form', [
    'type' => 'string_textfield',
    'weight' => -4,
  ])
  ->setDisplayConfigurable('form', TRUE)
  ->setDisplayConfigurable('view', TRUE)
  ->setRequired(TRUE);

What this will do is add a new field called value. In this case we are making it a string field and the form will be displayed as a textfield. We could have made this an integer field or a decimal field, but for simplicity we will just make it a string.

If you re-install the module, you will now notice your value field is available. Go ahead and create some Statistics now!

There is a lot more you can do with it. You could spend an hour looking through all the code that was generated as there is a lot to learn! This is a good stopping point for now, as we were able to quickly create our own custom entity using Drupal console!

Aug 29 2019
Aug 29

The first step is to install Drupal Console. You can do that with composer using:

composer require drupal/console

This will install Drupal console in your project in the ./vendor/bin/ directory. This means you can run Drupal console using:

./vendor/bin/drupal [command]

Note, in my examples I am using Lando for my local development environment. I have it set up to allow me to run Drupal console commands on my site by running lando drupal. You can decide to install Drupal Console globally and add it to your path. Depending on the development environment your setup might be slightly different.

You can get a list of all the Drupal console commands by running Drupal Console command with no command argument:

drupal

To generate a boilerplate module with Drupal console run:

drupal generate:module

Fill out the questions asked by Drupal console. Make sure to enter a module name and description. The rest of the options can be left at their defaults (in the example below I also added a Package name):

Drupal Console Generate Module

At the end of the questions Drupal console will ask you if it should proceed with creating the module for you. Hit enter to default this to yes.

Drupal Console Generate Module

You can now see that this has generated a boilerplate module for you. You can now look at this generated code and even install this module on your Drupal site.

We will now use Drupal console to generate and administrative form. This can be started by running the following command:

drupal generate:form:config

The first step is to enter your module name. This should autocomplete as you type. After that you need to add a Form Classname. In the example below, I used SettingsForm. The next four questions can be left at their defaults:

Drupal Console Generate Form Config

When you tell Drupal console you want to generate a form structure, it will provide you a list of form elements and walk you through a form builder process. In this example, I just created a textfield called My Textfield. Go ahead and generate some form fields.

Drupal Console Generate Form Config

When you are finished, just leave the New field type question blank and press the Enter key. It will then ask you some questions regarding the path and menu links.

Drupal Console Generate Form Config

After this it will generate the code for you.

Drupal Console Generate Form Config

Now all you need to do is enable your module, find the link in your admin menu, and you now have an Admin settings form!

Custom Drupal Admin Form

There is so much more you can do with this. As the module currently sits, it doesn’t do much, however, it provides a solid base for you to start developing your own custom module. Spend some time looking through the generated code and feel free to make modifications to the custom module you built.

Aug 29 2019
Aug 29

Make sure you have downloaded and installed the ECK module. Once installed, click on the Configure link or go to Structure > ECK Entity Types.

ECK Module Install

The ECK module allows you to define different entity types. These are similar to the way you define content types, but at a slightly higher level. When you create a content type, you are technically creating a bundle within the node entity type. In the case of ECK, you are defining your own Entity type that may or may not have bundles within it.

Click on the Add entity type button.

ECK Add Entity Type

In this example, we will be creating a new entity to keep track of important statistics. We will use the label Statistic and check all the available Base Fields. You can use whatever Label you would like and the base fields are all optional. I would highly recommend adding a Title field though.

Once finished, click the Create entity type button.

ECK Add Stat Entity Type

Your new Entity will now be displayed in the Entity Types list.

ECK Entity Type List

Click the Add bundle button to add a new bundle to this entity type. In our example, we will only create one bundle. The bundle will be called Number Stat and we will use it to track numeric statistics. Once you have your bundle information filled out, click the Save bundle button.

ECK Add Entity Bundle

The new bundle is now listed on the Statistic bundles listing page.

ECK Bundles List

We could create additional bundles if we had different types of statistics. Similar to how you can have different content types in Drupal 8. In this case, we will stick with just the one bundle and click on the Manage fields button.

Here you can add fields just like you add fields to a content type. In this case, just add a decimal number field called Statistic.

ECK Add Field

You can now go back to the ECK Entity Types admin page and click the Add content button on your Statistic entity type. Go ahead and fill out the form to add a few stats. Once you create some stats, you can go to the ECK Entity Types admin page and select the Content list option from the dropdown button. This will list all the entities for that entity type.

ECK Content

Now that you have the data stored on your site you can use Views or entity reference fields to display or reference this content throughout your site.

The ECK Module has a number of permissions available. These allow you to decide which roles can administer your ECK entities, bundles, and types. Typically you will give all of these roles to only your administrative users. However, the module provides flexibility if you have more complicated use cases.

ECK Permissions

You now know how to create custom entity types using the ECK module. Now go out and build all your entity data structures!

Aug 27 2019
Aug 27

So you want to turn those plain URL’s into something a little more fancy? Well, you have come to the right place. First make sure you have downloaded and installed the Drupal 8 URL Embed module. It’s recommended to download and install this module using composer so it will download the Embed module and the PHP Embed library automatically. You can do that with

composer require drupal/url_embed

The next step is to customize the embed button, if you want to. To do this, go to Configuration > Content Authoring > Text editor embed buttons.

Essentially, you can change the icon and add additional embed buttons. These buttons will be able to be used within your Text formats. It’s fine to leave these at the defaults for now. By clicking on the Settings link you can change where the button icon files should be stored.

Leave these settings at their defaults as well. Next, navigate to Configuration > Content Authoring > Text formats and editors. Here you will see a list of all the text formats on your website. Click the Configure button on the Basic HTML text format.

This will bring you to a page that will allow you to edit the Toolbar Configuration. Drag the URL Embed button into the Toolbar Configuration. You can place this wherever you want, but it likely makes the most sense in the Media section.

We now need to enable and configure two additional filters. Check the boxes next to Display embedded URLs and Convert URLs to URL embeds.

In the Filter Processing order section, make sure to rearrange the filters so Convert URLs to URL embeds comes before Display embedded URLs. This kind of makes sense as you need to first convert the URL before you can display it! You may also want to drag the Align images below both of these filters if you want to be able to align the embed codes. To use the Align images you will need to make sure you have the alignment buttons added to your toolbar configuration.

Under Filter settings, you now need to allow in the Limit allowed HTML tags and correct faulty HTML section.

Still in the Filter settings section, you can specify an optional prefix which can be used to indicate what URLs to accept. This could be useful if you only wanted Twitter links to be used for example. If you don’t specify anything here, then all of the embed urls from any provider will work.

Click the Save configuration button and now create some content on your site. You can go to Content > Add content > Article and go to the Body field to see your new Embed button in action. Make sure you add some content then click the URL Embed button and paste in a link (the example below used a Twitter link).

Now when you save the page, it will show up exactly like you would expect an embedded Tweet to show up.

Feel free to try out different types of links, the next example uses a Youtube link.

That’s all there is to it! As you can see, it’s incredibly easy to use the Drupal 8 URL Embed module to embed Twitter, Youtube, Instagram, Spotify, and many more types of links directly in your Drupal content. Now go out and start sharing those links on your Drupal site!

Aug 25 2019
Aug 25

The Drupal 8 Shield module allows you to protect your site using a simple htaccess authentication. It’s great for sites that you are working on that you don’t want the world (or Google) to see yet. This way you can send the site to a client or anyone really to test and just provide them the username/password to view the site. Once it’s ready to go, you can launch the site and remove this module.

If you have ever wanted to password protect your Drupal site, the Shield module will help with that!

Install the Drupal 8 Shield module like you would any other Drupal module. Note that it shows up in the module list as PHP Authentication Shield.

Once it’s installed, click on the Configure link to get to the configuration page.

It’s recommended to leave the Allow command line access checkbox checked. This will not let the Shield module affect command line access using tools such as Drush. You will want to fill out the Username and Password based on what you want a user to use to access the site.

Note: The Authentication message does not seem to work when I tested it with Chrome.

Click the Save configuration button and you should immediately see the authentication popup. You can test this out in a private browsing or incognito window to see it again. Once you enter the correct username and password, you will be able to access every page on your site.

That’s all there is to it. This works well for development and staging environment while you are developing the site but want the client to be able to look at it. Now go out and password protect your Drupal sites!

Apr 09 2019
Apr 09
[embedded content]

Here is a recording of a presentation I did at a local JamStack Boston meetup. This provides a good high level overview of how to use Gatsby with Drupal as a backend content source.

Some resources from the presentation:

Dec 04 2018
Dec 04

The Drupal 8 Rabbit Hole Module allows you to control what happens when someone views an entity page. Before you ask why this might be important, let me clarify, it's not a layout tool. It's a simple module that allows you to easily redirect or prevent users from viewing specific types on entities on your site. If you have content types or other entities that you are using to either build out a view or other area of your site, but don't want users to access the original page for this content type or entity, this is the module for you. If you read this entire description and are still confused, I promise it's very simple. Check out the video to find out how it might be useful for you on a future project.

Nov 20 2018
Nov 20

By shane

Tue, 2018-11-20 00:27

comments

Video of Drupal 8 FlexSlider Module - Daily Dose of Drupal Episode 220

Daily Dose of Drupal Episode #220

Share with Others

The Drupal 8 Flex Slider Module allows you to use the Flex Slider library to build out slideshows on your Drupal website. This video covers how to get Flexslider to integrate with Drupal views as well as Drupal fields.

Nov 19 2018
Nov 19

Video of Drupal 8 Configuration Read-only Module - Daily Dose of Drupal Episode 219

The Drupal 8 Configuration Read-only module allows you to lock down some of your environments to prevent users from making configuration changes. This lets you use the Drupal 8 configuration management system to push up all your changes, while preventing you from changing any settings, content types, views, or any other configuration on your production website.

Nov 13 2018
Nov 13

The Drupal 8 Editor Advanced Link Module allows you to specify additional attributes when creating links in your content. This makes it easy to add a CSS class, an ID, open the link in a new window, or even specify a rel="nofollow" tag. The module is very easy to use, but there is a small trick to getting it set up. Watch the video to see how it's done and start customizing your links in no time!

Nov 12 2018
Nov 12

The Drupal 8 Editor File Upload Module is a great module for allowing your content editors to upload files directly in your website content. If you have ever needed to upload a file, and then include a link to that file, then the Editor File Upload module will be useful. Rather than having to upload the file manually using FTP or through another module, then having to go back to create a link in your content to that file, this module lets you do it all in one step. This saves you (or the other content editors on your site) a lot of time.

Nov 10 2018
Nov 10

The Drupal 8 Image Widget Crop Module is a handy module for allowing your content editors on your website to crop images after they upload them. Have you ever uploaded an image on a website and had it automatically crop the image for you in a way that just looks wrong? This module solves that problem!

Nov 09 2018
Nov 09

Video of Drupal 8 Contact Storage Export Module - Daily Dose of Drupal Episode 215

In this episode, we cover the Drupal 8 Contact Storage Export Module. This episode covers a module that adds additional functionality to the Contact Storage Module (which we covered in episode 213). This module allows you to export your contact form submissions to a CSV file. It's a simple module that serves a very specific purpose. If you need to export your contact form submissions, this is how you do it!

Check out the Code Karate Patreon page

Oct 31 2018
Oct 31

In this episode, we cover the Drupal 8 Linkit Module. This module extends the link functionality of your Drupal 8 WYSIWYG editor (like CKeditor) to make it easier to link to other pages on your website. Rather than having to go find a page on your website you would like to link to, copy the URL, and paste it in the link field, this module allows you to do it in one step!

Check out the Code Karate Patreon page

Oct 30 2018
Oct 30

In this episode, we cover the Drupal 8 Contact Storage Module. This module extends the Drupal 8 core contact module by saving the contact entries in the database. This makes it easy to go back and view, edit, or delete any of the contact form submissions on your Drupal 8 site. It's a handy little module that can save you from needing to install a more fully featured form module (like Webform or Entity Forms).

Check out the Code Karate Patreon page

Oct 29 2018
Oct 29

In this episode, we will cover five different ways to download and install modules in Drupal 8. Yes, that’s right, FIVE different ways! If you are just getting started with Drupal or are transitioning from Drupal 7 to Drupal 8, this is a great place to start. Once you understand all the ways to download and install modules, you can make the decision on which option works best for you.

Check out the Code Karate Patreon page

Oct 28 2018
Oct 28

Lando is what the cool kids are using for their local development environments these days. In this episode, I give you a quick introduction to Lando and show you how it can be used to create a Drupal 8 site in less than a minute. I also show you how you can integrate Lando into your workflow if you are hosting your websites on Pantheon.

Are you using or have you tried using Lando yet? What are your thoughts?

Check out the Code Karate Patreon page

Oct 25 2018
Oct 25

Hello everyone and welcome to another Daily Dose of Drupal, today we are on episode #210. Wow, it's been over three years since I last posted a video, and a lot of things have changed over the last three years, but a lot of things have stayed the same too... after all, you can still follow me on Twitter at smthomas3.

So I'm going to keep this episode short and sweet, but I do have some big news. I'm going to start posting Drupal 8 content, a lot of it. I've been stuck in the Drupal 7 world for a long time, and I just really haven't got the time to put out any new Drupal 8 content. But that's all going to change. So I am going to start posting Drupal 8 content on an almost daily basis going forward. I'm really going to keep doing it until I run out of things to say, and I do have a tendency to ramble on... so we might be here awhile.

So the next big announcement is that everything on CodeKarate.com going forward, and all the stuff I did in the past is all going to be free. Yep, you heard it here first! Just head on over to CodeKarate.com, enter your email, and you will get access to all my ebooks, all the stuff you used to have to pay for. Really I just got to the point where I didn't want to have to save my "best stuff" behind a paywall. I thought it would be better to just post all my best stuff on YouTube and on my website for free. Now what I am asking is if you do find value in what I am posting, head on over to my Patreon page. If you can afford a few dollars a month, it's going to help me to keep posting more and more of this Drupal 8 content. We all know when you get started with Drupal, it can be a little bit intimidating, it can be a lot to learn.

The goal here with Code Karate and the Daily Dose of Drupal is to put out as much Drupal 8 content as possible and try to organize it in a way that someone just getting started with Drupal can understand. So the goal is to keep it free, if you do find value please head over to the Patreon page and maybe just throw in a couple dollars a month, that would be awesome. Also, if you do that, there is a chance you can get a sticker, you can get your own Code Karate t-shirt, and some other cool things for helping me out that you can get by heading over to the Patreon page.

So with this first video, I wanted to mention those few things, but I also wanted to get the discussion going. What are you struggling with in Drupal 8. What's the content or videos that you want to see produced. The goal here is that I'm going to start with doing what I have done a lot in the past which is post videos on Modules and how to use them. But I also want to get into more in-depth topics such as Module development, site building, configuration management, building out Drupal API's to use with either Javascript frameworks or mobile apps, theme building, theme development, any of those types of difficult and in-depth concepts I want to get into that first. I am going to start with the modules and then lead into some of that.

But if you have things with you are struggling with or you would like to see, let me know and hopefuly I can get some feedback from everyone then prioritize what the community in general is really having trouble with. Thanks for checking out Code Karate, thanks for watching this video, and go ahead and buckle your seatbelt because Code Karate is back. We'll see you next time.

Jul 16 2015
Jul 16

Have you ever wanted to create a page on your Drupal 7 website and send it over to a friend or group of people… but you don’t want the general public to see it? You could always set it up so they just log in, but that’s an extra step and not all of the people you want to send this to have user accounts on your site.

If this sounds like you then the Token Content Access Module is just what you need. The Token Content Access Module makes it easy to hide a page and require a unique key to be added to the URL to gain access. This means you can create content, hide it from those pesky anonymous users, and drop that hidden link directly into an email campaign to ensure only subscribers will see the page.

Configuration on this module is simple. Just turn the module on, edit the content type settings, and finally edit the page. That’s really all there is to it.

Jun 24 2015
Jun 24

If you are just getting started with Drupal and are looking for some help on learning Drupal 7. You have come to the right place.

In this simple Drupal tutorial, I will highlight some resources for getting started, provide you some Drupal basics, and then if you are interested, you can sign up for Code Karate's 30 Day Drupal Email series (using the form at the bottom of this post). The email series breaks the entire Drupal 7 learning process into manageable chunks spread out over 30 days. In fact, the Drupal tutorial below is just a simplified version of what you will get in your inbox.

Drupal introduction

First, you might be wondering... "what is Drupal and why should I use it?"

Well, in it's simplest terms, Drupal is an open source content management system (CMS) that can be used to build all different types of websites from simple to very complex. Drupal allows you to create a website and manage all your content, media (images & video), users, and so much more. Drupal is much more than this, but hopefully that gets you pointed in the right direction. Drupal will help you build awesome and extremely flexible websites... that's the best simple definition I can think of.

Now you are ready to learn about some available Drupal learning resources. The link below will take you to a link that discusses some of the various ways to learn Drupal.

Best Way to Learn Drupal

If you are ready to get started right now. Read the following two sections to learn how to get Drupal installed and how to start managing your content in Drupal. If you get stuck or need additional help, don't hesitate to contact me.

Installing Drupal

Objectives:

  • Learn about the different methods for installing a Drupal 7 website
  • Learn how to get a Drupal website installed

There are many different ways to install Drupal. These different ways depend on how you want to develop your site and what type of computer you are using. The first question you need to ask yourself is if you want to develop your Drupal website locally (directly on your computer) or if you want to use a third-party service for developing your Drupal site. You will learn about each of these different options.

Installing Locally

The most common way to get started is to install your first Drupal 7 website directly on your computer. In order to do that, you will need to install some programs to get your own personal web server set up. The setup varies depending on what type of operating system you are using. In the following sections, you will find resources for getting Drupal installed locally for a variety of different operating system.

Installing on Linux

You might wonder why Linux is the first on this list. Well.. perhaps I am a little biased. Either way, below you will find a link that will walk you through how to get a local development environment set up on an Ubuntu Linux operating system. Other flavors of Linux are similar, but may vary a little.

Installing using Acquia Dev Desktop

If you are running Windows or Mac and want a more streamlined option, I would recommend using Acquia Dev Desktop. It provides a simple and seamless experience.

Installing on Mac

Macs are also popular options for developing with Drupal. If you have ever attended a DrupalCon, Drupal Camp, or other Drupal-related event, you will undoubtedly have seen an abundance of Apple logos in every session. Installing Drupal on a Mac is pretty straightforward, just follow the videos below to get your own MAMP server set up. MAMP stands for Mac (the operating system), Apache (the web server), MySQL (the database), and PHP (the programming language).

Installing on Windows

If you are using windows, you will want to install either WAMP (Windows, Apache, MySQL, PHP), or XAMPP. You will find links below for both options.

Installing using Vagrant

Vagrant is a tool that allows you to build an easy to reproduce development environment. This means you will have a consistent development environment that you can rebuild, reconfigure, and essentially destroy as needed. It’s a tool that I along with many other seasoned Drupal developers use. If you are just getting started with Drupal, and you are not a well versed server administrator, you might want to come back to this later. If you do want to check it out, the link below can start pointing you in the right direction.

Installing on an external platform

There are other third party platforms you can use to develop your Drupal website. Some of these are built directly for developing Drupal websites, and others are built to support a variety of other platforms, but still allow you to develop a Drupal site.

Here are some services that provide development environments specifically tuned for Drupal. Feel free to sign up to either of these for free to try them out. They have pretty straight forward documentation on how to create your first Drupal site.

Here are some more general Drupal hosting services that CAN serve as a development environment. I would recommend using the other above options if possible to develop your Drupal site, and keep the options below for when you are ready to launch your site live.

Wrapping up the Install

As you can see there are many options to install Drupal. Unfortunately there is no one right way. It all depends on what you are looking for. If you are in a bind and don’t know what to do, I would suggest trying Acquia Dev Desktop first, and going from there.

Managing Content

Objectives:

  • Learn how to add, edit, and delete content on your Drupal site
  • Learn how to use the content administration page

First, look through the following two articles from Drupal.org:

Now, complete the following steps on your own to try out what you just learned:

  • Create your first few pieces of content on your Drupal site. These could be pages or articles but make sure you have at least one article.
  • Make sure you can find, filter, and edit the content from the Content Administration page
  • View your homepage to see a list of articles you have created. Notice that if you click on the title of the article you get to the full node page. From this page, you will see tabs at the top for viewing and editing the individual node.

Content Management Summary

You have now learned how to add, edit and delete content from your site. Make sure to spend some time trying out the available configuration options when creating content to get a feel for what they all do.

Getting Started with Drupal Summary

You now know how to install Drupal and how to manage content inside of Drupal, but you still have a lot to learn. These first few steps are only the beginning. If you want to continue learning more about Drupal, you can enter your email below to receive an email a day teaching you more about Drupal for the next 30 days. If you want to continue learning right now and don't want to wait 30 days, take a look at Code Karate's Learn Drupal in 30 days eBook.

Good luck on your Drupal journey!

Jun 19 2015
Jun 19

Drush... what a wonderful web you weave. My guess is you have probably heard about this mysterious thing known as "Drush" and are looking to find out:

  1. What exactly is Drush?
  2. Is Drush something that will be useful for me?

The first one is an easy one. Drush is short for Drupal Shell and is a command line tool that makes interacting with your Drupal website a breeze.

The second question is also easy, but first I have a question for you. Do you use Drupal? If the answer is yes... then Drush will probably be useful for you.

Drush: An Introduction

You might be thinking to yourself about now... "but I don't spend hours of my day behind a command prompt". In fact, you might be a little nervous about even having to open a command line window. Don't worry... we will try to take it slow.

I'm convinced that if you do even a modest amount of Drupal development, spending just one hour learning how to use the command line and Drush commands will save you countless hours of time. In the next few sections, I am going to show you how Drush can be used to automate and simplify a lot of common Drupal administrative tasks.

Getting used to the command line

If the command line scares you... don't worry, you are not alone. At one point many years ago I was thinking the same thing... "why can't there just be a nice GUI for this?" If you spend a little time learning though, you will quickly find out that it's not as bad as it seems and it can save you a lot of time.

If you are not familiar at all with the command line, below you will find a quick tutorial that will help you get started. If you are already familiar with using the command line, you can skip this section.

Special Note for Windows Users: Sometimes it's tough to be a Windows developer... This is also true if you want the best experience using Drush. You "technically" don't need to install any additional programs to get started, but I would recommend installing Msysgit and getting it to work with Drush. This tool will provide a much better and more powerful command line experience. Msysgit will allow you to use a Bash shell (just like your Linux and Mac friends).

Opening up the terminal

It's now time to open up the terminal. If you are using Windows, open up your shiny new Msysgit program. If you are using Mac OSX, open up your Finder, select Applications, then Utilities, and find Terminal.

Oh... If you are using a flavor of Linux (like I am as I write this)... wait who am I kidding. You already know how to use the Terminal... go ahead and skip this section!

Some basic commands

Don't be intimidated by the contents of the terminal window (or the lack thereof). Simply get started by typing in a simple command. Go ahead and type:

ls

Then hit Enter.

You should now see a list of the files in the current directory. This is no different than browsing your files on your file system. Now try:

pwd

This command stands for "print working directory" and will print out in the terminal your current location. The next step is navigating, you can do this using the cd command. Go ahead and run the following command:

cd ..

This tells your terminal to "change directory". The .. tells the terminal to go up one folder. You can use the pwd command to see your current location.

If you want to go back into the folder you just navigated out of, try this:

cd [folder-name]

Replace [folder-name] with the name of the folder you want to navigate into. Note: Once you start typing the folder name, you can hit tab to auto-complete the name for you. You will use the tab key often when you are using the Terminal to save you time.

Those are the basics, but there is a lot more to learn. Here are some other commands you might want to try out.

Command What it does cd This command on its own will return you to your home folder (where you started when you opened up the Terminal) touch [file-name] Create a new empty file called [file-name]. Example: touch test.txt mkdir [folder-name] Create a new folder. Example: mkdir myfolder cp [file-name] [new-file] Create a copy of [file-name] and call it [new-file]. Example: cp test.txt backup.txt mv [file] [new-location] Moves a file to a new location. Example: mv backup.txt ../ This will move backup.txt up one folder level. rm [file-name] Deletes the file [file-name]. Example: rm test.txt

Drush: Getting things Installed

The first step is to get Drush installed. Installing Drush is not an overly complicated process, but because it varies depending on the operating system your website runs on, and if you are running the site locally or on a remote server, I won’t go through all of the installation possibilities here.

There is a page on Drupal.org that provides information depending on the type of platform you are installing Drush on. Typically you need to install Drush on the server that is hosting your Drupal website (you can get around this with something called Drush aliases, however, we won’t be covering that topic). For the installation instructions, go to https://drupal.org/node/1791676.

Drush: Downloading and Installing Modules

We are now ready to begin installing some Drupal modules and themes on our new Drupal website. I am going to start with one simple example. Downloading and installing the module_filter module.

Drush Command What does it do? drush dl [project-name] Downloads a Drupal module or theme. The name can be grabbed from the drupal.org project name. For example in https://drupal.org/project/module_filter the project name is module_filter drush en [module-name] Installs a Drupal module. Keep in mind when you download a Drupal module, it may contain multiple modules. You can get the correct module name from the output of the drush dl command.

The first step is to download the module_filter module using the drush dl command:

This command will tell you where the module was downloaded (in this case sites/all/modules/module_filter) and if there are multiple modules that can be enabled/installed.

Now we install/enable the module using the drush en command.

You can also use the drush en command to download and enable multiple modules at a time. Just put a space between each module name when running the command.

Drush: Disabling and uninstalling Modules

There may come a time where you need to disable a Drupal module. If this is the case, you can do so with the drush dis command. You can then uninstall a disabled module with the drush pm-uninstall command.

Drush Command What does it do? drush dis [module-name] Disables a Drupal module. drush pm-uninstall [module-name] Uninstalls a Drupal module.

If you were launching your website and you no longer needed the views_ui module, you can disable the module using drush dis views_ui.

A Drupal module can be disabled, but that does not necessarily mean it is uninstalled. A Drupal module may create additional database tables in your Drupal database or add additional variables to your Drupal variables database table. If you disable the module, those database tables and variables will not be deleted. This means you are able to enable the module later without losing any of your module settings.

The drush pm-uninstall command will completely uninstall your module removing any database tables and variables that the module has stored.

Here we run the drush pm-uninstall views_ui command to uninstall the Views UI module that we previously disabled.

Drush: Running cron and clearing cache

Now you will learn how to use drush to run cron and clear the cache on your Drupal site.

Drush Command What does it do? drush cron Runs Drupal cron process. drush cc Clear the Drupal cache. drush cc all Clear all of the available Drupal caches.

You can manually run the Drupal cron process using Drush by running the drush cron command.

You can clear the Drupal cache using the drush cc command. After running this command, Drush will provide you an option to select which cache you want to clear. In this example we select 1 to clear all of the available Drupal caches.

You can also specify which Drupal cache to clear directly in the drush cc command. In this example we run drush cc all too clear all of the Drupal caches without the extra prompt to choose the Drupal cache to clear.

Additional Drush Commands

Here are some additional Drush commands you might want to try out:

Drush Command What does it do? drush archive-backup Backs up the code, files, and database of a Drupal website. drush archive-restore [backup-path] Restores a Drupal website to a previously backed up state. drush up Updates the modules, themes, and core Drupal code on your Drupal website. This command will also perform any necessary database updates.

Drush Wrap-up

There is a lot more you can do with Drush. You can always get a list of commands by running drush help. You can also use the helpful website drushcommands.com. If you want a helpful Drush cheatsheet, enter your email in the box at the bottom of this page and I will send you mine! I will also send you some additional Drush commands and getting started ideas.

Jun 14 2015
Jun 14

Are you testing your site? Until recently, we weren’t and it was costing us. Every element on your website should have a meaning and if you aren’t testing it against something else how can you be sure that you are maximizing your results!

Welcome, Optimizely. Optimizely is an A/B testing tool that allows you to modify the HTML and CSS of your website to test different website elements. The configuration for this service is limitless. After you configure an Optimizely experiment you then get to look at the results and determine how each element worked best on your site. Remember, knowledge is power and Optimizely sure give you a lot of knowledge.

How does this relate to Drupal? Well, if you use the Optimizely Drupal module you are able to specify which pages you want the Optimizely Javascript to load on. By default, optimizely will load the Javascript file on every page. The problem with that is your experiment most likely is only on one page. Loading a Javascript file on pages without an experiment running is wasteful and slows down page load time.

Jun 07 2015
Jun 07

What if you had to go build a Drupal site on a remote island without WiFI? Yes that's right, no internet connection at all? What modules would you bring with you?

For some random reason, I posed this question to myself and came up with these 4 modules. Because I believe these modules can be used to build a multitude of complex Drupal sites, I think of these modules as the "Ultimate Site Builders Toolkit". Become an expert in these modules and you will be able to build some wicked awesome and complex Drupal 7 sites.

Module #1: Views

The Views module was, of course, my first choice. How can it not be? I use this module in every Drupal 7 website I build. Most people know that the Views module is great for creating lists of content. However, not everyone knows the intricacies and complexities of views. Once you start learning about relationships, contextual filters, and aggregation, it opens up a whole new world of possibilities.

If you are going to build a complex Drupal website on a remote island... you are going to want to take Views with you.

Module #2: Panels

This one will be the most controversial. After all, everyone has their site building layout tool of choice. For some, it might be Display Suite, Context, or some other Drupal module... but for me, it's Panels hands down, without a doubt. I know it can be a little heavy-handed at times, but it's packed with a plethora of features that make any site builders worst layout nightmare a breeze.

If you are just getting started with Panels it can seem a little intimidating at first. There are so many things you can do with the module. Once you master the basics and start understanding contexts, relationships, variants, and visibility rules, the options really start to open up. If you know what these are and how they are used, you can master almost any layout with ease.

I am packing the Panels module in my suitcase when I head for that remote island. Quick question... does this remote island have a nice beach? I sure hope so...

Module #3: Rules

When you say to yourself, "when this happens, then I want to do this" that is usually a solid foundation for a rule. Rules can do so much that sometimes the true test is to learn when to not use them. I can't tell you how many developers have contacted me asking me to help them get the rules module to do something that could easily be accomplished with views, panels, and entity references.

If you do master Drupal rules, you can accomplish some pretty awesome things.

Remote island... Check. Rules module... Check. What to do when my laptop battery runs out.... Unknown.

Module #4: Entity Reference

Used correctly, the entity reference module allows you to build complex and interconnected data structures. This one module helps turn Drupal into a content and data modeling tool. You might be wondering what is so great about relating content with entity reference? Well, content doesn't live on an island (even though I am on one in this figurative thought exercise). This means content is connected to other entities (nodes, users, etc) on your site in sometimes complex ways. The Entity Reference module makes this possible.

The Ultimate Site Builders Toolkit Summary

Arming yourself with great working knowledge of these modules will make you absolutely lethal when it comes to completing complex website requirements. Did I mention you can do this without having to write a single line of PHP code?

How do you rate yourself on knowledge with these modules? If you want to become a better Drupal site builder (without having to write code), then leveling up your skills with these modules is one of the best ways to spend your time.

It's your turn to take the #IslandOfDrupal Test

So now I pose the question to you, if you had to go build a Drupal site on a remote island without WiFI, what modules would you take with you?

Go ahead and take the #IslandOfDrupal test yourself and post your answer in the comments below (and try to keep the number of modules below 5)... This should be interesting!

Also, please share this post with others in the Drupal world.

May 30 2015
May 30

Awhile back I posted a video on setting up a Drupal sub-theme. If you want, you can check out that video here. I think that the video does an alright job of explaining the steps you have to take to get a sub-theme to work properly. I don't however think it provides enough of the setting up a sub-theme "meat" needed to begin. The saying goes, the devil is in the details. Personally, I never liked that quote, but it is fitting here. Anyway, if you're looking to get a full in-depth guide to setting up a Drupal sub-theme, you, my friend, just need to keep scrolling.

Let's begin.

What is a sub-theme anyway?

This seems like the appropriate place to start. Drupal has two types of themes; you have a base theme and a sub-theme. A base theme (Zen for example) provides basic theme design and functionality. The work has already been done for you. Cha-ching! A sub-theme provides all the unique design and functionality. A sub-theme where you get to build the exact website of your dreams.

If you're still confused, try thinking of it this way. Let's assume a base theme is the basic vanilla ice cream cone. A plain vanilla cone is still a cone. You could eat it up and leave happy, but what if you wanted to add some strawberry syrup? Adding the strawberry syrup is like adding the custom design to your site. So instead of having to create the entire cone (remember the vanilla was already provided) you just have to add the strawberry syrup or whatever you want to build the ice cream cone you desire. Drupal base themes and sub-themes work exactly like this. Using a base theme will provide you a lot of the design and functionality you need and then you can use a sub-theme to design the site exactly how you see fit.

Are all base themes created equal?

This is kind of a hot topic with designers in the Drupal community. In my opinion, the answer is nope. Every designer has their personal preferences to which base theme to use. Some of the most popular base themes are Zen, Omega, Fusion, and Basic. Personally, I use Zen. Any theme can be made into a sub-theme. This makes choosing a base theme endless. If you're just getting started with designing in Drupal, it is best to spend some time working with a variety of theme to find which theme works best for your coding style. Here a few reasons why Zen works for me.

  • Widely supported and used (over 1.5 million downloads)
  • Responsive out of the box
  • Supports SASS
  • Follows a concise file structure
  • Easily customizable

Downloading and enabling Zen

Let's start with getting Drupal Zen installed. You will want to go here and download the newest recommended release of Zen. To download, simply click on the either the .zip folder or .tar.gz folder. Once the download is complete go ahead and extract (unzip) the folder.

Note: I'm assuming you're using Drupal 7. If you're using a different version of Drupal things aren't going to work exactly the same.

Next, we need to move the folder onto our site. If you don't currently have a site setup, you can follow along with this video on setting up a site using Blue Host. If you have a site created already use your FTP client and move the folder into the sites/all/themes folder.

You want to place your base theme here as this is the folder that Drupal will look for your sites themes. If you want, you can download other base themes and move them inside the sites/all/themes folder. That's it, well at least for the Drupal base theme.

I'll add a little sub-theme to my base theme, please

This is where things start to get exciting. By exciting, I mean that in the nerdiest of ways. With the base theme installed, go ahead and navigate to the folder labeled Zen. Within the Zen folder, you will see a folder labeled STARTERKIT. This folder is our sub-theme. One thing of note, Zen provides you a sub-theme some of base themes will not. This is just another reason Zen is a great option!

Which the STARTERKIT folder selected go ahead and cut and paste the folder within the themes folder. Yep, this is the same place you put the Zen base theme. So when you are done, you should have two folders under the themes folder, one for Zen, and one for STARTERKIT. It is super important that these both are on the same level. If they aren't on the same level, then Zen won't know how to reference the sub-theme you will create.

Getting into the sub-theme details

Things are progressing nicely. We now have our base theme and sub-themes installed and in the right locations. Now we are going to look at configuring the sub-theme.

The first thing I like to do is rename the STARTERKIT folder to something a little more meaningful. You can name the folder however you want, but a few things to keep in mind is to avoid spaces and use a name that represents the site your building. For example, I like to use the company name the site is for.

There are few files that will need some attention. The first file you want to look at is the STARTERKIT.info.txt file. An info file is a static file for defining and configuring a theme. Before we edit the contents of the file go ahead and rename the file. For consistency sake, I always name the info file the same name as my sub-theme. So if I named my sub-theme codekarate, my info file would be named codekarate.info. You can go ahead and get rid of the .txt extension also.

There is more in the .info file then I am going to cover in this post. If you would like more information about the .info file, just make sure to let me know in the comments below.

Within the .info file go ahead and change the name and the description to something that fits your sub-theme. For the description, it's could practice to include information as to what base theme this sub-theme is using. So for example you description might look like this: "A custom theme for [store], based off of Zen.". Take this for what it's worth, it's 100% preference. For now, that is all you need to change within the .info file.

Still within the sub-theme, open up the theme-settings.php and template.php files. Within both of these files, you want to change EVERY instance of STARTERKIT to your theme name. For my example, I would replace STARTERKIT with codekarate. It's important that this matches EXACTLY to your theme name. A little hack is if you use the find and replace feature you can pretty quickly replace all of those instances.

Customizing the look with templates

We've spent a lot of words to get to this point. Thankfully, you're so close to the finish line. Before you click off and start building, I want to show you one more thing.

Zen works off of templates. These templates use HTML and PHP to control how the content is displayed on the site. There are templates for a variety of different sections of your site. Each of these templates controls the HTML structure and what pieces of content get displayed. They are super powerful. Here's the but. Since you are building your own custom sub-theme you don't want to just rely on the templates provided by the Zen base theme. You want the control, now let's take that control.

Within the Zen folder, locate a folder called templates. Inside of this folder are all the templates that control the layout of your site. Go ahead and copy the html.tpl.php and page.tpl.php files and paste them within your sub-themes template folder.

To modify ANY template you HAVE TO HAVE the html.tpl.php file within your sub-themes template folder. If you don't, no changes will take effect. Also, by default if you don't copy a template from the base theme to your sub-theme Drupal will remain using the template in the base theme.

Don't mess with Zen

So you might be thinking why would I mess around with creating all this sub-theme stuff when Zen provides me everything I already need. The answer resides in Drupal being an open source technology. Since Zen was built and continues to be enhanced by a group of individuals, there will ultimately be improvements/updates that you will want. If you start to "hack" the Zen base theme, then you import those new updates all of your changes will be erased. Not good. Just save yourself the headache and late nights and avoid modifying any base theme.

Wrap it up already

Hopefully, now you have strong understanding of what it takes to set up a sub-theme. There are a few steps that need to be taken, but like anything if you do it a few times it becomes second nature. As Micheal Jordan famously said, "You miss 100% of the shots you don't take." Take the shot and create something beautiful.

Do you use a different base theme? Which one, why, what's different? Let me know in the comments below.

Happy Coding.

May 21 2015
May 21

Normally, I would do this video style, but I'm a wildcard people and today we write! Thanks to one of our Code Karate supporters, Pieter, I am going to walk you through how to use Drupal views, date and content types to automatically hide/show nodes based on date field. Let's get started.

Make sure that you have Drupal Views installed. If you're new to Drupal, Views is like oxygen to humans, you REALLY need it. Also, you can learn more about Views by watching this Drupal views video. Also, I installed the Drupal Date module. I will use this module to set the date for the node (explained more below). Besides Views and Date, you shouldn't need any other modules besides what already comes with Drupal core.

For my example, I am going to display a list of training times people could sign up for and then once the training session has passed the view will no longer show that training. Make sense? Let's build!

A quick note before we get ahead of ourselves. When you enable the Date module, make sure that you enable Date, Date API, Date Popup, and Date Views. These additional modules will make your life a little easier. You're welcome.

I think we're ready. To start, I am going to create a training content type. For the fields, I am just going to keep the defaults Title and Body and add additional field training date. Naturally, you can add other fields that fit your unique situation, but for the purpose of this example we won't need any other fields.

With that content type, I am going to create five different nodes. Each of these nodes will have a different date. For the sake of showing how to hide content based on date, I am going to make one of the nodes have a date in past. This node will be used to prove that my view is only showing training dates in the future.

With the nodes created, we now need to create a view. Before we start excluding dates from showing in the view, let's make sure we get a view that displays all the content we want. To do this, make sure you add all the fields you want for the training content type. For me, that means I have added the Title, Body, and Training Date fields. Also, under the Filter Criteria section I have limited it to only showing training content types. Doing this will show that I can display all the training content.

Next, we need to add a filter that will only show the training dates that are in the future and exclude those that have already happened. Remember, in my example I have added a date in past for my 1st training node. If the view is built correctly it shouldn't exclude the 1st training node, but still show the remaining four training nodes.

The first step to do this is to add a filter to your view. For the field, you will want to select the Training Date field (or whatever field you are using for the date). For the settings, keep everything default except for the granularity. I change this to be minute. The reason for this is because I want the training to be available to be seen right up until they start. If I kept the granularity at a day, it would be hidden at the beginning of the day.

The filter criteria are where we do the filtering for the view. In other words, this is what is telling the view to show or not show. Again, the goal is to hide old training once the date and time have passed. To do this, select the Is greater than operator and change the drop down to Enter a relative date. Within the relative date text field, enter "now". Why now? Now is a PHP date format that specifies the current date and time. So "now" is an always changing value, which is exactly what we want. There are tons of other PHP date strings that you can use if "now" isn't exactly what you are looking for. To learn more about those formats just go here.

That is it! Once you save your filter go ahead and take a look at the view. Again, if done correctly, we shouldn't see the 1st training node as that contains a date field less than "now".

Hopefully, you were able to follow along and get your view and content displaying correctly. Remember, you can use other PHP date formats to show/hide content based on your unique situation. There are an almost unlimited amount of possibilities.

This was a very simple way to filter content. Do you use a different way? If so, share it in the comments below.

Until next time, Happy Coding!

May 10 2015
May 10

Taking a content type and displaying it in a Drupal View is core to any Drupal website. If you are new to views, you can check out our Drupal views video. As you venture into views you will learn hundreds of ways to manipulate content to change the way the end user is able to interact with the content. To help enhance this, you can use the Views Isotope module. This module uses the jQuery isotope library to dynamically filter views content. As the title states, it’s pretty fancy.

To get an idea of what the library does visit the website for the library at http://isotope.metafizzy.co.

Links:
jQuery Views Isotope Module: https://www.drupal.org/project/views_isotope
jQuery Views Isotope Library: http://isotope.metafizzy.co/

May 01 2015
May 01

As a request from David over at luxor.me, we checked out the Mmenu module. This little gem allows you to use various javascript libraries to create a mobile friendly navigation. The navigation it produces is similar to the slide in menus you find side a lot of mobile applications.

Setting up this module isn’t the easiest thing in the world of installations. To get the module fully functioning you need to install the Drupal module plus 4 separate javascript libraries. The libraries and the links to those libraries are included below. Also, if you check out the module page you will see the creator added some basic documentation as well. This is worth checking out.

Word of caution, when you install the jquery.menu library make sure to use version 4.7.5 and NOT the latest 5.0 version. Not entirely sure why the new version doesn’t work, but trust me it doesn’t. Use 4.7.5 and you will avoid an unnecessary headache.

Links:
Mobile Sliding Menu: https://www.drupal.org/project/mmenu
Mmenu Installation Guide: https://www.drupal.org/node/2324017
Jquery.Mmenu (Use Version 4.7.5):https://github.com/BeSite/jQuery.mmenu/releases
hammer.js: https://github.com/hammerjs/hammer.js
jquery.hammer.js: https://github.com/hammerjs/jquery.hammer.js
Icomoon: https://www.drupal.org/files/mmenu-icomoon.tar_.gz
JQuery Update - https://www.drupal.org/project/jquery_update
Mmenu - http://mmenu.frebsite.nl/

May 01 2015
May 01

Sometimes you have a situations where your normal Drupal administration menu just won’t cut it. Maybe you have someone that needs to perform some administrative tasks on your site such as managing content and comments, or perhaps something more complex such as managing the Drupal blocks. This person might be a technical wizard, but there is also a good chance that they might not be. In fact, they might be the person in the office that calls you when their “computer is broke”.

If this is the case, then the Administration Menu Source module might be your saving grace. This module works with the Admin Menu module to allow you to specific different menus for the different user roles of your website. This makes it really easy to fine tune the usability of your site’s administration navigation to cater to specific types of users.

If you have multiple types of administrative roles that perform admin or managerial tasks on your Drupal site, go ahead and give this module a try. It’s easy to set up and will make things a little easier to find for everybody involved.

Note: Make sure to give the correct roles the "Access administration menu" permission so they can view the admin menu.

Apr 17 2015
Apr 17

In this episode we cover an overview of the Drupal 7 Views module. The Drupal Views module is probably the most popular Drupal module and is installed on almost every Drupal 7 website I build. It’s so popular in fact that it’s included in Drupal 8 by default.

The Views module allows you to easily build and format lists of content on your Drupal 7 site. If you need to build a simple list of Nodes, Views can do that. If you need to build a table listing, Views can do that too. In this video, we will go through an introduction and overview of Views, as well as a few example views. You will learn about the different types of content you can display with Views, different display settings, and other Views options.

This video is built to be an introduction for beginners and newcomers to Drupal to teach the basics of the Drupal 7 Views module. In this video you will create two views. The first will be a page view that displays a list of articles on your Drupal website. The second will be a block view that shows the titles of the last three articles on your Drupal website. Using the skills you learn in this video, you will be ready to tackle more complicated problems that can be solved with views.

Now go out and build yourself some views!

Apr 15 2015
Apr 15

Update: If you are looking for a written article, check out Master your Drupal Sub Theme.

In the final video of the 3 part series, we look at creating and configuring a Drupal sub-theme. Specifically, we will be created a sub-theme based off of the Zen theme. If you aren’t familiar with Zen, it is a very popular base theme used by thousands of designers as a starting point when building a custom website theme.

So what is a base theme? A base theme is simply a theme that's default stylings can be used IF the sub-theme doesn’t override it. In other words, a base theme provides the frame of the house and a custom sub-theme provides the finishes. You might be thinking why not just modify the Zen base theme. While you COULD do this, it is NOT recommended. The main reason you would avoid this idea is because when Zen gets updated by the community and you want to pull in those new changes (updates) you will override all of your custom work within those files. That is not good. If however you use a sub-theme updates will never occur, unless you yourself do them.

In the video, I walk you through getting both a zen base and sub-theme created. During this video, you will learn which files need to be modified to correctly tie in your sub-theme with Zen. Lastly, I will show you how you can add template files (the files that control the structure of the site) to your sub-theme. Knowing how to modify these files is crucial to being able to have complete control over the structure of your website.

Apr 13 2015
Apr 13

In part 2 of the 3 part series, we are looking at how get a Drupal website and database setup and running. If you followed part one, you will remember we are doing this all on our local environment using MAMP. As the video will show, we begin by going to Drupal.org/project/drupal and downloading the newest version of Drupal. At the time of this DDoD, Drupal is at version 7.36. It’s important to note however, Drupal 8 is available but at this time isn’t at a stable enough point in our opinions to work on.

After you get Drupal downloaded, you begin to work on setting up a database using MySQL. In the video, I show you the correct steps to creating and populating the database to reflect all the Drupal database tables that must be created. This part of the process can end up being somewhat tricky as you have to follow a particular set of steps. Each of these steps is explained in detail. Lucky for you.

Once the database is installed you begin to walk through an installation profile. After setting up the profile, you’re done! At that point, you will have a fully functional Drupal website. In that last video of the series, I will take you through how to build a Drupal sub-theme.

Apr 09 2015
Apr 09

If you are building out a Drupal 7 site you may some day run into a situation where you need to have more dynamic options for a field attached to a content type (or any other type of entity). If the default allowed values text area will not work for your situation, then you have come to the right place. In this tutorial, we will discuss two different ways to create a more dynamic options list for extending your allowed values.

Method 1: Entity Reference

The first and most common reason you will need a dynamic options list is to reference some other type of entity or content on your site. This is easily manageable through the Entity Reference module. You can use the Entity Reference module to create a field to reference to any other type of entity. I have many other posts/videos on the Entity Reference module so I won't spend much time on it, but it's a great module for any Drupal site builder to become familiar with. I use it on almost every complex Drupal site I work on.

Method 2: Change the allowed values function of your field

The method requires a little module development/PHP skills. This is useful if you need to pull in your options value from some other database table (maybe a custom built one or one created by a contrib module).

In order to easily follow along with this you will need to be using the Features module to export your field to a Feature module. I have many posts/videos on the Features module and an entire section of my 5 secrets ebook that covers how to use Features on your Drupal websites.

So the first step is to create your Feature module making sure to select the field that you want to create dynamic options for. Once that is finished you will have to make changes to some of the exported Feature module code.

What! Change the Feature module code?

You might be thinking "It doesn't seem like a good idea to change the code generated by the Features module". You would be 100% correct in this thinking. It's typically not a good idea to change the code of a Feature module. However, the Features module does a pretty good job maintaining custom changes you make (depending on where you make the changes).

For instance, I commonly use the .module file generated by the Features module to add simple helper functions or form alter functions that are directly related to the exported Feature module. This allows me to keep the related code with the related Feature. I have seen a lot of developers create a Feature module and a custom module for the related code. While this typically works OK the main problem with this is that now you have a custom module that depends on the Feature module, and the Feature module that might depend on the code of your custom module. This gives you a strange circular dependency situation. To avoid this, just add your code to the module file (just don't remove the includes line of code at the top). Trust me... it's safe to do this and sometimes it makes a lot of sense.

To change the allowed values of a field, you will need to find the file that was created and ends with .features.field_base.inc. So if your module is called my_feature_module you will need to open my_feature_module.features.field_base.inc.

Search the file for the field you created and whose options you want to control. It should look something like this:

// Exported field_base: 'field_my_feature_module_options'
$field_bases['field_my_feature_module_options'] = array(
  'active' => 1,
  'cardinality' => 1,
  'deleted' => 0,
  'entity_types' => array(),
  'field_name' => 'field_my_feature_module_options',
  'locked' => 0,
  'module' => 'list',
  'settings' => array(
    'allowed_values' => array(),
    'allowed_values_function' => '',
  ),
  'translatable' => 0,
  'type' => 'list_text',
);

You will notice there is an allowed_values_function element in the array. In this case, you will want to change that to a PHP function that you will need to create. So in this case we are going to create a function called _my_feature_module_options_list (this could be any function name you want). Also make sure your allowed_values element is set to an empty array.

'settings' => array(
  'allowed_values' => array(),
  'allowed_values_function' => '_my_feature_module_options_list',
),

You are now ready to create your function. Simply open up your .module file (in this case it would be the my_feature_module.module file) and add your function. If you want to create static values, your function will look like this:

function _my_feature_module_options_list() {
  return array(
    'option1' => t('Option 1'),
    'option2' => t('Option 2'),
    'option3' => t('Option 3'),
    'option4' => t('Option 4'),
  );
}

If you wanted to pull values from a database table it might look something like this:

function _my_feature_module_options_list() {
  $results = db_query("SELECT value, label FROM {my_custom_table}");
 
  $options = array();
  foreach ($results AS $result) {
    $options[$result->value] = t($result->label);
  }
 
  return $options;
}

In order to get this to work you will need to make sure your Feature module is enabled on your site and ensure it gets reverted back to the default state. Once you do this, your values should be dynamically created by your custom PHP function.

Summing up using the allowed values function

From my experience, I have never had an issue with the Features module overwriting my allowed_values_function setting. It's a pretty rare situation where you will need this as most use cases are covered by either a static allowed values list or can be handled by the Entity Reference module. If you do find yourself needing a dynamic list of options controlled by a PHP function, then the method presented above provides an easy solution.

So go ahead and make those allowed values dynamic and let me know what you think.

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web