Drupal7: Paragraphs Module for Easy Content Layout

David G - DrupalI attended a monthly local Drupal Users group meetup recently. A co-worker recently attended Amsterdam DrupalCon 2014. In our local meetup we discussed simple user experience approaches to give content creators flexibility when creating content, while attempting to allow Responsive Design within our theme. Typically I give access to a WYSIWYG editor to clients when creating content in Drupal. But, when my co-worker attended an informal BOF meetup in Amerstam he said they discussed using the Paragraphs module in Drupal7. It’s definitely an interesting take on placing content on your Drupal site affording of flexibility.

If you recall I once talked about the Field Collection module and used it to show how you could store multiple values in 1 Field in Drupal.

Node with Drupal Field of type field_collection called "references"

Node with Drupal Field of type field_collection called “references”

This is create for building relationships between data. The Paragraphs module is conceptually similar to the Field Collection module — but with a few differences:

  • Different fields per paragraph bundle
  • Using different paragraph bundles in a single paragraph field
  • Displays per paragraph bundle
  • Bundles are exportable with features.
  • Entities, so: exportable field bases/instances, usable in Search API, usable in Views

So this module provides a similar field to a FieldCollection but: the configuration for the collection of items can change per instance, every item can be a different paragraph bundle, every bundle can override its displayed output — and it’s a 1st class Entity citizen in drupal.

By taking all these concepts into consideration. We could have a fairly flexible site content definition component (I kinda just made up this term). Let me explain — if you create a drupal Page using a WYSIWYG editor you end up using an interface like this:

A drupal Page content type with a WYSIWYG body field.

A drupal Page content type with a WYSIWYG body field.

This produces a static webpage layout. With some fancy CSS it could be a little responsive — but things like responsive images are difficult using Drupal and a WYSIWYG. It’s hard to theme this output in CSS, and for a content editor if they float-right an image in some writing using a wysiwyg style it’s always that way across all devices. The css rule, or style, is embedded by the WYSIWYG into the content. As an example on a small smartphone device if you wanted to show this image on its own block above the text — it could be difficult to achieve the desired layout:

Desired content layout across devices, hard to achieve with static positioning of wysiwyg editors.

Desired content layout across devices, hard to achieve with static positioning of wysiwyg editors.

So enter the Paragraphs module. If it helps you can think of this module as the baby little brother implementation of a facet of NPR’s COPE: Create Once, Publish Anywhere. By using Paragraphs we can try to achieve this tenant of COPE:

truly separate content from display, the content repository needs to also avoid storing “dirty” content. Dirty content is content that contains any presentation layer information embedded in it, including HTML, XML, character encodings, microformats, and any other markup or rich formatting information. This separation is achieved by the two other principles, content modularity and content portability.

Using Paragraphs:

After installing Paragraphs you can create Bundles of paragraphs. For instance in our trivial example above we can create a piece of content that is comprised of an image and text (or a sequence of images and text blocks):

A trivial, yet flexible Paragraphs bundle.

A trivial, yet flexible Paragraphs bundle.

Now that we have a Field in Drupal we can apply it to a Content Type. If I create a Page-like content type without a Body field and instead use our Paragraphs bundle I’m saying “Here’s something like a page that has images and text blocks”.

We can add the Field to a custom content type:

Add Paragraph bundle to Type.

Add Paragraph bundle to Type.

And define its instance field settings (eg only 1 item is allowed or unlimited amounts of this type of content, what Paragraph bundles):

Instance configuration for Paragraph field.

Instance configuration for Paragraph field.

Then we can try to add a sample custom page to our site making use of this new field configuration:

Add new Node content. We add  N instances of Paragraphs now, there is no single Body field.

Add new Node content. We add N instances of Paragraphs now, there is no single Body field.

Our example sample content being filled out by content moderator.

Our example sample content being filled out by content moderator.

Final sample dummy content created by Drupal with default Themeing applied.

Final sample dummy content created by Drupal with default Themeing applied.

What has this given us? In this trivial example — if we also use Display Suite we can define layouts for these pieces of content, individually, and per context. So our Image field could use the Picture module to define responsive image styles.

So you could achieve the following content structure(s) on your page:

A simple page with 3 main sections:
[    Image   ]
[     Text   ]
[ Slideshow  ]

A page with alternating Left and Right side images per paragraph.
[ Image ][ Text ]
[ Text  ][ Image ]
[ Image ][ Text ]

A spotlight of Highlighted Content above a grid of Products:
[    Hightlight Content   ]
[ Prod1 ][ Prod2 ][ Prod3 ]

In order to achieve the above content structure you would use Paragraphs Bundles to setup a configuration for each row of your content. Eg you need the following Paragraph bundles:

  • Text
  • Image
  • Slideshow
  • Image + Text
  • Hightlight Content (entity reference field)
  • Product (entity reference)
  • Product1 + Product2 + Product3 (entity references)

And you would use Display Suite to design how these types of page elements appear in the context of some page.

Setting up Display Suite and themeing this example is a bit beyond the scope of this article, I simply wanted to share this new way of defining the content within a page. It has some pros and cons:

Pros

  • Elements, or content pieces within a Node are individually targetable by DS and Drupal view_modes. Using DS whole layout template(s) around a bundle could be made.
  • Content separation from Presentation.
  • Nearly limitless ordering and placement content pieces (images, text, videos, slideshows could all be fields)
  • Complex layouts with images floated right or left with inline text are possible by lay people by just adding the images/text using Paragraphs and the site Designer creating the appropriate CSS.
  • Drupal 8 Port in the works now!

Cons

  • Relatively new module
  • Are there Performance concerns of large “pages” or pieces of Content? A page isn’t a body field, its N paragraphs now. Entity caching should avoid problems though.
  • No live preview (yet) of output — like COPE it’s hard to know what the final output will look like.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under Drupal | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

One Comment on Drupal7: Paragraphs Module for Easy Content Layout

  1. Pexnet says:

    Wow . great Post . Thanks
    I Like Arvixe <3

Leave a Reply

Your email address will not be published. Required fields are marked *