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

Keep it Brief. Life is not Email.

January 24, 2017 by Ryan Masuga

Life is short. It's amazing you're even here. Why are you spending so much of your time writing email?

Ask Qualifying Questions Early to Avoid Red Flag Prospects

September 13, 2016 by Ryan Masuga

I find red flags with potential prospects early by asking basic qualifying questions about timelines and budgets. Reading between the lines helps everyone move on before too much time is spent on a project that isn't an ideal fit.

Masuga’s Expensive Mistake: Our HubSpot Inbound Marketing Experiment (Part 2)

September 9, 2016 by Ryan Masuga

In Part 2 of our HubSpot Inbound Marketing Experiment, I share our experience over our first few months with HubSpot and our inbound marketing efforts, and how we eventually called it quits.

Masuga’s Expensive Mistake: Our HubSpot Inbound Marketing Experiment (Part 1)

September 8, 2016 by Ryan Masuga

In Part 1 of our HubSpot Inbound Marketing Experiment, I explain our decision to go all-in on HubSpot and the idea of inbound marketing to help our early 2016 revenue woes.