Drupal 8 – Multilingual Options

dru

We live in a world where cultural and country boundaries, while still important, are blurred by the Internet’s capability to connect two people who are geographically thousands of miles apart and enable them to communicate through text, voice, and video. The visitors who come to our websites may be our next-door neighbors or they may live half a world away. Catering to those who live beyond our region and do not share our native tongue is now more commonplace than ever. Website designers who break through the language barriers on their sites may attract audiences that they never dreamed of having in the past, and Drupal 8 makes that possibility a reality through its built-in multilingual capabilities.

Getting Started with Multilingual

The first step in creating a website with multilingual support is to determine which languages you wish to publish content in. Drupal 8 provides the capability to render your site in nearly any language spoken on the planet. Drupal does not do the actual translation of the content; rather, it facilitates the translation by providing the mechanisms that enable visitors to select which language they wish to see (from the list that you offer), and then rendering content that has been previously translated by humans into that language. After you determine the list of languages that you wish to support, the next step is to enable the multilingual modules that are part of Drupal 8 core. Visit the module administration page by clicking the Manage link in the admin menu at the top of the page, followed by the Extend link in the secondary menu. Scroll down the page until you see the list of multilingual modules that are part of Drupal 8. Most Drupal developers enable these modules even if the site is not multilingual.

Configuration Translation provides the ability to translate elements of your site such as the site name, vocabularies, menus, blocks, and other configuration related text on your site. The Content Translation module handles all of the content-related text, such as articles. The Interface Translation module provides an easy-to-use interface for translating elements of your site that are static strings, such as form labels, and the Language module is the module that enables the definition of which languages your site supports. Check all of the modules in the Multilingual category and then click the “Save configuration” button.

Configuring Multilingual Capabilities

The next step in the process is to configure the multilingual capabilities of Drupal 8. Start by navigating to the Configuration page. Click the Manage link in the admin menu, followed by the Configuration link in the secondary menu. On the Configuration page, scroll down until you see the Regional And Language section.

Advertisements

Drupal 8 Tutorials – Blocks

drupp

Blocks, Blocks, and More Blocks

A block is a generic term that is applied to any self-contained piece of content, menu, or code. There are standard prebuilt blocks that come with Drupal 8: the “User login” block, the Search block, the “Who’s online” block, the “Who’s new” block, the “Recent content” block, and more. There are also blocks that come with contributed modules, such as blocks that share the latest weather report, your recent Twitter posts, or your current Facebook status. As a site administrator you can construct your own custom blocks, such as a list of upcoming events.

Making Blocks Appear on Pages

I’ll now show you how to assign anywhere from one to dozens of blocks to the various regions on your theme, and explain how doing so increases visitor interest in your site by providing interesting and high-value features. Most Drupal developers know the technique, but we’ll quickly go through it.

Finding the List of Available Blocks

To find the list of blocks that are available for you to use on your new website, click the Manage link at the top of the page, then click the Structure link in the secondary menu. This takes you to the Structure page. On the Structure page, click the “Block layout” link to reveal the “Block layout” page, which lists all the defined blocks on your system, including those that are already assigned to regions and those that are not assigned to a region.

On the “Block layout” page you will see that Drupal 8 provides a number of prebuilt blocks that can be placed on pages on your site. Pick a few by selecting from the list of blocks in the “Place blocks” box in the right column of the page. Click the title of a block and, on the “Configure block” form, pick a region from the select list (e.g., Sidebar First if you are using the Bartik theme). After assigning the blocks to regions, click the “Save blocks” button. If you return to your site’s homepage, you’ll now see the blocks that you enabled in the regions where you assigned them.

Rearranging Blocks

It is likely that, at some point in time, you’re going to want to reorder how blocks appear on a page. To reorder the blocks, navigate to the “Block layout” page as described in the previous section. On the “Block layout” page, simply click and hold the plus sign (+) next to the block that you want to move, and drag that block to the position where you want it in the list of blocks for that region. When you release the mouse button, you’ll see that Drupal reordered the items (temporarily). You’ll see a message at the top of the list of blocks stating “You have unsaved changes.” Scroll to the bottom of the page and click “Save blocks.” Drupal will save the changes and display a message stating that the changes were made. Return to the homepage by clicking the “Back to site” link at the top left of the page and you will see the blocks in their new order.

Drupal 8 – Administration Theme

drupp

Administration forms tend to be wide and long, sometimes not fitting too well within the confines of the content area defined for a given theme. To address this problem, Drupal 8 lets you specify a theme that should be used for administrative functions. You can try your new theme to see if it works for administration screens, or you can pick a different theme to use whenever a site administrator is performing site administration tasks. Typically, a simple clean theme that is at least 960px wide works best as the admin theme. To change the administration theme, simply click the Appearance menu item at the top of the page and scroll to the bottom. You’ll see a section titled Administration Theme. From the list of themes in the drop-down list, select a theme that you know will work with administration forms. By default Drupal 8 enables Seven as the administration theme, because it accommodates administration screens. You may also change the administration theme to any other theme listed in the drop-down list. If you change the value, make sure you click the “Save configuration” button. Most drupal developers are working with this theme.

Drupal 8 provides a set of configuration options that, when changed, updates certain aspects of what is displayed within your theme. Depending on whether the theme author adhered to Drupal standards, you can use this form to determine which elements are displayed on the page (Logo, Site Name, Site Slogan, and so on), whether the theme should use its default logo, and whether the shortcut icon should be used (the shortcut icon is also known as the favicon; it’s the little logo that appears to the left of your browsers address bar). To get to this screen, simply click the Appearance menu item in the top menu and click the Settings tab at the top of the Appearance page.

Try changing some of the display options such as the logo. Uncheck the “Use the default logo supplied by theme” check box and use the Browse button that appears after unchecking the box to upload a new logo for your site. Click the “Save configuration” button at the bottom of the Settings page and return to your site’s homepage to see the change in appearance.

Find a new theme in Drupal 8

d88

Drupal 8 ships with the Bartik, Seven, Stark, and Classy themes. Although Bartik is a great theme, it’s likely one that you won’t use on your production site (although when browsing around the Web you’ll often run into a site that uses Bartik as its production theme).

Seven is the default admin theme, created specifically to render administrative pages. Stark is a very simple theme with virtually no styling, and Classy is a base theme that is meant to be the basis for building your own theme. If you’re going for a very clean and text heavy theme, then Stark may be a good choice for you, but it’s likely that you’ll want to pick from one of the hundreds of themes that you can freely download and use.

Before you begin your search for a new theme, you should sit down with a blank piece of paper and sketch out the general layout of at least the homepage of your new site. Key concepts to focus on include:
Will your site have a header or banner area? If so, how tall will the header be, and will it span the entire width of your page?

Will your site use horizontal menus and, if so, how many will you have and where will they be placed?

Does your design call for a left or right side bar? Or does your design call for two sidebars on the right or two on the left?

Will your site have a footer and, if so, does the footer span the entire width of the page?

Will you have a fixed width (say, 960px wide), or will the site need to adjust for different screen widths across a variety of desktops, laptops, tablets, and smartphones?

Answering these questions will help you narrow the choice of themes to only those that support your general layout and design goals.

The best place to begin your search for a theme is the Drupal.org website. To view a list of the available Drupal themes, visit http://www.drupal.org/project/project_theme. It’s where most drupal developers search for cool themes. For demonstration purposes, let’s search the Drupal.org site for a Drupal 8 theme that matches our intended layout and color scheme. On http://www.drupal.org/project/project_theme, select 8.x from the “Core compatibility” select list to limit the list to only themes that are Drupal 8 compatible, and then click the Search button. Drupal will display the list of themes, only listing those that are compatible with Drupal 8.

You can narrow the list of themes by filtering the results by theme name, maintenance and/or development status, and theme status (full projects or only sandbox projects, the latter of which are themes that are under development and have not yet been released). You can also use the “Sort by” filter to sort the results by creation date, last release, last build, title, author, or most installed. Choosing “Last release” shows all of the newly added themes (or updates to existing themes), which is a nice feature when you visit this page often and want to see what the community has contributed recently. For this demonstration, let’s sort by Title to list the Drupal 8 themes in alphabetical order.

Using Themes in Drupal 8

dr

The visual layout and presentation of your new Drupal site is defined through a Drupal component called a theme. A theme defines
-The colors used on the page.
-The fonts used for text, headings, links, and other elements.
-The placement of images and graphics that are present on every page of the site (images and graphics that are associated with the page itself rather than a content item).
-The layout of the page (such as a menu at the top, a banner area, a secondary menu below the banner, a column on the left, or a footer).

Themes can be as simple as a plain white canvas or as complex and visually energizing as your imagination can conjure up. Drupal themes are designed and developed using HTML, cascading style sheets (CSS), and elements such as variables, expressions, and tags from the Twig templating engine. Twig makes it easier for nondevelopers to create Drupal themes because they don’t have to know PHP, the programming language that Drupal is built upon. Most Drupal developers use custom themes, but also out-of-the-box themes.

We have already worked with a Drupal theme; the basic Drupal 8 site that we installed as part of the earlier chapters in this book uses the default Bartik theme. Bartik is a predominantly “black and blue” theme, with a relatively simple structure. The theme provides 17 different regions where you can place content, widgets, images, videos, forms, or other elements.

You’ll find as you browse through various Drupal themes that many of them follow this same generic layout, which for many people is a negative because it makes them believe that every Drupal site looks nearly identical. The truth of the matter is that, yes, many off-the-shelf themes follow this same layout pattern. However, you have the ability to create a layout that significantly deviates from the standard.

Drupal 8 – Formatting the Input and Output Form for a Custom Content Type

drupp

Sometimes you may find that the visual representation of your new content creation form doesn’t fit with how you would like it to appear. You may want to change the order of fields on the form, the type of widget used to create content in a field, or the format of the widget itself. To change how the form is displayed, edit a content type following the steps you’ve performed previously. Click the “Manage form display” tab at the top of the page, resulting in the list of fields with their widget types and widget configurations displayed.

To rearrange the order of the fields on the form, click and hold the arrows icon next to the field you wish to move, drag the field to the position where you want it to appear, and release your mouse button. To change the widget type, simply select a new value from the widget select list, and to change the appearance of a widget (for example, changing a text area so that it displays more than the default five lines), click the gear icon in the right column.

As an example, let’s change the text area field for driving directions from the default five lines of text to ten lines of text. To do so, click the gear icon in the right column of the “Driving directions” field. The for will expand to display a field where you can change the number of rows as well as enter placeholder text that will appear in the field until the author begins entering text in that field. Change the number of rows from 5 to 10 and then click the Update button, followed by the Save button. The number of rows displayed when creating a new event is ten, providing the author more room to enter directions. Many Drupal developers use such techniques.

There will be times when the visual representation of your new content type as displayed to the end user of a site doesn’t fit with how you would like the content created with your new content type to be rendered on the screen.
In the previous section we looked at rearranging the fields on the form used by content authors to create an event; in this case we are rearranging the content as it appears when an event is rendered to an end user.

Adjusting the order and positioning of the labels in relation to the field can be accomplished by clicking the “Manage display” tab on the custom content type edit form. This page lists all of the fields that are associated with our content type, and provides the ability to define basic display attributes for the label and content for each of the fields. By default there are two sets of values that we can set: one for the Default (full node) and one for the Teaser view. The Default option displays the complete content item and Teaser displays just the content item’s title and a trimmed version of the body field. You can switch between these using the two links at the top left of the page. If you click the select list for the Label of each field , you will find that there are three options:

Above: The label will be displayed on a line immediately above the widget that you selected for your field.
Inline: The label will be displayed to the left of your widget, on the same line as the widget.
Hidden: The label will not be displayed on the screen.

Drupal 8 Fields – Select Lists and File Uploads

drupp

Select lists are often called drop-down lists. To demonstrate select lists, let’s create a new field for the Event content type that lists whether the event is a concert, a play, or a lecture. Creating a select list is similar to creating the previous field types covered. On the “Manage fields” page for the Event content type, click the “Add field” button. Select “List (text)” for the field type (refer to Figure 5-17) and enter “Type of Event” in the Label field. After setting these values, click the “Save and continue” button to proceed with the definition of your new select list field.

On the next screen, as in previous examples, enter a key|label pair for each of the options to be listed. Enter concert|Concert, play|Play, and lecture|Lecture in the “Allowed values list,” with one set of key|label values per line. Leave the “Allowed number of values” set to “Limited” and “1.” To proceed, click the “Save field settings” button. On the next configuration screen, click “Save settings” after you have set any values that you wish to change on the form.

In previous examples, we had to click the “Manage form display” tab and change the widget type from “Select list” to “Check boxes/radio buttons.” Since we want to display a select list, there is no need to change the value. You are now ready to use your new select list field.

The file upload field type presents a file browser button that allows an author to browse their local computer for a file to upload to Drupal and attach to the content item that they are creating. Drupal developers use this filed for different files. Creating a file upload field is nearly identical to the procedure for creating other field types. We will expand our Event content type to include the ability to attach the program for the event. As with previous fields, navigate to the Event content type’s “Manage fields” page and click the “Add field” button. On the “Add field” screen, select “File” as the field type and enter “Event Program” in the Label field. Click “Save and continue” to proceed to the next step.

On the “Field settings” page, check the “Enable Display field” check box and the “Files displayed by default” check box. Checking these boxes provides the author with the option of displaying a link to the file when visitors are viewing that content item. By default, the destination for the uploaded file will be the “Public files” directory, which is a configurable destination defined by the site administrator. Next, in the “Allowed number of values” field, set the number of file uploads that will be enabled for content authors.

We will leave the option set to “Limited” and “1” as we only foresee the need to allow a content author to upload a single event program file per event. Depending on your requirements, you may change the number of allowed file uploads. After setting the values on the form, click the “Save field settings” button.