Feeds

Author

Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Jul 28 2020
Jul 28

By default, Drupal implements a "node/nid" URL path system. When you create your first node in Drupal 8, the default URL path looks like ”/node/1”, and the next one will look like “/node/2” and so on. This not user-friendly nor is it very SEO-friendly. Search engines always prefer URLs that are more descriptive of the page content, clean and legible. Using the Drupal 8 Pathauto module, you can obtain a path that looks like this -> "/category/my-node-title". The Pathauto module also eliminates the need to manually create path aliases for every type of content on a Drupal site. When you have an existing site with plenty of content, you can leverage the Bulk generate option in the Drupal Pathauto module to automatically generate aliases for them in a jiffy. Let’s learn how to configure and implement this time-saving Drupal module. The Pathauto module is also Drupal 9 compatible.

Drupal-Pathauto-Module

What does the Drupal Pathauto Module do?

The Drupal 8 Pathauto module enables automatic generation of URL/path aliases for different kinds of content like nodes, taxonomy terms and users. All of this without the need for the user to manually enter the path alias. So instead of a URL that looks like /node/1, the Pathauto module lets you create URL aliases like /category/my-node-title. Thus, giving your users a much better idea on what to expect from the web page. Without Drupal Pathauto, creating a URL structure is time-consuming and error-prone. The site admins can specify a pattern to follow for different types of content. The Bulk generate option lets you automatically generate or regenerate aliases for pre-existing content as well. 

Getting Started with the Drupal 8 Pathauto module

Installing

Installing the Drupal 8 Pathauto module is like installing any other contributed module. I’m using the Composer to install since it automatically installs all of the necessary dependencies and Drush commands to enable the module. However, if you choose to install manually, make sure you also have the latest versions of the CTools and Token modules installed. 
Open the terminal, within the project enter the following command.

      $ composer require drupal/pathauto

      $ drush en pathauto

Configuration

1.    Create Drupal URL alias Patterns 

  • Configure Pathauto patterns as required in Configuration -> URL aliases -> Patterns.
  • Click "Add Pathauto pattern"
     Drupal Pathauto Configuration
  • Select the Pattern Type. For example, if you are generating URL aliases for nodes, you should choose “Content” as the Pattern type.
  • Add the path pattern to the textbox, and you can browse available tokens for the pattern. When you click on the link, available options will show up. For example, I used the [node:title] pattern. So, the URL will be http://yourdomain.com/node-title
  • Select content type or you can also leave it empty. This pattern will be used for all content from the Content Type dropdown.
  • Enter the Label field which helps in identification of the pattern.
  • Hit the Save button. 
     Pathauto-Module   
  • Back on the Patterns tab, you will now see that the Pathauto pattern has now been created
     Patterns tab in pathauto module

2.   Generate Bulk URL aliases

  • Go to the Bulk generate tab for the entity type you want to bulk generate the aliases and click Update.
     Bulk URL Aliases Generation in Pathauto Module
     
  • Now you have created the URL aliases automatically.
     Pathauto
  • Now Click on one of the Alias just generated and the page will display the Content with the user-friendly URL as shown below

     Url Generated

3.   Deleting Aliases

You can also batch delete aliases from the “Delete aliases” tab. You can either choose the entity types you want to delete, or you can bulk delete all aliases. You can choose to delete the aliases that you automatically generated. This will not affect aliases created manually. 

Pathauto-Module
Jul 14 2020
Jul 14

A well-performing website just doesn’t cut it these days. To stand out of competition, businesses are looking for high performance websites with lightning speed load times. You could potentially lose a big chunk of customers with every additional second your website takes to load. Today let’s learn about optimizing the frontend performance of your website with the Advanced CSS/JS aggregation module for Drupal 8.

To make Drupal sites run faster, it is essential to load CSS/JS files as quickly as possible for a page. One problem with Drupal core aggregate is that it is not good at determining which resource (CSS/JS) files go together. So, when you have different pages that require different resource (CSS/JS) files, usually Drupal core does it in a way where there is lot of extra information that are unnecessary on certain pages. The Drupal AdvAgg module comes with a plethora of features to help websites render faster. And the module also supports Drupal 9!

What does the Advanced CSS/JS Aggregation module do?

The Drupal AdvAgg module does a lot of different things to help speed up delivery and loading of resource files on your website. Advanced Aggregation combines multiple CSS files and creates fewer CSS files so that sites render faster. It caches aggregated files more efficiently. It also provides more effective methods of compression. Thus helping in offering users with more engaging user experiences.

drupal-8-module

Getting started with the Advanced CSS/JS Aggregation module

Installing

Installing the AdvAgg module for Drupal 8 is like installing any other contributed modules. I’m using the Composer to install since it automatically installs all of the necessary dependencies. Open the terminal, within the project enter the following command - 

      $ composer require 'drupal/advagg:^4.1'

Next, enable the AdvAgg module

Install- Adv-agg-module

 

Configuration tab:

This tab provides several configuration options that are discussed below.

Global Options

Advagg- Configuration

 

  1. Enable/Disable the Advagg module temporarily by checking/unchecking the Enable advanced aggregation checkbox.
  2. Use this option if you want to allow DNS prefetching for external CSS/JS, which tries to settle domain names for links before a user clicks on them. Enabling this can have unwanted effects on site. Keep this unchecked unless needed.
  3. In the Cache settings, we have options like development, low, normal, high caching of resource (CSS/JS) files. High caching stores more data while normal stores less data compared to high. Development caching stores very less data. I'm going with normal here.

Compression options

Compression options-in-AddAvg

This provides Gzip compression and Brotli compression which are the methods used for compressing CS/JS assets.

CSS Options/JS Options

Css-options-JS-Options
  1. In order to avoid multiple CSS/JS files in one page, AdvAgg uses media queries to determine what files are needed on a page and combine them so that they load faster.
  2. Fix improperly set type – This option will fix the problem in syntax, when you are trying to reference CSS and JS files if there are any problem there
  3. If this option is checked, the external stylesheets on the same host are not converted into files.

CRON Options

CRON-Options
  1. Here you can set the minimum amount of time between advagg_cron() runs. The default value for this is 1 day.
  2. Use this option to Delete aggregates that were modified more than the chosen time. The default value for this is 1 month.

Obscure Options

This tab does not contain any configuration options. You can flush the module cache or entire cache in the Operation tab.

Bundler Tab :

This splits your aggregated resource files into multiple bundles of small resource files. With bundler active checked, you have more bundles of small CSS files, it makes sure that it strips anything that's not being used in a given page. Even with the more http request for a resource file you can have overall boost in the performance because of fewer bytes transmission.

Bundler tab

This tab has CSS Bundling and the Javascript Bundling with the same configuration settings.
1. Target Number of CSS/JS Bundles Per Page: Specify the number of CSS/JS Bundles to be sent per page.
2. Grouping Logic: You can select the aggregation logic should go by file count of file size.

CDN Tab:

CDN-tab

Content distribution network (CDN), is a distributed network of proxy servers that helps immensely in boosting website performance and load time. Website content can be distributed to servers closest to the site visitor which makes response and load times even faster.

  1. CDN to use - Choose between a network of server providers Google and Microsoft. 
  2.  Checking Use Minified resources would reduce the bandwidth needed because of the smaller file sizes.

CSS Minification tab:

CSS-Minification-tab

This allows the removal of white spaces, comments, unwanted variable names etc. You can select between the Core minifier or the YUI Compressor, where YUI is better form of compression.

External Minification tab:

External Minification is used when you are using command line compression.

JavaScript Minification tab:

java-script-minifaction

For JS minification select a minifier. Selecting a faster minifier is always better.

Old IE Compatibility tab:

Old-IE-capability

Prevent more than 4095 CSS selectors in the aggregated CSS file - You can modify the value to avoid getting errors from IE Version below 10, where if your CSS has more than 4095 selector IE will not render the page properly.


 

Jun 16 2020
Jun 16

The Devel module in Drupal 8 is an extremely useful module for developers. The Devel module includes three submodules – the Devel Generate module, Webprofiler module and Kint modules. In this article we will delve into the Devel Generate module and how to work with it.

When building a Drupal website, you want to have a lot of content to check the overall display such as layouts, views, design. Content come in different forms and so it becomes important to test the website out with dummy content before adding live content. Instead of creating dummy content manually, wouldn’t it be nice to add them automatically? That’s where the Devel Generate module for Drupal 8 will come in handy. 

Drupal Devel module

What does the Drupal Devel module do?

Drupal 8 offers tons of helpful modules that can ease the job of a developer. Devel module has several useful features. As discussed previously, there are several modules that are part of Devel; One such is the Devel Generate module. Devel Generate is used for automatically generating sample or dummy content like menu items, taxonomy terms, and nodes. This is helpful if you need to test or showcase your Drupal website with data like dummy users, content, images, and so on. Drupal Devel module can create it all for you in a moment. Devel and its associated submodules are meant to be used on local development environments and should not be enabled on live production sites.

Getting started with the Devel Generate module

Working with the Devel module is as simple as installing it. Let’s get started with the installation and how to use Devel module in Drupal 8. 

Installing

Installing the Devel Generate module for Drupal 8 is like installing any other contributed module. I’m using the Composer to install it since it automatically installs all of the necessary dependencies. Open the terminal, within the project enter the following command.

      $ composer require drupal/devel
     
Next, enable the Devel and Devel Generate module. 
devel module in drupal 8


Generate content using the Devel UI

 1. Go to Configuration. Here you will see a long list of options under Development. Choose Generate Content.

devel module in drupal

 2. The Generate content interface offers a number of options to set before you hit GENERATE:

  • Generate content for all content types or select for specific content type
  • Check the checkbox if want to delete all content of a certain content type before generating new content 
  • Specify how many nodes to generate and how far back the node creation dates should go
  • Specify the maximum number of dummy comments for each node that support comments
  • Set the maximum number of words for the title of each node
  • Hit Generate
     devel module in drupal


3. You can see the list of dummy nodes generated by going to admin -> content

devel module

4.This is what an article looks like with a dummy title, image, and body content

devel module in drupal


Helpful hint: If taxonomy and tags are defined, the generate content module will assign tags at random. If you create vocabularies and terms first and then generate the content, you will end up with more useful test data. Devel can generate vocabularies and terms automatically, but they will be in fake Latin. It’s better to create your own vocabularies and terms because it makes testing easier when you have a meaningful taxonomy to work with.

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