Theming Drupal 8

By September 2nd 2016 11:10 am
Vox loves Drupal 8

Vox Teneo started working with Drupal 6 at the beginning of the decade. At start learning Drupal was a bit of a challenge because of the different development concept than other popular CMSs at the time like WordPress and Joomla. With time we made Drupal our main CMS choice for the upcoming projects. The type of the projects went from Corporative websites to Intranet with a lot of content, users, and every one of them multilingual. Currently we are preparing for the first big Drupal 8 project, and to put all the greatness of the CMS in action.

Few weeks back we held an in house training on “How to install Drupal 8”. For the purpose of the training we have prepared a few simple custom modules we would like to share with you, so you can create a small project to test “the 8” yourself. The trainer on this event was Martin Taleski, a Drupal developer and a member of the Drupal community for over two years. Martin held a presentation for his Drupal 8 website, and a workshop on how to build a small and basic Drupal 8 website. We put Martin’s presentation “on paper” so if you are interested in building a Drupal 8 website, this is a good start for you.

If you have never installed Drupal 8 before, here is a 10 minute video tutorial.

https://www.ostraining.com/blog/drupal/install-drupal-8/

After the installation of the test site locally, create a custom theme, or just download it from this link: https://github.com/taleskimartin/drupal8test/tree/master/themes/vox_custom

Put the “vox_custom” folder in the “themes” folder in your project.

ScrShot_1

This structure would do for what we want to achieve:

folders:

  • css
  • fonts
  • images
  • js
  • lib
  • sass
  • templates – all twig files

files:

  • screenshot.png
  • vox_custom.info.yml
  • vox_custom.libraries.yml
  • vox_custom.theme

Quick overview of the files:

In “vox_custom.libraries.yml” are defined the css/js libraries that you will use in the project. You will include a jQuery library because Drupal is not loading anything out of the box.

“vox_custom.theme” will be empty for this project, you will not use any preprocess functions for the twig files.

In “vox_custom.info.yml” goes all the info: name description and also very useful “thing” for me,

“stylesheets-remove”. You should remove all the core css that comes automatically from Drupal core, because you are doing custom theming. In “vox_custom.info.yml” you should add theme “regions”.

Quick overview of the folders:

css , fonts , images , js and sass folders are straightforward.

In “templates” folder we have all twig files organized in subfolders like layout, node, views.

Disabling the cache

In the browser logged as admin go to “yoursite”/admin/config/development/performance you should disable everything

ScrShot_2

so when you are in development you get the latest changes not some cached data.

Also on “yoursite”/admin/config/development/logging make sure you get messages so you can easily find the problem if there is some.

And you are not done yet with disabling the cache :). Go to the Drupal root folder and in “sites” folder edit “development.services.yml” and add this code at the end

parameters:

twig.config:

debug : false

auto_reload: false

cache: false

`ScrShot_3

We will add additional “settings” file just for local usage, “settings.local.php”, you can download it here
https://github.com/taleskimartin/drupal8test/blob/master/settings.local.php

You need to put it in “sites/default”. In the same directory you will need to edit “settings.php” and add this code at the end

if (file_exists(__DIR__.’/settings.local.php’)) {

include __DIR__.’/settings.local.php’;

}

After this you will need to clear cache in the admin area, on the same link from above  “yoursite”/admin/config/development/performance, and we are done with the cache, we can continue with development.

Next you need to enable our theme in the “Appearance” section in the admin area,

ScrShot_4

“yoursite”/admin/appearance, then you can play with the twig files in the theme and try to edit them.

After enabling the theme the homepage need to look like this

ScrShot_5

Now we will play a little with the modules…

There are 2 custom modules here:
https://github.com/taleskimartin/drupal8test/tree/master/modules

The first one that we will play with is “vox_custom” and it is generating jquery tabs for all the articles in the site.

Create 3 Articles, in “yoursite”/node/add we add “Article” and the first one name it “Article 1”, there needs to be some text in the body field, so we will use lorem ipsum generated text, and some dummy image for the image field. Repeat this 3 times.

After finishing with the articles create one Basic Page and l list all the articles. You need to add URL alias, it needs to be “/all-articles”, and this will be used for the block.

ScrShot_6

So, now there are 3 articles and 1 basic page, what you need to do right now is to add the block that is generated from the “vox_custom” module in some region. You have to “Block layout” on “yoursite”/admin/structure/block and use “Content” region to place our block. When you add the block, please put it at the bottom of the blocks in the “Content” region, it looks better that way :). At the end you need to have same as the picture below

ScrShot_7

After you press “Save” (otherwise you will lose the block) go to the “Configure” and in the “Visibility” section chose “Pages” and enter the url path from the basic page that you have just created, so the block will show only on this particular page:

ScrShot_8

Don’t forget to hit “Save” here.
If everything is OK go on “yoursite”/all-articles and you should get something like this
ScrShot_9

Also you can move “Main navigation” block from “Header” region to “Navigation” region in the “Block layout” and then you can use the menu nav at the top left corner.

The second module is generated via terminal and is called “Tralala” . The module is generating custom route in the MVC approach, so if you have some base knowledge you can play with it also, it just prints the string that you will put on this url “yoursite”/tralala/hello/voxteneo or “yoursite”/tralala/hello/anyOtherString
ScrShot_10

This is the end of the tutorial, now you are on your own, you can try everything, break something, fix it and learn from it.

Drupal 8 is the most massive open-source CMS ever build, still there is a lot of things that need to be done in the system, but looking in the complexity of it, the current status is super good.