Drupal 8

Site has moved

This site has moved to a new location. Visit the new site at http://programsdream.nl.

Localized number format in Drupal 8

By Ronald van Belzen | July 14, 2016

When building this blog I decided to use the core module statistics to display the view count on blog posts. Because some of my older blog posts have had a lot of views, the counter on those blog post views had grown quite large. For making those large numbers more readable it would be nice that those numbers would be displayed with thousands-seperators, just as can be accomplished with the PHP function number_format() or, even better, with the NumberFormatter class. The statistics module does not do that.

As it turns out Drupal 8 core does not support that either, and a sole module that offers this functionality has no Drupal 8 version. I decided to make a solution specifically for the statistics module. That module implements the hook hook_node_links_alter() in the statistics.module file to add the view count to the list of node links (as text). So I set out to create a copy of this hook that would override this particular hook.

The module to which I will add this hook will be named mystatistics:

# mystatistics.info.yml
name: 'My Statistics'
type: module
description: 'Module to override the display of the Statistics module.'
package: Other
version: '1.0'
core: '8.x'
dependencies:
  - statistics

In the mystatistics.module file I added the following code:

Add configuration to a custom module in Drupal 8

By Ronald van Belzen | April 4, 2016

In a previous blog post I showed how to build a simple module. The only thing the module was supposed to do is produce an empty front page. The reason behind this was that no content will be published on the front page of the blog that I build. But when there is no content Drupal 8 displays a text on the frontpage that explains that there is no front page content. I wanted to suppress that behaviour.

There is a module that does exaclty what I needed, but that module is not available for Drupal 8, yet. So, I built my own solution. But what if I wanted to share my solution with others; what would I need to change? The documentation on the Drupal 8 site helps with that. We skip the part that a module name needs to be unique for now, and concentrate on the best practice of making your module configurable.

In the simple My Empty Front Page module there is no question about what can and must be configurable. The path that invokes the empty front page is the only thing we will need to change in a different environment in which the hard-coded path "/empty" has already been taken to produce some other content for that site.

A configuration field

First I create a new subdirectory "module\custom\my_empty_front_page\config\install" in my module directory and in that subdirectory I place the file "my_empty_front_page.settings.yml" with the following content:

empty_front_page_path: '/my_empty_front_page/empty'

This tells Drupal 8 that there is a setting parameter with the name "empty_front_page_path" for the module with the default value of "/my_empty_front_page/empty" (I decided that "/empty" would not be that unique, so I change the default value to a more unique path name). Now we also need to tell Drupal what the format of this variable is, because Drupal will save this variable for us and needs to know the format.

For this reason I create the new subdirectory "module\custom\my_empty_front_page\config\schema" in my module directory and in that subdirectory I place the file "my_empty_front_page.schema.yml" with the following content:

Build a blog with Drupal 8: Part 3

By Ronald van Belzen | March 25, 2016

I installed Bootstrap 3 for Drupal as the theme for my blog, but I want to change and add some minor things to that theme. For that purpose Drupal 8 offers the sub-theming mechanism. A sub-theme is a theme based upon another theme. Because I will base my sub-theme upon Bootstrap, I will call my sub-theme "My Bootstrap".

My Bootstrap sub-theme

In the directory "themes", in which I had already installed the Bootstrap theme, I create a new subdirectory "themes\mybootstrap". In that subdirectory I create a new empty file "mybootstrap.theme" and a file "mybootstrap.info.yml" with the following content:

name: 'My Bootstrap'
type: theme
description: 'My adaptation of the Bootstrap 3 theme.'
core: 8.x
base theme: bootstrap

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

The line "base theme: bootstrap" tells Drupal that this theme is a sub-theme of bootstrap. The regions contain exactly the same regions as the Bootstrap theme on which it is based. This sub-theme is now an exact copy of Bootstrap.

The first thing I want to change is to add some CSS files to the sub-theme. For this I downloaded and saved the fontawesome toolkit to sub-theme subdirectory and in the new subdirectory "themes\mybootstrap\css" I placed a new empty file "mybootstrap.css" for later use.

To make fontawesome and my (still empty) css file available to the sub-theme I add the following to the "mybootstrap.info.yml" file:

libraries:
  - 'mybootstrap/font-awesome'
  - 'mybootstrap/mybootstrap-theme'

The locations of these libraries are defined in the file "mybootstrap.libraries.yml" in the subdirectory "themes\mybootstrap":

font-awesome:
  css:
    theme:
      css/font-awesome.css: {}
mybootstrap-theme:
  css:
    theme:
      css/mybootstrap.css: {}

We are going to use these css files to facilitate some of the changes in the sub-theme.

Build a blog with Drupal 8: Part 2

By Ronald van Belzen | March 24, 2016

I concluded the previous part of this blog with the message that we are not finished yet.

One of the first problems that I am going to tackle is to not display the friendly message of Drupal that "No front page content has been created yet". I would like to install the module Empty Front Page, but it is not available for Drupal 8 yet at the moment of this writing. For that reason I am going to build my own solution by building my own module. I have decided to call that module "My Empty Front Page".

My Empty Front Page

The directory in which I will place the sources is a subdirectory of the module directory: "module\custom\my_empty_front_page". In that directory I first create a file "my_empty_front_page.info.yml" that will provide the Extend page in the Administration section of my site with information about this module.

name: 'My Empty Front Page'
type: module
description: 'My empty front page for Drupal 8 (removes all front end page content when Default front page points to /empty)'
package: Other
version: 1.0
core: '8.x'

Next I need to inform Drupal what controller function to call by creating a routing file with the name "my_empty_front_page.routing.yml" in the same subdirectory.

my_empty_front_page.content:
  path: '/empty'
  defaults:
    _controller: '\Drupal\my_empty_front_page\Controller\MyEmptyFrontPageController::emptyContent'
  requirements:
    _permission: 'access content'

The routing file tells Drupal that for the path '/empty' the controller "MyEmptyFrontPageController" function "emptyContent" needs to be called. The permission tells that the same access permission as for viewing content is to be used. I still need to program that controller in the file "MyEmptyFrontPageController.php" that will be placed in the subdirectory "module\custom\my_empty_front_page\src\Controller".

Build a blog with Drupal 8: Part 1

By Ronald van Belzen | March 23, 2016

A blog might not be the most challenging CMS type that you can build, but for that reason it might be the best first introduction to a new CMS. Not that I would not need a blog. In fact I want to replace my existing blog and at the same time want to get to know Drupal 8. Having a blog already, that I want to replace, makes it easy to define the requirements for the blog Let's write them down and see how Drupal 8 is able to deliver.

Blog requirements

  1. Create blog posts with title, subject and an optional featured image.
  2. The ability to categorize and browse through content by topics.
  3. Basic search functionality.
  4. A tool for authoring content with a WYSIWYG editor that also supports the display of coding examples.
  5. Listing teasers of the blog posts on the front page sorted by date posted; with a pager (showing 5 topics per page)
  6. Browse the blog posts by category.
  7. Visitors must be able to comment on blog posts.
  8. The blog site needs to be responsive.

Now let's see how Drupal 8 meets these requirements.

Installing Drupal

I am not going to describe how to install Drupal. It is just beyond the scope of this blog post. You can find an installation guide on the Drupal site. The operating system, webserver and database you choose do not really matter for this article. But just in case you are curious: I used Windows 7, IIS 7.5 and MySQL 5.6.

I also assume you can find out how to install themes and modules yourself. You can find this information also on the Drupal site.

Drupal 8 comes with the theme called Bartik installed. The first thing I did was to download, install and set as default the Bootstrap 3 for Drupal theme. I will show how to make a sub-theme based upon this theme lateron, but for now I have met requirement 8 without having to build my own theme.

Categorizing blog topics

For meeting requirements 2 and 6 we are going to use taxonomy (which is part of the Drupal 8 core).