2

I have only recently started working with ExpressionEngine and am currently trying to port my HTML page and work with channels. I just came across a problem that I can't solve. I want to split the entries of a channel into two columns.

The code to display the same entries in both columns currently looks like this:

<div class="row">
    <div class="col-md-6">
        {exp:channel:entries channel="portfolio"}
            <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
                <a href="#web-development">
                    <figure class="cc-effect">
                        <img src="{image}" alt="Image" />
                        <figcaption>
                            <div class="h4">{title}</div>
                            <p>{aufgabe}</p>
                        </figcaption>
                    </figure>
                </a>
            </div>
        {/exp:channel:entries}
    </div>
    <div class="col-md-6">
        {exp:channel:entries channel="portfolio"}
            <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
                <a href="#web-development">
                    <figure class="cc-effect">
                        <img src="{image}" alt="Image" />
                        <figcaption>
                            <div class="h4">{title}</div>
                            <p>{aufgabe}</p>
                        </figcaption>
                    </figure>
                </a>
            </div>
        {/exp:channel:entries}
    </div>
</div>

What adjustments are necessary to make it possible to display half of the entries in the left column and the other half in the right column?

Thanks

2

Given that your code duplicates the same HTML for each column, there is also a way to do this simply using Bootstrap to generate the columns (it looks like you are using Bootstrap from your code sample). Using bootstrap to do the layout makes your template code easier to manage and reduces the number of transactions between your browser and EE - which all else being equal are probably good things to aim for.

There are lots of options for how you might do this using Bootstrap 4 - here is one to illustrate:

<div class="row">
    <div class="d-inline-flex flex-wrap">
        {exp:channel:entries channel="portfolio"}
        <div class="col-md-6">
            <div class="cc-porfolio-image img-raised flex-fill" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
                <a href="#web-development">
                    <figure class="cc-effect">
                        <img src="{image}" alt="Image" />
                        <figcaption>
                            <div class="h4">{title}</div>
                            <p>{aufgabe}</p>
                        </figcaption>
                    </figure>
                </a>
            </div>
        </div>
        {/exp:channel:entries}
    </div>
</div>

Enjoy!

| improve this answer | |
  • 1
    Thanks for this solution. It is the answer on my question. – Lars Mar 25 '19 at 10:13
0

Here is an example that outputs ten entries in one Channel Entries loop, and then the following ten entries in the second:

{exp:channel:entries
    channel="portfolio"
    limit="10"}

    {title}<br/>

{/exp:channel:entries}

{exp:channel:entries
    channel="portfolio"
    limit="10"
    offset="10"}

    {title}<br/>

{/exp:channel:entries}

Edit

Here is an example that makes it dynamic to split the entries in half in one Channel Entry loop:

{exp:channel:entries
    limit="11"}

    {if count < total_results / 2}
    <p>
        left - {title}<br/>
    </p>
    {if:else}
    <p>
        right - {title}<br/>
    </p>
    {/if}

{/exp:channel:entries}
| improve this answer | |
  • Is there also a way to do this dynamically, so that one half is always displayed on the left and the other half on the right? – Lars Mar 22 '19 at 15:06
  • I've edited my answer to try and provide what I think you're looking for. – jrothafer Mar 22 '19 at 15:34
  • 1
    the modulus operator can work well in these situations. docs.expressionengine.com/latest/templates/… {if count % 5 == 0} <hr> {/if} – Jim Wyse Mar 25 '19 at 12:58

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.