Drupalising a Flat Theme
How you build a Drupal site will greatly depend on your personal preference or the preference of your boss/client.
A favourite debate between other developers and myself is if it's better to:
Drupal 8
Link To
drupal/drupal-8
Image Styles Programmatically
Image styles within Drupal are one of the things you take for granted, yet are one of Drupal's best tools. A user with CMS access can create an 'Image Style' which can be used on a content type display page or within a 'View', all without any coding.
However, sometime you have to add an image style within a template (Drupal 7) or a module. So how d o we do this?
Normally we will start with something called a 'URI'. Take a look at these two Drupal 7 examples:
Database Query in THEME_preprocess_page()
Whilst converting a D7 site to D9 I came across some SQL in the node.tpl.php template. This clearly shouldn't be in the template and the poor developer had added a comment saying as much, but was clearly under pressure and maybe not as experienced as they needed to be.
So, with D9 using TWIG I needed to move the SQL to another place.... and the THEME_preprocess_page() function is probably the best place.
Get Node Field in page.html.twig
Sometimes you need to get a field in the page.html.twig template. The template hierarchy suggests that node values (fields) should be rendered in the node.html.twig template and page.html.twig is the parent template that should be dealing with regions etc.
The solution is use THEME_preprocess_page() to reference the node and get the field. There are 3 ways to do this (probably more) but the examples below show the array and simple string methods. The field is 'Video Id' which has a machine name of 'field_video_id'.
Prevent Node Display By Content Type
Probably not the best title, but I've created a content type and don't want it to display anything to the public. It needs to be published and to have an 'edit' page but I don't need/want it to be viewed by the public or search engines. For example, let's say I created a content type called 'slide' and I was planning to use 'views' to create a block with a carousel to generate a slider. This can be expanded with a 'taxonomy' (terms like Home, About, Contact) allowing 'slides' to specify which pages they appear on.
Add Node Id & Content Type To Body Tag
Sometimes it's handy to have the node id in the <body> tag so you can add some custom styling to a specific page. The result would look like this (if the node id was 123).
<body class="page-node-123">
There will be other theme specific classes so we need to add ours rather than overwriting anything that already exists. This is done using THEME_preprocess_html()
If my theme was myD9theme then this would be in the myD9theme.theme file.
Drupal 9 Template Suggestions
One of the best tools within Drupal is the ability to create different content types, with different fields, different display settings and also.... the ability to have a different template for each content type. If the theme you are using doesn't automatically create the 'template suggestion' for the content type, add the following to your THEME.theme file.
If your theme was called myD9theme then the following needs to go in your myD9theme.them file.
Drupal TWIG PHP str_replace()
This is probably an unusual scenario, but let me explain where I am.... I have a custom module that processes a feed from an external source and generates content (creates nodes). For some reason <br /> tags are coming through 'converted' rather than as raw HTML. In Drupal 7 I used PHP str_replace() to rectify this like:
File: node--video.tpl.php (where 'video' is my content type.
Adding D7 Style views-row odd/even to D8/9 View Templates
views-view-unformatted--testimonials--block-2.html.twig
{% for row in rows %}
{% set row_classes = cycle(['views-row odd', 'views-row even'], loop.index0) %}
<div{{ row.attributes.addClass(row_classes) }}>
{{- row.content -}}
</div>
{% endfor %}
Add Unique ID to Rows In View Template
views-view-unformatted--home-news.html.twig
Within {% for row in rows %} we can use {{ loop.index }} like: <article id="newsitem{{ loop.index }}">.
Full output might look like:
{% for row in rows %}
<article id="newsitem{{ loop.index }}" class="newsitem col-md-4 col-lg-4 col-sm-6 col-xs-12">
{{- row.content -}}
</article>
{% endfor %}