2015. március 3.

Drupal

Rebuilding the Cheppers website with Drupal 8: The Age of Innocence

Getting started Luckily, we have only hit a few minor snags in the process so far. For the most part, these first steps in rebuilding our website have been fairly simple, but we will still present them in detail. Any problems we had in this beginning stage were solved relatively easily. There are a few prerequisite steps you must take to begin working with Drupal 8. We usually use drush and make files to deploy our sites and we want to keep using this method with the new Drupal 8 site too.

Upgrade drush

The first thing we learned was that we had to upgrade our drush to version 7 because only drush 7 is compatible with Drupal 8. It is backward compatible with Drupal 6 and 7 so you can safely upgrade. We found two very helpful articles here and here.

Download Drupal 8

After upgrading drush we created a webroot folder and put in a project-core.make.yml file with the content below:

```
api: 2
```
```
core: 8.x
```
```
projects: 
```
```
  drupal:
```
```
    type: "core" 
```
```
    version: "8.0.0-beta6"
```

Then in terminal just type: drush make project-core.make.yml and it will pull the given version of Drupal 8 to the current directory.

Add Install Profile

We decided to make the Cheppers install profile on the base of the standard profile. We added a profiles/cheppers folder to the webroot and copied the content of the core/profiles/standard folder to it. The following files were renamed to cheppers: standard.info.yml → cheppers.info.yml standard.install → cheppers.install standard.profile → cheppers.profile We learned a very important lesson through trial and error after extensive googling with no results. Within the [profile_name].info.yml file add the name of your desired default theme to the themes section. If you don’t do this, your theme will appear among uninstalled themes. So <your_theme>.info.yml should look like this:

```
name: Cheppers
```
```
type: profile
```
```
description: Install Cheppers site.
```
```
# version: 8.x-1.x-dev
```
```
core: 8.x
```
```
dependencies:
```
```
(...)
```
```
themes:
```
```
  - "your_theme"
```
```
  - seven
```

Although we wouldn’t do this in a Drupal 7 project, in this case we decided to use the Bartik theme as the starting point for our own custom theme because it is the default theme of Drupal 8 and is guaranteed to follow best practices. In the profiles/cheppers/config/install folder, we renamed all files with the name bartik to our theme and modified their content accordingly. In system.theme.yml we replaced default theme to ours:

```
admin: seven
```
```
default: "your_theme"
```

As a result, while installing your site you will have, besides the minimal and standard profile, an additional option to select.

Create content during install

The configuration files (.yml) do not store content so one of the very first issues we faced was how to create blocks with content during the install process. We needed to solve this because we want to make developers’ collaboration easier by having a fully functional and configured site right after installation. Initially, we only had vague ideas about a solution but then we have received a tip from Gábor Hojtsy, who sent us this link: http://cgit.drupalcode.org/multilingual_demo/tree/multilingual_demo.install#n306 After that, it was an easy task to accomplish, so thank you to Gábor for the help. Our first blocks’ aim was to display contact data in the footer. Let’s see how to do that in Drupal 8.

Create block content

In our profile folder we created a content subfolder to keep things together. In this folder we created the following files:

content-block.csv

```
"Id","yaml","Title","Body","Language"
```

"0","<your_theme>_footer_address","Cheppers address","49 Dessewffy Str.

```
Budapest, 1066
```
```
Hungary","en"
```

"1","<your_theme>_footer_email","Cheppers e-mail","info@cheppers.com","en"

"2","<your_theme>_footer_powered","Cheppers powered by","© Cheppers Ltd. 2015. Powered by <a drupal-8.0="" href="" https:="" www.drupal.org="">Drupal 8</a>","en"

This file stores content for 3 blocks. We could have put it all in one block, but we wanted to make it more flexible.

block.block.<your_theme>_footer_email.yml
block.block.<your_theme>_footer_powered.yml
block.block.<your_theme>_footer_address.yml

block.block.<your_theme>_footer_address.yml

```
langcode: en
```
```
status: true
```
```
dependencies:
```
```
  module:
```
```
    - block_content
```
```
  theme:
```
```
    - "<your_theme>"
```
```
id: "<your_theme>_footer_address"
```
```
theme: "<your_theme>"
```
```
region: footer_cheppers_address
```
```
weight: -5
```
```
provider: null
```
```
plugin: 'block_content:REPLACEME'
```
```
settings:
```
```
  id: 'block_content:REPLACEME'
```
```
  label: 'Footer address'
```
```
  provider: block_content
```
```
  label_display: '0'
```
```
  cache:
```
```
    max_age: -1
```
```
    contexts: {  }
```
```
  status: true
```
```
  info: ''
```
```
  view_mode: full
```
```
visibility: {  }
```

In case you were wondering why there are apostrophes around some values, but not all of them, it is simply because one word values don’t need apostrophes. As you can see, we set the region to a custom one called footer_cheppers_address because we would like our blocks to be shown in a new custom region. We’ll skip the other two blocks’ .yml files because I’m sure you get the idea, let’s move on instead and add our new regions in the <your_theme>.info.yml file within your theme folder: <your_theme>.info.yml

```
name: Cheppers Theme
```
```
type: theme
```
```
base theme: classy
```

description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'

```
package: Cheppers
```
```
version: 8.x-1.0
```
```
core: 8.x
```
```
logo:
```
```
  logo_path: logo.png
```
```
libraries:
```
```
  - "<your_theme>/global-styling"
```
```
ckeditor_stylesheets:
```
```
  - css/base/elements.css
```
```
  - css/base/typography.css
```
```
  - css/components/captions.css
```
```
  - css/components/content.css
```
```
  - css/components/table.css
```
```
regions:
```
```
  header: Header
```
```
  primary_menu: 'Primary menu'
```
```
  help: Help
```
```
  content: Content
```

  footer_cheppers_address: 'Footer Cheppers address'

  footer_cheppers_email: 'Footer Cheppers email'

```
  footer_message: 'Footer message'
```

  footer_socialmenu: 'Footer social menu'

We have added two regions, footer_cheppers_address and footer_cheppers_email. For the block <your_theme>_footer_powered we will simply use the already existing footer_message region. You can, of course, configure this as you wish. It’s just an example of how to add a custom region to your theme. Ok, so now we have created custom regions for our blocks in the footer. Now, let’s move on to how to modify the <your_profile>.install file in our profiles/<your_profile> folder in order to add the content to this block during installation. <your_profile>.install

use Drupal\comment\Plugin\Field\FieldType\CommentItemInterface;

```
use Drupal\user\Entity\User;
```
```
 
```

use Drupal\menu_link_content\Entity\MenuLinkContent;

```
use Symfony\Component\Yaml\Yaml;
```

use Drupal\block_content\Entity\BlockContent;

```
use Drupal\block\Entity\Block;
```
```
 
```
```
**
```
```
 * Implements hook_install().
```
```
 *
```

 * Perform actions to set up the site for this profile.

```
 *
```
```
 * @see system_install()
```
```
 */
```
```
function <your_profile>_install() {
```
```
  (...)
```
```
 
```
```
  // Add custom blocks.
```

 <your_profile>_add_blocks_with_contents(__DIR__ .'/content/content-block.csv');

```
}
```

<your_profile>.install::<your_profile>_add_blocks_with_contents

```
/**
```

 * Add custom blocks with content taken from a CSV file.

```
 *
```
```
 * @param string $file_name
```
```
 *   The name of the CSV file.
```
```
 */
```

function <your_profile>_add_blocks_with_contents($file_name) {

  /** @var Drupal\block_content\Entity\BlockContent[] $blocks */

```
  $blocks = array();
```

  $keys = (object)array_flip(array('id', 'yaml_file', 'title', 'body', 'lang',));

```
  $yaml_files = array();
```
```
  $handle = fopen($file_name, 'r');
```

  // Read the first row with column titles.

```
  $line = fgetcsv($handle);
```
```
  while ($line = fgetcsv($handle)) {
```
```
    if ($line[$keys->lang] == 'en') {
```
```
      $item = BlockContent::create(
```
```
    	array(
```
```
      	  'info' => $line[$keys->title],
```
```
      	  'type' => 'basic',
```

      	  'body' => array('value' => $line[$keys->body], 'format' => 'restricted_html'),

      	  'langcode' => $line[$keys->lang],

```
    	)
```
```
      );
```
```
      $item->save();
```

      $blocks[$line[$keys->id]] = $item;

      $yaml_files[$line[$keys->id]] = $line[$keys->yaml_file];

```
    }
```
```
  }
```
```
  fclose($handle);
```

  // Read block yaml files and add blocks to regions.

  <your_profile>_add_blocks_to_regions($blocks, $yaml_files);

```
}
```

<your_profile>.install::<your_profile>_add_blocks_to_regions

```
/**
```

 * Add blocks to regions defined in yaml_files.

```
 *
```
```
 * @param array $blocks
```
```
 * @param array $yaml_files
```
```
 */
```

function <your_profile>_add_blocks_to_regions($blocks, $yaml_files = array()) {

  // The custom block placements need to be adjusted with the content UUID.

  while (list($block_id, $item) = each($yaml_files)) {

```
    if (isset($blocks[$block_id])) {
```

      $input = __DIR__ . '/content/block.block.' . $item . '.yml';

```
      $yaml = Yaml::parse($input);
```

      $yaml['plugin'] = $yaml['settings']['id'] = 'block_content:' . $blocks[$block_id]->uuid();

      $block_placement = Block::create($yaml);

```
      $block_placement->save();
```
```
    }
```
```
  }
```
```
}
```

You can see the result in the next two pictures.

To edit the contents of the blocks we have just created, go to admin/structure/block/block-content page and click the [Edit] button.

Create footer menu links

Creating footer menu links is even easier than creating blocks, just add content-menu.csv to the content folder mentioned above and a new function into <your_profile>.install file. content-menu.csv

```
Id,Title,Menu,Path,Language,Weight
```

0,Drupal account,footer,https://www.drupal.org/drupal-8.0,en,20

1,Facebook account,footer,https://www.facebook.com/cheppers.hu?fref=ts,en,30

2,LinkedIn account,footer,http://www.linkedin.com/company/cheppers,en,40

3,Twitter account,footer,https://twitter.com/cheppers,en,50

4,Google+ account,footer,https://plus.google.com/103371252165927373857,en,60

<your_profile>.install

```
/**
```
```
 * Implements hook_install().
```
```
 *
```

 * Perform actions to set up the site for this profile.

```
 *
```
```
 * @see system_install()
```
```
 */
```
```
function <your_profile>_install() {
```
```
(...)
```
```
 // Add footer menu items.
```

 <your_profile>_add_footer_menu_items(__DIR__ . '/content/content-menu.csv');

```
}
```

<your_profile>.install::<your_profile>_add_footer_menu_items

```
/**
```

 * Create menu items based on a CSV file.

```
 *
```
```
 * @param string $file_name
```
```
 *   The name of the CSV file.
```
```
 */
```

function <your_profile>_add_footer_menu_items($file_name) {

  /** @var \Drupal\menu_link_content\Entity\MenuLinkContent[] $menus */

```
  $menus = array();
```
```
  $handle = fopen($file_name, 'r');
```

  /** @var \Drupal\Core\Path\PathValidatorInterface $path_validator */

  $path_validator = \Drupal::service('path.validator');

  $keys = (object)array_flip(array('id', 'title', 'menu', 'path', 'lang', 'weight',));

```
  // Read the column titles.
```
```
  $line = fgetcsv($handle);
```
```
  while ($line = fgetcsv($handle)) {
```
```
    if ($line[$keys->lang] == 'en') {
```

      $route = $path_validator->getUrlIfValid($line[$keys->path]);

```
      // For more parameters see:
```

      // \Drupal\menu_link_content\Entity\MenuLinkContent.php#getPluginDefinition

```
      $item = MenuLinkContent::create(
```
```
        array(
```

         'title' => $line[$keys->title],

           'menu_name' => $line[$keys->menu],

```
    'url' => $line[$keys->path],
```

          'options' => array('target' => '_blank'),

          'langcode' => $line[$keys->lang],

           'weight' => $line[$keys->weight],

           'bundle' => 'menu_link_content'

```
        )
```
```
      );
```
```
      $item->save();
```
```
      $menus[$line[$id]] = $item;
```
```
    }
```
```
  }
```
```
  fclose($handle);
```
```
}
```

Now you have footer menu links with the content given in your content-menu.csv file: admin/structure/menu/manage/footer

Did you notice that there is one more link on the footer menu? The first item, Contact, isn’t in our csv file. By default, the contact module creates this menu item in the footer menu, but what if we need this in the main menu, not the footer menu? Just create a .yml file in your config/install directory with the name: core.menu.static_menu_link_overrides.yml, then override menu_name, like this:

```
definitions:
```
```
  contact__site_page:
```
```
    enabled: true
```
```
    weight: 0
```
```
    expanded: false
```
```
    menu_name: main
```
```
    parent: ''
```

The main achievement of this method is that you can add any new block with content by modifying/adding only .yml files and .csv files. So far, we have only presented you with the easier parts of this beginning stage. Please share any ideas you might have about how we could have improved our methods, and, of course, questions are always welcome.

2015. március 19.