Matrix Functionality with Blocks for ExpressionEngine

Creating Matrix Functionality With Blocks for ExpressionEngine

February 8, 2016 by Ryan Masuga

We used Blocks on an ExpressionEngine 2 site to help create a rich and flexible content entry experience for a client. We wanted to allow them to insert rich text areas, images, videos and more without having to get into the actual HTML. Blocks allowed us to do all that...with one exception.

We gave the client rich text blocks, image blocks with transparent text overlays that could be floated to the right or the left, video blocks, various multi-column layout blocks, and more. But the one thing we could not do was use Matrix in a block (this article is referring to Blocks 1.4.3). This was an issue because the client wanted the ability to put image and testimonial carousels anywhere in their pages.

We thought up clever ways to do this, including one that involved separate channels for images and testimonials that we could then pull together into a block using the built-in Relationships field field or the third-party Playa field. Although that would have worked, it didn't seem like a good experience for the client, having them leave their entry to make sure an entry was saved to another channel before they could use it in the block they were working on at that moment. It would take them out of the flow of editing the page.

We settled on a trick with Blocks and how it checks for the block shortnames using {blocks:previous:shortname} and {blocks:next:shortname}. Until there is the ability to put a Matrix in a Block, this is the least clunky solution.

The tag parameters and element classes have been simplified or removed to make the example code clearer. The couple "slick" classes you see are referring to Slick carousel, which we used for the carousels on this site build.

{exp:channel:entries channel="work"}

{work_bands}

	{!-- Basic rich text block (here as an example) --}
	{full_text_block}
	<section>
		<div>
			{text}
		</div>
	</section>
	{/full_text_block}


	{!-- Image: Carousel if more than one in a row --}
	{image_carousel}
		{if "{blocks:previous:shortname}" != "image_carousel"}
		<section class="carousel slick-img">
		{/if}
				<div>
					{image}
					{exp:ce_img:pair src="{url}" width="1200"}
						<img src="{made}" alt="" />
					{/exp:ce_img:pair}
					{/image}
				</div>
		{if "{blocks:next:shortname}" != "image_carousel"}
		</section>
		{/if}
	{/image_carousel}

{/work_bands}

{/exp:channel:entries}

The things to look for are the "if" statements that look for the previous or next block's shortname to know whether a new section should be opened or an existing section should be closed. This means that if the content editor puts multiple image_carousel blocks next to each other, the template will know to group them together into a single section, and the Slick script will know to make a carousel out of it. If there is only one image_carousel block, then it shows as you would expect, and Slick ignores it, not adding left/right navigation arrows.

Here's an example for the testimonial carousel, using the same idea:

{quote_carousel}
	{if "{blocks:previous:shortname}" != "quote_carousel"}
	<section class="carousel slick-car">
	{/if}
	<div class="carousel-quote-center">
		{quote}
		<span>&ndash;{citation}</span>
	</div>
	{if "{blocks:next:shortname}" != "quote_carousel"}
	</section>
	{/if}
{/quote_carousel}

We had to make sure we fleshed out the field instructions well enough so the client understood how these blocks worked. This isn't the most elegant solution, but it does the trick, at least until it is possible to use Matrix in Blocks.

You Might Also Like

More from Masuga

Subscribe to receive our newsletter.