April 18, 2019
Adding Content to Your Drupal 8 Site

This article provides you with a few more tools for adding and managing content in Drupal 8.

Our screen captures reflect changes we made during earlier entries in this series, without modules and with default Drupal 8 theme, Bartik. Recreating these changes is not necessary, but if you’re using a different theme, or have added modules, what you see will differ from our images.

Graphics & Text Styles

In a previous article, we created a simple blog post. To get a better feel for how to wrangle graphics and text styles, we’ll create an “About Us” page for our website, FearTheSquirrel.

From your admin menu (click Manage), click Content, then click Add content. Or, select Add content from Shortcuts.
Click Basic page.

In the Title field, enter “About Us.” In the Body field, enter one standalone sentence, followed by a few paragraphs. We’re using mostly “lorem ipsum” placeholder text, but feel free to use whatever you like.

The bar along the top of the Body section allows you to adjust text size and appearance, as well as add hyperlinks, images, and other elements common to text editors. Highlight the first sentence, and click the B icon to make it bold.

Before continuing, note the Source button, which will show your text as HTML. You can enter or edit HTML while in this mode. Click Source again to revert.

To add an image, click the image icon, then click Choose File to upload an image.

After uploading your image, fill the Alternative text field, which will help screen readers and people with vision impairments. Decide which Align option appeals to you, but leave the Caption option alone for now. Click Save when done.

To publish, confirm the Published check box is selected, then click Save.

Once published, note the View, Edit, and Delete tabs. These tabs are only visible when logged in as a user with permissions that allow content editing.

Metadata

Metadata, or “data about data,” is used by search engines and other websites to gather information about your content.

Return to your previous post and click the Edit tab; or, click Content from your admin menu, find your recent post, then click Edit.

While we’re here, it’s worth noting the Revision Log on the right. Enter “adding metadata.” Getting into the habit of this now will make it easier to track revision history when managing your content later.

In Menu settings, select the Provide menu link check box. Parent item and Weight change how it appears in the menu, but leave these alone for now.

The URL alias field reassigns the web address of this node from the default, which is currently your domain, followed by /node/, then a number; for example, https://mydomain/node/9. Change the URL alias to “/about-us”, and don’t forget the forward slash (/)!

Authoring information allows you to designate an author and change the date of authorship., The author must match the username of a content author for your site.

Promotion options is useful for when you want to highlight important content. Leave these selections unchecked for now.

Click Save when ready. Go to your homepage, then click your newly created About Us menu option.

Should you need to view the revision log or revert to a previous version, click the Revisions tab.

In the Revisions Log, you can view any previous version, read log messages, and Revert as needed.

Teasers

As the name suggests, a teaser is an abbreviated view of your content. Teasers make it easier for visitors to find content that interests them, and ignore content that does not. Before continuing, go to your home page and create a new post (Shortcut > Add Content > Article). You can choose your own content if you prefer.

In this example, we’re entering “Caught in the Act!” in the title field, placing mostly “lorem ipsum” text in the Body field, and adding an image of a squirrel.

Once we publish, the teaser appears. Note the Read more option near the bottom of the teaser.

Teaser example

By default, Drupal 8 allows you to customize the appearance and behavior of teasers by content type. Additional themes and modules can expand your options, but for now, let’s stick with the default Bartik theme.

To customize a teaser, go to your admin menu and select Structure > Content Types. In the Article row, select Manage Display from the drop-down menu.

You are now on the Default tab within the Manage Display page. Click the Teaser tab.

From this page, you can change your teaser options as needed, just keep in mind it affects all content of this type.

For example, to adjust the size of the image in the teaser, click the gear icon the Image row. Set the Image style to large, then click Update
It is also possible to reorder items in the Field column by clicking and dragging the icon corresponding to each field.

Newsfeeds

Visitors can click the orange RSS link icon at the bottom of any page to subscribe their news reader to your site. Just as with teasers, can customize how this content appears in their news feeds, and the interface is nearly identical.

To customize RSS, go to your admin menu and select Structure > Content Types. In the Article row, select Manage Display from the drop-down menu, then click the RSS tab. Make your changes, then click Save when done.

Content Management

As your site grows, so will the need for one “point of truth” for managing your content. From your admin menu, click Content.

Basic Interface

This page shows every published and unpublished node on your site. From here, you can edit and delete individual nodes from the Operations column.

You can also can perform operations on multiple nodes at once. To do so, 1) select the check box corresponding to each article, 2) select an action, then 3) click Apply to selected items.

Filters

Eventually, your site will contain too many nodes to manage effectively without a filter, which appears at the top of this page.

The Title field functions as a search bar, though it will search only titles, not topics or keywords. The Content type, Published status, and Language options are self-explanatory. However, remember you can add content types, which will give that filter greater significance.

Block Basics

Blocks provide you an easy way to “layer” important information without getting in the way of your core content. Blocks can look different based on who is viewing them (user, admin, and so on), but only users with appropriate permissions can.

Configuring blocks

You can interact with blocks on any node by clicking Edit on the upper right, then clicking the pencil icon near any block.
First, let’s check out the “Tools” block on our homepage. Click near that block, then Configure Block.

From the Configure block page, you can change the title, menu level, and the region of the page in which it appears. You can also restrict the visibility of this block by content type, page, or role.

For now, let’s just remove this block. Click Remove block at the bottom of the page, then confirm.

Block Layout

From your admin menu, select Structure > Block Layout. This view shows all the blocks on your website, though as noted above, it’s possible to restrict individual blocks to certain pages, roles, and content types.

From the Operations column, it is possible to Configure, Disable, or Remove any block. The Configure option opens the same page described in the above Configuring Blocks section.

The Block column shows various regions: Header, Primary menu, Secondary menu, Highlighted, and so on. You can move blocks by either clicking and dragging them from one region to another (use the pencil icon), or select a new region from the dropdown list in the Region column.

Click Demonstrate block regions to see a graphical representation of all regions.

While it is not possible to move blocks from this view, it will give you an idea of their placement. When done, click Exit block region demonstration to return to the Block Layout page.

Creating blocks

From the Block Layout page, click the Custom Block Library tab, then click Add custom block.

As when creating content, note you can insert links and images.
Enter some text in the Block description and Body fields, then click Save.

Return to your Block Layout page. You can either add your newly created block to an existing region, or designate a new one, though the process is very similar either way.

Select a new block by scrolling to the Sidebar second option, then click Place Block. Locate your newly created block in the provided list, then once again click Place Block.

This brings you to the Configure Block page for your newly created block, which you can always edit later. See the Configuring Blocks section for more information about your options. Click Save Block when ready.

Return to your home page to view the results!

Nexcess
Nexcess

Nexcess, the premium hosting provider for WordPress, WooCommerce, and Magento, is optimized for your hosting needs. Nexcess provides a managed hosting infrastructure, curated tools, and a team of experts that make it easy to build, manage, and grow your business online. Serving SMBs and the designers, developers, and agencies who create for them, Nexcess has provided fully managed, high-performance cloud solutions for more than 22 years.


We use cookies to understand how you interact with our site, to personalize and streamline your experience, and to tailor advertising. By continuing to use our site, you accept our use of cookies and accept our Privacy Policy.