Panels without Panels in Drupal 8

Posted by Charlotte León on August 26, 2016

The stability of Panels in Drupal 8 is improving each day. But in case you want to build something similar to a panels page, without using Panels... you can do that today using a custom Controller and a custom twig template.

Twig is the new template engine introduced in Drupal 8. Twig provides us a fast and safe way to organize the logic of PHP in a way that makes it simpler for template developers. (More information available at http://twig.sensiolabs.org)

With the help of the Drupal console we generate a custom module with the following command:

$ drupal generate:module [options]

We also generate a controller:

$ drupal generate:controller [options]

**The options for generation will vary depending on what you need.** 

Then we enable the custom module and twig_tweak module:

$ drush en custom_module twig_tweak -y

In the modules directory in the custom module we just created, we find the src/Controller directory with the new controller class (i.e. ResourceLinks.php)

<?php
namespace Drupal\custom_module\Controller;
use Drupal\Core\Controller\ControllerBase;
/**
 * Class ResourceLinks.
 *
 * @package Drupal\custom_module\Controller
 */
class ResourceLinks extends ControllerBase {
  /**
   * Page.
   *
   * @return array
   *   Render array for the page
   */
	public function page() {
		return [
			'#theme' => 'custom_resource_links',
		];
	}
}

And in our custom.module file is our hook_theme:

<?php

use Drupal\Core\Routing\RouteMatchInterface;

/**
 * Implements hook_help().
 */
function custom_module_help($route_name, RouteMatchInterface $route_match) {
  switch ($route_name) {
    // Main module help for the custom_module module.
    case 'help.page.custom_module':
      $output = '';
      $output .= '<h3>' . t('About') . '</h3>';
      $output .= '<p>' . t('The Custom module provides custom configuration') . '</p>';
      return $output;

    default:
  }
}

/**
 * Implements hook_theme().
 */
function custom_module_theme($existing, $type, $theme, $path) {
	return [
		'custom_resource_links' => [
			'variables' => [],
		],
	];
}

The copy in the custom module is very basic. Intentionally so. The actual version of the template will reside in the custom theme for the site. A version of the template is required in the custom module. But we want to keep all our custom templates in the custom theme. So just add a couple very basic lines into the module's template.

file: custom-resource-links.html.twig

<div class="resource-links"></div>

The full contents of the template in your custom theme:

{{ drupal_block('resource_links_introduction') }}
<h2> {% trans %}Resources by Type{% endtrans %}</h2>
<div class="match-height col-sm-6">
    <h4>Type of links:</h4>
    {{ drupal_block('views_block__resource_links_block_1') }}
</div>
<div class="match-height col-sm-6">
    {{ drupal_block('resource_links_instruction') }}
</div>

 

Are you looking to build or customize a Drupal site? Write us about your project, and we’ll get back to you within 48 hours.

If you want to learn more about why Drupal is the most widely used open-source content management system in the world, visit drupal.org/about.