4

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?

2 Answers 2

2

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.

2
  • I did take a look at Matrix and came to the same conclusion, that it'd get overwhelming quite quickly. Entry Widgets on the other hand, looks like it might fit the bill perfectly. I'll take a look at that, thanks very much. Aug 8, 2013 at 6:41
  • I've had a go with Entry Widgets and while it's a little rough around the edges (it needs a few code fixes to get it to work out of the box), I think it'll do nicely. Thanks again for the suggestion. Aug 12, 2013 at 8:46
0

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.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.