Split Channel Entries via {exp:channel:entries}

Question

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

Answer 1

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!

Answer 2

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}