Shows the slices field with the Header and Full Width slices added to it.

Drupal With Slices And Paragrphs

The winds are a changing. Or, there is the potential for change in the near future. Currently I am looking at what it would take to move my employer’s site off of Joomla and on to Drupal. One of the things I am looking at is how to deal with content creation and management.

In my research through Drupal’s module library, I found a module called Paragraphs. It’s purpose is to break down content into ‘paragraphs’. These can be defined as section of content with an image to the right, or have three columns with a header. As you are creating a page, you ‘assemble’ these as need to fit the content you are creating. A page can any number of ‘paragraphs’, and they can be arranged into any order.

While looking into Paragraphs, I came across a blog post by Zakiya Khabir, titled Paragraphs vs. ECK for Drupal 8. In her blog post, Zakiya described a different method of accomplishing nearly the same thing using the Entity Construction Kit (ECK) and Inline Entity Form (IEF). The article went on and explained the strengths and weaknesses of both approaches. Over all it was a tie, but I was intrigued.

In my test instance of Drupal 8 running on a local VM, I installed the recommended beta versions of both modules. IEF installed smoothly, but when I installed ECK, I got a 502 error from the server. When it happened the first time, I hit the back button, and everything seemed to be fine. So I continued forward.

For the life of me, I couldn’t get the ECK/IEF setup to work as was explained in the article. I set up the Entities, and the bundles. All I could get was a link to the content inside of ECK, instead of it being embedded in the page. After finding anther article published by Chapter Three, The Slice Template, I figured out that there was something very broken about my installation of ECK.

While trying to fix the problem, I ran into another snag. It turns out that there is a bug in the recommended beta release that doesn’t delete all of the data out of the database when an entity is deleted. So when I uninstalled ECK, it broke my Drupal install hard. Luckily I had made a snapshot of the VM before installing these modules, and I was able to revert back, and had a stable running system again.

Still wanting to try this new method out, and not wanting to install the recommended release beta of ECK again, knowing it was broken, I took a gable and installed the dev version instead. Now, I usually DON’T recommend this, especially on any Drupal install that is considered remotely a production machine. You take a chance of really messing up your Drupal installation.

Since I knew that I was just testing, and that I could revert back if things got messed up again, I went ahead and installed the dev version of ECK. Unlike my experience with the beta, I didn’t receive any errors this time, and the installation finished smoothly.

I noticed right away that there where a couple of differences between the dev and beta versions. First was that this version has the deleting data issue fixed, and second is that entities created by ECK where no longer in the ‘Other’ section when linking a form element to an entity reference. They are now in the ‘Content’ section. This time, it worked.

Here is how I did it:

  1. Create a new Entity called ‘Slices’
  2. Add new bundles. These are going to be your slices, or paragraphs. I gave mine names like ‘Four Column’, ‘Image Left’, ‘Header’, etc. The fields you give each Slice will determine what types of content it will hold, and how they are formatted.
  3. Create or edit a content type to add a new ‘Entity Reference’ field. Point this to your newly created slices.
  4. In ‘Manage form display’, choose ‘Inline Entity Form – Complex’ as the widget. Set the settings so you can create and reference existing slices.
  5. Remove the ‘Body’ field, as you won’t need it anymore.

You should end up with a field that now looks like this after adding a couple of slices:

Shows the slices field with the Header and Full Width slices added to it.

I strongly suggest that you do read the two articles from ChaperThree. They help explain this concept more clearly than I can, even if you are planning to use Paragraphs instead of the ECK/IEF solution.

Update (9/21/2016): It now looks like the 502 error mentioned earlier in this article wasn’t caused by the ECK module itself. My test instance of Drupal runs on PHP 7, and I installed APCu into it. The 502 errors where being caused by an issue with APCu. I was a getting this behavior every time I upgraded a module. Today I uninstalled APCu, and so far the errors have gone away.

I am still using the Dev version of ECK as I like the changes and in my testing it has been fairly stable.