How to Create Template Content Types in Drupal with Less Code

You know the saying, “don’t reinvent the wheel” it also applies to Drupal site building. However, far too often content creators and web ops teams find themselves duplicating and rebuilding the same style and layout across multiple pages again and again. Having to manually reconstruct your Drupal layout for every page that you create using the WYSIWYG editor is not only time consuming, but it also results in the possibility of inconsistencies and a lack of a formalized process between team members. 

Ideally, these pages would take advantage of Drupal’s out-of-the-box Twig template engine by creating a content type template that would define the look and feel of the pages. Unfortunately, this requires writing some code and an understanding of the Drupal theming process.

Is it possible to create these templates without writing any code? Yes

I am going to show how content creators can define and apply their own design to pages of a Drupal site without needing to write any custom code.

The Basics Creating Twig Templates in Drupal Core 

Twig is a template engine for PHP and it is part of the Symfony framework. Drupal allows you to override all the templates that are used to produce HTML markup so you can fully control the markup that is shown as output within a custom theme. There are templates for each page element ranging from the high level HTML to small fields.

You can override Drupal core templates by adding templates to your theme folder that follow specific Twig Template naming conventions Here is how to accomplish this:

  1. Locate the template you wish to override.
  2. Copy the template file from its base location into your theme folder.
  3. Rename the template according to the naming conventions to target a more specific subset of areas where the template is used.
  4. Modify the template to your liking.

Once you copy a template file into your theme and clear the cache, Drupal will use your instance of the template file instead of the base version.

Let’s quickly look at what this article is going to focus on — content types. Without getting too technical, content types in Drupal are essentially Nodes and the default Twig template naming convention for Nodes looks like:

  1. node--[nodeid]--[viewmode].html.twig
  2. node--[nodeid].html.twig
  3. node--[content-type]--[viewmode].html.twig
  4. node--[content-type].html.twig
  5. node--[viewmode].html.twig
  6. node.html.twig

So with an Article content type, we would create a Twig template and name it:

node--article.html.twig

And add whatever markup, variables, etc. we need to get the design we want. This is where it gets complicated and the coding comes into play. This is what a default Twig template for a node (content type) looks like:

<article{{ attributes }}>
  {{ title_prefix }}
  {% if label and not page %}
    <h2{{ title_attributes }}>
      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
    </h2>
  {% endif %}
  {{ title_suffix }}
  {% if display_submitted %}
    <footer>
      {{ author_picture }}
      <div{{ author_attributes }}>
        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
        {{ metadata }}
      </div>
    </footer>
  {% endif %}
  <div{{ content_attributes }}>
    {{ content }}
  </div>
</article>

 

As you can see, it is a mix of HTML and Twig syntax. The process of creating components in core is not exactly easy to pick up, and it can get messy really quickly.

Creating Drupal Templates with Low Code Tools

Rather than invest additional IT effort on grappling with custom code, low code Drupal tools like Acquia Site Studio let you work faster and smarter through drag and drop elements that you can apply directly to your Drupal site layout.  

Here are the basic steps in creating a content type template with Acquia Site Studio.

  1. In Drupal navigate to Site Studio > Templates > Content templates
  2. On the resulting Content Type page, open up the Article accordion
  3. Locate the full view mode template and click on create/edit
  4. Begin laying out your content.

No custom coding required. involved.It is now simply drag-and-drop actions. Let’s go ahead and make sure that all our articles have a hero image at the top.

hero image example

Using Acquia Site Studio you can use a Hero component and drag and drop that easily.

hero gif

 

Now that we have the Hero component on the page, let’s add the body following the same actions.

body gif

 

As you can see, it is very easy to quickly create a template for a content type like an Article easily without spending unnecessary time spent wrangling code.

With an arsenal of Drupal templates at your fingertips, you can drag and drop to build new pages faster and ensure that all of your site content is cohesive and standardized throughout your team.