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.
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.
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.
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.
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.
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.
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.
Screenshot of “Add Paragraph” dialog
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 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 from Rain style guide
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.
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 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).
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.
“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” 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.
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.
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.
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).
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).
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.
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).
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/.