1

I have a matrix with a block type call pageRelatedContent. A user can add multiple block to their entry. I am trying to put all the pageRelatedContent blocks in one div row. For this example, I have three pageRelatedContent blocks in this entry. My code is generating three separate rows. Its a coding thing that I am missing. Can someone please assist.

Here is the rendered HTML: enter image description here

Here is the desired output: enter image description here

Here is my code. I can see that it is creating a row for every block, but I can't seem to figure out how to insert all the block in one row.

    {% case 'pageRelatedContent' %}
{% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
{% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
    {% set colSize = 12 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
    {% set colSize = 6 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
    {% set colSize = 4 %}
{% endif %}
    <div class="section-empty section-item">
        <div class="container content">
            <div class="row">
                {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
                {% for blocks in relatedBlockInfo %}
                <div class="col-md-{{ colSize }}">
                    <div class="list-group accordion-list">
                        <div class="list-group-item active-panel">
                            <a href="#" class="active"> {{ block.relatedContentTitle }}</a>
                            <div class="panel" style="display: block; height: 182px;">
                                <div class="inner">
                                    <ul class="list-texts text-left">
                                        {% for row in block.relatedLinkInformation %}
                                        <li><a href="{{row.linkUrl }}">{{ row.linkTitle }}</a></li>
                                        {% endfor %}
                                    </ul>  
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

Here is the matrix information: enter image description here

  • I'm voting to close this question as off-topic because it's not really a Craft question, this is a CSS question. .col-md-{{ colSize }} needs to be floated and have its width set to a third of the width of .row. Looking up info on CSS grids (maybe on Stack Overflow) will point you in the right direction. – Simon Kuran Aug 31 '18 at 17:44
  • How is this a CSS issues. For every block, it is generating the case code. There has to be some for of twig code that will not rewrite the row everytime it runs through the case. – Jason Aug 31 '18 at 17:49
  • Personally I'd adjust my CSS and HTML to change the layout. I find that cleaner. But you could check what the next matrix block is and conditionally add HTML. Something like this: craftcms.stackexchange.com/questions/1745/… – Simon Kuran Aug 31 '18 at 18:09
2

It wasn't a CSS issue. Lack of twig knowledge. Here is the final fix.

    {% case 'pageRelatedContent' %}
{% set relatedContentBlocks = entry.memberCommunicationsPageContent.type('pageRelatedContent') %}
{% if entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 1 %}
    {% set colSize = 12 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 2 %}
    {% set colSize = 6 %}
{% elseif entry.memberCommunicationsPageContent.type('pageRelatedContent')|length == 3 %}
    {% set colSize = 4 %}
{% endif %}
    {% set isFirst = not block.getPrev() or block.getPrev().type != 'pageRelatedContent' %}
        {% if isFirst %}
            <div class="section-empty section-item">
                <div class="container content">
                    <div class="row">
        {% endif %}
        {% set relatedBlockInfo = relatedContentBlocks|batch(colSize) %}
        {% for blocks in relatedBlockInfo %}
        <div class="col-md-{{ colSize }}">
            <div class="list-group accordion-list">
                <div class="list-group-item active-panel">
                    <a href="#" class="active"> {{ block.relatedContentTitle }}</a>
                    <div class="panel" style="display: block; height: 182px;">
                        <div class="inner">
                            <ul class="list-texts text-left">
                                {% for row in block.relatedLinkInformation %}
                                <li><a href="{{row.linkUrl }}">{{ row.linkTitle }}</a></li>
                                {% endfor %}
                            </ul>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    {% set isLast = not block.getNext() or block.getNext().type !='pageRelatedContent' %}
        {% if isLast %}
                </div>
            </div>
        </div>
        {% endif %}

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.