Rich content made easy with Bloqs

Tuesday, August 16th, 2016

Do you want to build something that will make your ExpressionEngine content editor’s life 10x easier? Blocks may be just what you’re looking for. Plus, it’s going to make your life as a developer 10x easier too.

Make ExpressionEngine templating tidy

There are many ways to create and maintain ExpressionEngine (EE) templates. Over time, template structures can decay from repeated small updates needed for incremental changes to visual layouts. Plus, expansive site templates that support a variety of contents and conditionals can quickly become a markup nightmare. ExpressionEngine’s native embeds help templates stay organized. However, embeds can add extra load time – never a desired outcome. Thankfully, the ExpressionEngine add-on Bloqs (named Blocks for EE2) aims to solve these challenges. Bloqs helps developers keep markup clean and organized, and it provides content editors a simple UI to create dynamic layouts and content types to meet their layout requirements.

Keep ExpressionEngine channels and custom fields refreshingly simple

EE channels can easily become loaded with custom fields to address the needs of detail-oriented editors and visually complex layouts. Bloqs can save the day here! Using Bloqs, you can group together custom fields and provide simple UI for your content editors. Blocks are made up of single field types known as atoms. Complete blocks can be added to any channel that has a bloqs field within it. A block channel field will allow for a content editor to add, remove, and reorder any block type that is active on the channel field. Any EE developer comfortable with the native Grid field (in EE 3) or Matrix field (in EE 2) will be right at home.

We use Bloqs to create dynamic “Page Builders” that greatly reduce our unique field types, keep our templates and channels organized, and empower our clients to control their site pages with ease.

Introducing you to the Page Builder channel concept

I’ll walk through a hypothetical setup of a channel and template with Bloqs to help you better understand its use and get you up and running with some rich and tasty content. We like to call this style of channel a “Page Builder”. We call it a Page Builder because it results in a set of content modules (blocks) that can be selected, arranged, combined and configured with content in thousands of different ways. So, content editors can have a huge selection of content options. And, instead of creating content with a wide-open WYSIWYG field (while you cross your fingers they don’t break everything or make something ghastly) they’re picking a type of module type, choosing some pre-selected styles and adding their content. Blocks could be something like an Image Content block (an image with title and description) or Resource block (a thumbnail image, PDF link, title, description and visual style).

Since blocks are logical groupings of repeatable field sets you will need to analyze your layouts requirements to see where grouping and repeatable sections can be leveraged. In thinking about a standard page used for information and simple copy we can provide our content editors with blocks to create a dynamic page layout. Our standard page in this example will have an Introduction block, a Full Width Content block, and an Image Content block.

Blocks are stored within the Bloqs module of your ExpressionEngine control panel. Blocks are built the way you would build a Grid field. For the Introduction blocks, we will add some atoms: intro_image (file), intro_heading (text), intro_summary (textarea), and intro_heading_size (select). The full-width content section will contain: heading (text), content (rich text), heading_size (select). Lastly the image-content section: image (file), heading (text), content (rich text), heading_size (select), image_position (select). These blocks are now ready to assign to a blocks channel field, in this case ours is called page_builder. The separation of blocks from your sites channels and field groups helps in organization and the overall maintainability of blocks. Only block assigned to a Bloqs channel field can be used.

Our template markup will look something like this:

{page_builder}
  {intro_section}
    {if intro_image}
      <img src="{intro_image}" alt=""/>
    {/if}
    {if intro_heading}
      <{intro_heading_size}>{intro_heading}</{intro_heading_size}>
    {/if}
    {if intro_summary}
      <p>{intro_summary}</p>
    {/if}
  {/intro_section}
  {full_width_section}
    {if heading}
      <{heading_size}>{heading}</{heading_size}>
    {/if}
    {if content}
      {content}
    {/if}
  {/full_width_section}
  {image_content_section}
    {if image}
      <img src="{intro_image}" alt="" style="float:{image_position};"/>
    {/if}
    {if heading}
      <{heading_size}>{heading}</{heading_size}>
    {/if}
    {if content}
      {content}
    {/if}
  {/image_content_section}
{/page_builder}

Your content editor is now free to add as many blocks of content as they need, and reorder them to fit the order of content necessary. Meanwhile, you don’t need extra template markup or unique template fields. Certainly these blocks are simple and you may be required to create larger blocks. But don’t worry! The Bloqs add-on is compatible with native EE field types, as-well-as some other popular third-party add-ons.