Indiana University Paragraphs

Paragraphs for Indiana University

This module provides custom Paragraph types for building complex pages comprised of elements from the IU Pattern Library like section, grids, and chunks that conform to the design standards in the IU Web Style Guide.

This module should be used in combination with the IU Drupal Theme.

Supported widgets

Paragraph types currently available with this module include:

• Section - the top-level Paragraph type that you should add as a field on your content types; it supports background colors & images, parallax, as well as other display settings like height/width/padding, text alignment, and visibility rules, all from the standard IU Framework CSS.
• Text
• Image
• Carousel
• Call To Action
• Callouts & Pullquotes
• Feature
• Panels & Interactive Panels
• Accordion
• Stat
• Tabs - Not mentioned in the IU Pattern Library, but code was found in the IU Framework CSS for these. The implementation is based on Zurb Foundation Tabs and styling is completed via the IU Drupal theme
• Grid Layouts - Build rows of equal-width grid item columns.
• Drupal Block - Embed a Drupal block inside a Paragraph.
• Drupal View - Embed a Drupal view in a Paragraph via viewsreference module.
• Forms - Embeds a Drupal webform via the included iu_paragraphs_webform submodule.

Roadmap

The following widgets still need to be implemented to completely support the IU Framework:

• Banners - #2928104: Support Banner sections from IU Style Guide
• Image essays - #2929946: Support Image essays from IU Pattern Library
• Social Media Items
• Video & Audio

Contrib Dependencies

• Color Field 2.x - w/ patch from Issue #2854199 As of issue #2929965: Replace background color field with basic color selector, Color Field is no longer a dependency.
• Field Group
• IU theme
• Paragraphs - w/ patch from Issue #2868155: Add new hooks to allow easier editing of paragraph forms
• ViewsReference

Installation

1. Download and enable the module and its contrib dependencies (see above).
2. Open Admin > Structure > Content types > Basic Page > Manage fields.
3. Add a field named Sections of type Paragraph (aka Entity Reference Revision); For Reference Type, include only the Section type;
4. We recommend the Paragraphs Experimental field widget for Form Display.
5. Ensure your Sections field and node type display is configured in an Edge-to-edge layout. See Layout settings on the Manage display tab of your content type. (Field Layout and Layout Discovery modules must be enabled). We recommend leveraging the IU Page Layout from the IU theme for your field layouts. This custom layout provides two regions: Constrained and Edge-to-edge. Place the Body field in the Constrained region and the Sections field in the Edge-to-edge region. An alternative approach would be to use the Page Manager module to handle field layouts, but Page Manager is outside the scope of this instruction manual.
6. Ensure your theme is configured to display the Main page content in a region that spans the width of the screen (aka, edge-to-edge). We recommend using the IU theme which contains appropriately labeled regions to support both edge-to-edge (for node pages) and constrained for non-node page content. The theme comes preloaded upon installation with two Main page content blocks; one for node pages and one for non-node pages. The Main page content block for nodes is placed in the IU theme's Edge-to-edge region, while non-node Main page content block is in the standard Content region which has a constrained maximum width.

Credits

• Indiana University Libraries - for sponsoring initial development.
• Bluespark - for sponsoring ongoing development.

Special thanks to Paragraphs Pack and Bootstrap Paragraphs, both of which provided the initial code from which this module was forked.