I've got a project where I'm trying to set up a basic page layout – header, body, footer. But I also want the option for a user to add an image or bit of content (let's call it a "sidebar") that splits the body section into two columns – one for body copy on the left and one for the new content on the right.

For this, I'm using a Matrix field (for the user to create sidebar content on the fly) and Bootstrap (for the grid). When sidebar content is created for the entry, I'm hoping to be able to add a "col-sm-8" class to the body wrapper, as well as add a div with the "col-sm-4" class for the sidebar column for it to reside in.

Now, I have experience with creating static layouts in Bootstrap, but I'm woefully inexperienced at dealing with anything related to coding logic that isn't an if/else statement, and I can't seem to work out the code for Matrix in Twig.

I also need to be able to add different kinds of content (or blocks) in the sidebar, so the logic should also need to check for whether one or more kinds of blocks are populating, but still apply the same effect.

Can anyone provide an example of how to do this?

Logic Example

edit: BTW, I have read the documentation on templating Matrix fields. I just don't know how to check for multiple block types in order to print a class name & create a new column.

  • 1
    Although an indirect answer I would suggest you download and setup the happylager site from Pixel & Tonic. The Services section is setup as a dynamic Body Builder and it's based on Bootstrap. You could use this as a template and get yourself familiar with the Matrix fields.... – Nutmeg Dec 21 '16 at 23:35
  • Thank you! I was intimidated by digging through all of that, but now that I know which section to hone in on, I'll give it a shot. – MisterCritter Dec 22 '16 at 13:39

It looks like you can check for the total number of blocks within a matrix block. So if you check that the length is greater than 0, you could then apply the classes.

{% if entry.myMatrixField|length > 0 %}
    <div class="col-sm-4">
        // other code
{% endif %}
  • No problem :) Would also second @Nutmeg on having a play around with the happylager site to familiarise yourself with the basics – Laura Montgomery Dec 23 '16 at 10:10

Why not use:

{% if block.sidebar|length %}
    <div class="col-sm-8">
{% else %}
    <div class="col-sm-12">
{% endif %}

This way the column will automatically be smaller IF the side bar exists.

  • I think there's an issue with using "block.sidebar" to designate the field as opposed to "entry.sidebar", because this didn't work, but thank you for the suggestion. – MisterCritter Dec 22 '16 at 15:10
  • I was 90% sure that you could omit the > 0 but didn't have a craft build up and running to quickly test. Good call. – Laura Montgomery Dec 23 '16 at 10:08
  • 2
    You can do this inline to avoid the repetition, so class="col-sm-{{block.sidebar|length ? '8' : '12'}}" – aw04 Dec 23 '16 at 20:27
  • Great tip, I'm using bootstrap myself, so this comes in handy :-) – noregt Dec 24 '16 at 11:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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