Dupal Uploaded Files Renaming Brackets With Percent Symbols

The rumors are true: pretty much everything has changed in Drupal theming in the latest version.

At first information technology seems scary, simply equally yous showtime earthworks into things, I think you'll come to realize that the biggest changes are nearly invisible. Yep, there's a new template engine with a different syntax, simply the concept of template files which nest into ane another notwithstanding exists. Nosotros still accept regions which can be loaded with blocks. We nevertheless have display modes. And you'll however be working with Views. And so while almost everything has changed, at that place's too a lot that is rapidly going to experience quite comfortable.

The biggest change, of class, is the retirement of PHPTemplate in favor of Twig. I have to admit that I'yard an former-schooler who didn't really notice PHPTemplate all that difficult. (I will likewise acknowledge that I've been known to throw coding elegance out the window in favor of animal force from fourth dimension-to-time.) Mostly, I don't buy the argument that Twig, on its ain, has reduced the complexity of the themes.

Let me testify you what I mean. In PHPTemplate, we might have done something like this:

<?php print render($action_links); ?>        

And in Twig, the equivalent statement looks like this:

{{ action_links }}        

Yes, the second line is shorter, but information technology also feels like it has more magic going on. If you've been begging to go your code streamlined, I think you're going to dear Twig. Even if you liked the PHPTemplate style of doing things, there are a lot of advantages we've gained with the upgrade to Twig.

1. Twig allows the states to simplify themes. Y'all are welcome to embed simple logic statements right into your template files.
2. Twig makes themes more secure. Even though you tin embed logic into your template files, it's not as powerful as PHPTemplate, equally there is no PHP allowed in a Twig file. (Attempt it! You'll get errors.)
3. The team working on Twig has dramatically reduced the complexity of the entire theme arrangement.

I take the utmost respect for those who worked on this process. They didn't merely duct record a new templating system onto Drupal. They took the time to carefully comb over Drupal and find the things that were confusing, outdated, or just didn't belong.

Upgrading an Existing Theme

As an instance, allow's take Domicile, an existing theme which has been transformed a few times. With the Drupal 7 cycle it went from using the NineSixty base theme (version 1.x), to using a Sass plugin for the 960 Filigree System (version ii.x). I'll show you how I upgrade version 2.ten of the theme to Drupal viii; grab a re-create of the theme and work through the article with me.

Note: by pattern, the theme we're going to upgrade offset is not responsive. Nosotros'll talk a little more about responsive themes in a hereafter commodity. For now, let's focus on one thing at a time so at that place aren't likewise many moving parts to upgrade all at once.

In order to upgrade my theme, I've copied a Drupal 7 version of Habitation. You lot tin get a copy of this theme from GitHub in the binder, domicile.

We'll work directly in the folder yous've downloaded as it's an upgrade process. Get ahead and edit the files y'all've downloaded. If something goes terribly incorrect, you tin can always download a fresh copy!

When upgrading a theme, call back that you are potentially bringing bad or outdated practices with you. Information technology's quite possible that your theme was comprised of entirely good habits when it was first created, but over the years, themes do first to wait a lilliputian ragged around the edges as technologies change. In a future article I'll address the advantages of taking the fourth dimension to rebuild your theme from scratch so that information technology incorporates simply modern good practices.

To begin the conversion procedure, start with the theme's .info file. This file needs to have the file extension inverse from .info to .info.yml .

Once the file proper noun has been changed, y'all will need to convert the existing variables to the YML information format. For case: proper name = Theme proper noun becomes name: Theme name .

The required variables are as follows:

• name: A homo readable theme proper name. This may contain spaces.
• blazon: Modules and themes at present share the aforementioned format for configuration files, so we must specify that this configuration file belongs to a theme.
• description: A terse description of your theme. The description must be enclosed in quotes.
• cadre: The version of core this theme may be applied to.

In the Drupal 8 theme, we'll delete the following variables which were in the Drupal 7 configuration file:

• screenshot: Instead, add a file named screenshot.png to the root of your theme folder and it volition announced automatically. The screenshot should be nigh 295 pixels wide.
• engine: It is now assumed that you will be using Twig.

The next part of a theme's configuration file is outlines which style sheets volition be loaded (or removed). In Drupal seven nosotros added our style sheets with the following:

stylesheets[media_type][] = path/to/stylesheet.css stylesheets[media_type][] = path/to/stylesheet2.css        

In Drupal 8, we add together our fashion sheets equally follows:

stylesheets: media_type:   - path/to/stylesheet.css   - path/to/stylesheet2.css        

Your way sheets might look something like this:

stylesheets: all:   - css/global.css print:   - css/impress.css        

You may likewise preclude style sheets from loading past using the post-obit syntax:

stylesheets-remove:   - name-of-core-stylesheet.css        

Have a peek at the core theme Seven to see an interesting combination of new variables that tin be used to customize which style sheets are loaded for your theme.

Finally, you'll need to update the list of regions. You may have already guessed the updated format to list your regions. In Drupal vii, you would have used the following format:

region[machine_name] = Homo readable proper name        

In Drupal 8, your theme'south regions are listed every bit follows:

regions: machine_name: Human readable name machine_name2: Likewise a human readable name        

With these changes fabricated, the theme can be enabled in Drupal eight.

Enabling a New Theme

Equally of Drupal eight, themes should now be uploaded to the directory themes in the root binder of your Drupal installation. In one case the folder has been uploaded, information technology tin can exist enabled by completing the post-obit steps:

1. Using the Admin menu, click on Manage.
2. Click on Appearance.
3. Scroll to the bottom of the listing of themes, and beneath your new theme click on the link "Enable and ready default".

The interface has changed slightly in Drupal 8, simply each of those steps should take felt very familiar to you.

If your theme wasn't visible in the list, try rebuilding the cache. The clear cache button is yet available past navigating to Manage » Configuration » Performance » Clear cache. If your theme is still non visible, check the syntax in your .info.yml file. Exercise you have quotes effectually the description? Accept you missed any colons afterward the variable names? Set up upwards whatsoever pesky mistakes you observe, clear the enshroud again, and navigate back to the listing of Themes on the Appearance page.

Once your new theme has been set up as the default, navigate back to the home page (I use the breadcrumbs for this). You should run across that the Bartik-themed site has been transformed into a barebones blank slate. It's unlikely that your CSS matches the default selectors provided past Drupal core, so your side by side step will be to adjust the markup to match your CSS files.

From tpl.php to html.twig

Converting your PHPTemplate files to Twig is a unproblematic matter of finding annihilation with <?php and changing it to { . Of course it's not quite that unproblematic, but it's pretty darn shut. One-by-one you'll want to go through your template files and convert them to Twig.

The easiest way to do this is to update a unmarried file at a time from the extension .tpl.php to .html.twig . For case, page.tpl.php becomes folio.html.twig . Once a file has been renamed to .html.twig , Drupal stops ignoring the file and tries to render it. If your file still contains PHP, information technology will throw errors.

Get ahead and rename the template file folio.tpl.php from the Domicile theme to page.html.twig , and and then open up it in an editor. You'll come across that this is a very elementary template file. In that location are a few variables, but non many. There are a few PHP if statements, simply not many of those either.

Twig Variables

In the first pass through the template file, the merely thing you demand to know is that a double curly brace prints a variable, and that variables practice not accept a leading $ . Information technology doesn't matter if the variable is an array, an object, or a string, the Twig output will await like this: {{ var_name }} .

On your get-go pass through the template file, find all of the regions and convert them to Twig regions. You can easily find a region by searching for $page[ . Replace everything wrapping the region from <?php to ?> .
For case:

<?php print render($page['featured']); ?>        

is replaced with the following:

{{ page.featured }}        

There are four regions. Find and replace each one of them.
On your side by side pass, replace all of the remaining variables. In your template file, search for the word impress . Sometimes there will be a render() function wrapped around it, sometimes information technology will exist plain. It doesn't affair: locate every single instance of impress and bandy it out.
The following three examples –

• <?php impress $letters; ?>
• <?php print $front_page; ?>
• <?php print render($title_suffix); ?>

– would be transformed as follows:

• {{ letters }}
• {{ front_page }}
• {{ title_suffix }}

The images are a chip tricky, as the variable $directory seems to have been removed. In this case, nosotros'll do the replacement as follows:

The variable $base_path has a perfect substitution, but the variable $directory is now difficult-coded:

Twig Control Structures

A control construction alters the menses of a program. In Drupal themes, nosotros are most probable to see a control structure in the form of an if -statement. Our Drupal vii page.tpl.php file had iii dissimilar PHP if statements which need to be converted to Twig.

For instance:

<?php if ($tabs): ?> <?php print render($tabs); ?> <?php endif; ?>        

Y'all've probably already converted the printed variable, so the same line in your Twig file probably looks closer to this:

<?php if ($tabs): ?>        

{{ tabs }}

<?php endif; ?>        

Control structures volition always have a beginning and an end. When we want to impress something in Twig we use {{ double brackets }} , but when nosotros want to use a control construction, we use {% subclass and percent %} . We also omit the terminating marks that were in PHP. In other words, our converted tabs output looks similar this:

{% if tabs %}

{{ tabs }}

{% endif %}

There are iii more control structures which demand to be updated. Go ahead and make the updates now, I'll wait.

Twig Filters

Your concluding Twig concept for this upgrade is a filter. A filter allows you to modify a variable before it is printed to the page. Filters can exist chained, allowing y'all to apply multiple filters to a single variable before it is printed. Filters are added after a variable using the pipe symbol ("|").

The only filter being used in our template is the translation filter. Whereas we previously used the interpret function, t() , you now need to use its Twig equivalent. So –

<?php print t('Home'); ?>        

– becomes:

{{ 'Home'|t }}        

Final Check

Your page template file should at present be devoid of whatever PHP. All of the <?php markers should be converted into either {{ or {% , and have a corresponding shut structure, of grade. Do a final search through your revised template file to ensure that you've completed your conversion.

After you've converted each template file, upload it to your server, clear the cache in Drupal, and check to make sure
there are no errors. And then proceed to converting the adjacent template file.

Up to this point, we've just covered the basics. If your theme contains a file template.php , yous'll need to convert this file also. Renaming information technology to THEMENAME.theme (instead of template.php ) will be enough for really basic themes. Take a peek inside the core theme Seven, to get more hints on upgrading this file to Drupal viii, if your theme has one.

Next Consequence: Responsive Themes with Breakpoint

This theme was, by pattern, static. In a future Watchdog commodity, I'll dive into building responsive themes in Drupal 8 with the responsive module, breakpoint. If you can't wait, I encourage you lot to jump into the core themes, Bartik and Seven, and utilize them as an example of how to create your own responsive themes.

Epitome: ©iStockphoto.com/Rakoskerti

landagral1962.blogspot.com

Source: https://drupalsun.com/emma-jane-westby/2014/12/23/upgrading-your-themes

Share this post