Skip to main content

Blog Post

Creating Content With Rain

Rain logo updated

Mediacurrent created the Rain Install Profile to build fast, consistent Drupal websites and improve the editorial experience. Rain expedites website creation, configuration, and deployment.

Our blog series has outlined how Rain makes life easier for the core technical roles — site admins, backend and frontend developers — to build and maintain a Drupal website.

In our final tutorial, we will show content authors and editors how to create, schedule and moderate content using the Rain profile. There are dozens of content features that ship with Rain and give greater publishing power to this sometimes forgotten end user. We will do our best to cover them all!

If you have a question or comment, feel free to reach out on Twitter @drupalninja.

Content construction

The Rain install profile comes with 11 optional content types that can be leveraged on any new build. Each content type follows a consistent pattern that will aid both editors and developers.

The first thing we did is divide all fields into three main groupings, borrowing an approach taken by the Thunder distribution. Each content type by default will organize fields into “Basic”, “Summary”, and “Content” groups which we will cover next.

Basic fields

The “Basic” group of fields always includes “Title” and “Short title” fields by default. Some content types like Blog and Article add a “Subhead” field to this area as well. We include the optional “Short title” field to give editor’s an option for an abbreviated title which is required by many designs. A short title means that editors will not have their content titles truncated by hard character counts. It’s up to the developer to implement this functionality where desired but we include this field as a best practice.

summary fields

Screenshot of the “Basic page” content type “Basic” fields area

Summary fields

The “Summary” fields area attempts to gather fields that are used when content is displayed within a list. As a default, all content types will include an optional thumbnail field and summary text field. We have found that designating these fields makes it easier for editors to control the appearance of content inside of lists from while also making life easier on developers. Developers can build Views and displays that leverage these fields in a consistent way.

summary fields

Screenshot of the “Basic page” content type “Summary” fields area

Content fields

The “Content” field area is primarily the designated area for the “meat” of the page. Traditionally the meat of the page in Drupal or Wordpress is driven by a large Wysiwyg field, often labeled as the “Body.” As an alternative approach, we provide a Paragraphs field that lets content editors have more freedom in how they compose content on the page. By default, any Paragraph type can be used, but site administrators can lock down Paragraph types per content type if desired. Note we will look at each Paragraph type included with Rain later in this tutorial.

content fields

Screenshot of the “Basic page” content type “Content” fields area

Taxonomy fields

Last but not least, we have a “Taxonomy” group of fields that contain any taxonomy fields present on certain content types. The “Article” content type, for example, has the “Tags” and “Authors” fields in this area. We recommend any Taxonomy fields that site admins add be grouped in this area.

Rain Content types

Now that we have covered the basic construction of content types in Rain, let’s take a brief look at each content type feature that ships with our install profile. Note that all of these are optional features and can be easily customized.

Article

An article is generally defined as a piece of writing included with others in a newspaper, magazine, or other publication. By default, we add a “Subhead” field to the “Basic” fields area and a set of Taxonomy fields.

Basic page

The most common content type in any CMS is the basic “page” content type. This content is used for more “static” content, i.e. content that does not frequently change.

Blog

In Rain, Blog article content is identical to the “Article” content type. We provide this feature for organizations that like to delineate blogs from other article content.

Event

The event content in Rain adds a couple of fields to the base set of fields you see on all content types. The first is a “Dates” field where the author indicates the beginning and end of an event. The second field is an optional link field that includes more detail about an event. Oftentimes, events in Drupal are linked to an external calendar or third party event system. Rain also ships with a default “Upcoming Events” View that lists event teasers for any events that have a future date. When combined with the “List View” paragraph, this makes it easy for editors to embed a list of events on any page.

event fields

Screenshot of Event basic fields

Homepage

The “Homepage” content type by default adds no additional fields to the “base” set of fields present on all Rain content types. That being said, homepages often deviate from other pages so having this content live as its own type can be an advantage. Homepage content for example often has one-off fields and other customizations not present on other pages. Another advantage is that it is easier for developers to filter out homepage content in searches and other Views when homepages exist as their own distinct content type.

Landing page

The “Landing” page content type also adds no additional fields but similar to homepages, landing pages often deviate from other content pages. While this content type leverages Paragraphs by default, it is also a good candidate to leverage Drupal’s core layout builder.

Press release

A press release is defined as “an official statement issued to newspapers giving information on a particular matter.” The press release content type is similar to articles in that it adds “Tags” and “Authors” under the Taxonomy group.

Product

In Rain, the product content type adds a few fields: “Product Media”, “Product Description”, and “Link.” Many sites will have this content placed near the top of the page, with the long form description below. The Paragraphs field still allows flexibility for the long-form area to include rich content (FAQs, Gallery, Quotes, etc.). The Rain Product feature also ships with a “Related Products” view that lists other product teasers on the site.

productfields

Screenshot of Product-specific fields

Profile

The “Profile” content type is intended to handle a lot of use cases such as a team member page, author page or biography. This content in Rain adds a “Profile media” field to the base set of fields which is typically used as a headshot image.

Resource

In Rain, “Resource” content is intended to be used for library content such as Video, whitepapers, documents and any other type of media. This can sometimes include gated content as well. We have seen many builds over the years break out resource content into separate types. While this does have some advantages, more often than not the content is similar enough to consolidate into one umbrella content type. We add the “Resource type” taxonomy which allows editors to define as many resource types as necessary without requiring additional content types.

The Rain “Resource” content adds a “Resource media” field to the other base fields. This field is typically either rendered inline or presented as a download option. It’s up to developers to implement the desired functionality. We also ship a “Resource library” View that lists resource content with an exposed filter for “Resource type.” When combined with the “List View” paragraphs, this makes it easy for editors to embed a list of resource teasers on any page.

Webform

The webform module creates a “Webform” content type that allows editors to attach Webforms that have been created on the site to a page. In Rain, we simply attached our other “base” fields to this content type in order to have all the content types follow the same basic structure. Note that editors can attach a Webform to any other content type by alternatively using the “Form” paragraph.

web form fields

Screenshot of Webform fields

Paragraphs

As you probably know by this point, the Rain profile uses Paragraphs extensively. We currently ship 16 optional Paragraph types with the install profile. As with most everything in Drupal, these features able to be customized per build. As an additional benefit, we ship a base theme with Rain that integrates our Paragraph types with style guide components in order to give Frontend developers a jump-start in development. Next, we will walk through each Paragraph feature to explain usage and benefit.

add a paragraph

Screenshot of “Add Paragraph” dialog

rain theme style guide

Rain theme style guide

 

Rain Paragraphs

Breaker

The “Breaker” paragraph leverages the “Card” paragraph type detailed next but renders on the page using a different component from the style guide. A “breaker” in web design is typically a full-width card (see below).

full width component in Style Guide

Full-width Card component in Rain style guide

Card & Card List

The “Card” component is one frequently used in web design. The Rain profile includes both a “Card” and “Card List” paragraph feature. These collect primarily an optional image, heading fields, description, and link which will render usually as a teaser (see below). A “Card List” is simply a collection of cards which can render vertically or horizontally on the page. Cards are particularly useful on landing pages and homepages.

card component

Card component from Rain style guide

card list vertical

Card List vertical display from Rain style guide

Embed

The “Embed” paragraph addresses a common problem, which is that editors need the ability to sometimes embed a third party script (e.g. Twitter, Facebook post) onto a page. This can be a challenge inside of a Wysiwyg field because even if it renders, it can easily break or cause unwanted side-effects. 

The “Embed” paragraph will disable Wysiwyg and only allow two HTML tags frequently used for third-party embeds. Because there are security implications with this type of content we advise that site admins only allow privileged users such as content editors to have the ability to use this paragraph.

embed paragraph

Screenshot of “Embed” paragraph form

FAQ

The “FAQ” paragraph type allows authors to add question and answer pairs onto the page. By default, this renders in the “Accordion” component with the Rain style guide (see below).

Rain accordian component

Rain Accordion component

Form

As mentioned earlier, Webforms can be added to the site in one of two ways. One way is through the Webform content type. The other way is by attaching a Webform to the “Form” paragraph (see below).

form paragraph

Screenshot of the “Form” paragraph

Gallery

The “Gallery” paragraph allows authors to render a collection of images onto the page. By default, this will render as a grid of thumbnail images that open up the full image inside of a lightbox pop-up.

galley lightbox

“Gallery Lightbox” Rain style guide component

Gallery Carousel

The “Gallery Carousel” paragraph also embeds the card field along with an optional title and subhead. This paragraph collects an image, headings and a CTA link for each card which will render on the page as an interactive Carousel component.

Hero Media

In Rain, the “Hero Media” paragraph leverages an embedded “Card” paragraph to render a hero image with headings and an optional call-to-action. The main difference with Hero content is the way it will render on the page. The “Hero Media” paragraph will render using the “Hero” component (see below).

hero media

“Hero Media” Rain style guide component

 

List View

The “List View” paragraph gives editors the ability to easily embed a View onto a page. Typically developers or site administrators will be tasked with creating Views on a Drupal site. This Paragraph simply makes it simple to pull any View into the content area. There are more advanced options available but the autocomplete “List View” field is the only value required for this paragraph to render on the page.

list view

Screenshot of “List View” paragraph

 

Map

The “Map” paragraph by default will use Google Maps to allow editors a way to render a map with pin(s) onto a page. The editor simply types in an address and moves around the map widget to find a place to drop a pin (see example below). There are other map providers that site admins can configure as well but note that API keys will typically be required in order for the map to fully function.

map embed

Screenshot of map embed

Media

The “Media” paragraph is a simple way for editors to embed a stand-alone media item into the content area, which typically will render full-width on the page.

Page Title

In some cases, authors will like to move the page title below other content. The “Page title” paragraph feature allows editors to play a hero or other content at the very top of the page above the title area. There is only one field on this paragraph will designate which heading HTML tag to use (h2, h3, etc.) when rendering the title.

Quote

The “Quote” paragraph gives authors a simple way to embed a pull-quote. Oftentimes a pull quote component is used to draw attention to a quote cited within a story. As with other paragraphs that ship with Rain, this feature is pre-integrated with a style guide component.

quote

Screenshot of the “Quote” paragraph

 

Text

Last but not least is the “Text” paragraph which effectively replaces the traditional “Body” field. Like the “body” field, the “Text” paragraph has Wysiwyg enabled by default. The advantage of course with our approach is you have many ways to break up content on a page in a flexible way.

Scheduling content

The Rain install profile integrates the “Scheduler” module on every content type by default. You will see this option in the right sidebar of every edit page (see below).

scheduling options

Screenshot of Scheduling Options

One caveat with content scheduling is that can overlap with content moderation. The simple way this feature works on Rain is that scheduling content to be published with override any workflow state (e.g. Review, Draft). This means that you may want to have site administrators limit permissions to this setting.

In order to see all content that is queued to be published, you can simply visit the main admin content page and click on the “Scheduled” tab (see below).

scheduled content

Screenshot of “Scheduled Content” page

Moderation

By default, Rain comes with content workflow states configured but not enabled for content types. In our tutorial for site administrators, we cover how to enable this feature for content that will require moderation.

Once enabled, you will see a workflow state dropdown near the bottom of each edit form, with the default state being set to “Draft.” There are many ways to configure Workflow states in Drupal, but we start with the following set of common states: Draft, Needs Review, Published, and Archived.

workflow state

Screenshot of workflow state

To see all content that is in a state of moderation, you can find the link to the “Moderated Content” view from the main admin content screen (see below).

moderated content

Screenshot of “Moderated content” page

There are of course many ways to configure advanced workflows, notifications and so on but this is a simple set of defaults to get organizations set up with moderation. It should also be noted that an advantage of moderation is that new drafts can be created and reviewed while the previous published version remains visible to the public audience.

Wrap-up

Our final tutorial walked through how to author, schedule and moderate content using the many content features that ship with the Rain profile. We covered some of the philosophy behind how content is modeled in Rain, with tips and usage for content types and paragraphs. The end result is a set of features and integrations that make authoring content easier while also jump-starting development. We hope that you have found this article and tutorial series helpful.

Did we miss anything? Let me know at https://twitter.com/drupalninja/.

Headshot

Meet team member, Jay Callicott

An enthusiastic Drupal developer of ten years, Jay spent six years as Mediacurrent’s Lead Architect before transitioning to his current role in 2015. As the Vice President of Technical Operations, Jay helps to foster best practices and shape processes for Mediacurrent's development team. An active contributor to the Drupal community, Jay has developed dozens of custom modules, coded themes, and written install profiles for projects from Drupal 5 through Drupal 8.

Prior to Mediacurrent, Jay worked as a PHP developer in Little Rock, AR. During that time, Jay worked on several large PHP builds including the Arkansas Drug & Alcohol Testing Database, the Arkansas State Police FBI Civil Harvesting Application and the Arkansas Governor Newsroom which won his agency an e-government award that year.

During his 8 years at Mediacurrent, Jay has led teams on dozens of projects including more recently Turner.com, Jamaica Star, and University of Georgia. He maintains several key marketing automation modules (Pardot, Silverpop, Eloqua, Hubspot, and Automate) that have helped solidify Mediacurrent as a thought leader in the marketing automation space. Jay created and actively maintains one of the most popular distributions on Drupal,  OpenChurch, which has over 100,000 downloads. A Drupal 8 version (relying almost entirely on core modules) was recently released.

Outside of work Jay enjoys family time with his wife and two young children. He stays involved with his local Little Rock church and also volunteers time on occasion to help build faith-based charity and church websites.

Learn more about Jay >

Related Insights