Multiple groups of FieldTypes / Blocks of content

Question

I'm looking for a flexible way to define very specific blocks of content which can be used multiple times within a page. Some examples of these blocks would be:

• An image with text to the left
• An image with text to the right
• A formatted quote
• A full width image
• Two columns of text
• Two columns of text with an image at the top of each column

Each one of these blocks of content would represent a row of content on a page. I'm after the ability to be able to add any number of these blocks to a page in any order.

The nearest add-on I can find is Content Elements by Krea, but it is limited to single fieldtypes, whereas some of mine would combine more than one fieldtype. Looking at the docs, you can extend it, but I'm unsure as to whether what I'm trying to do is achievable. I have contacted the Developer for some guidance, but as yet I haven't heard anything back and time's a ticking.

So in the meantime, I wondered if anyone else has either extended this Addon, or alternatively solved this type of problem in a different way?

Answer 1

You could do it with Matrix and create a column for every possible piece of content, although it could get unwieldy.

Or maybe Entry Widgets will do what you need.

Answer 2

This is exactly what Blocks is designed to do.

Your template would end up looking similar to:

{page_content}

    {image_with_left_text}
    <figure class="left">
        <img src="{image}">
        <figcaption>{text}</figcaption>
    </figure>
    {/image_with_left_text}

    {image_with_right_text}
    <figure class="right">
        <img src="{image}">
        <figcaption>{text}</figcaption>
    </figure>
    {/image_with_right_text}

    {pull_quote}
    <blockquote>
        {quote}
        {if citation}
        <cite>{citation}</cite>
        {/if}
    </blockquote>
    {/pull_quote}

    {full_width_image}
    <figure class="full">
        <img src="{image}">
    </figure>
    {/full_width_image}

    {two_column}
    <div class="twocolumn">
        <div>
        {if image1}
        <img src="{image1}">
        {/if}
        {content1}
        </div>

        <div>
        {if image2}
        <img src="{image2}">
        {/if}
        {content2}
        </div>
    </div>
    {/two_column}

{/page_content}

(Full disclosure: I wrote Blocks.)