0

I'm trying to figure out how to get content dynamically from expression engine. Basically I have 6 article summaries as content. When the page loads, I'm getting 3 summaries, but I have a "show more" button. When it's clicked, I want to load the next 3 summaries but I don't know how to do this.

this is what my tags look like now:

{exp:channel:entries channel="blogposts" limit="3"}
    <div class='article-box'>
        <div class="article-image-box">
            <div class="article-image">

            </div>
        </div>
        <article>
            <h4>{title}</h4>
            <p class='author'>{blog_author}</p>
            <p>
                {blog_body}
            </p>
           <div class="ful-art-but-box">
                <button class="button green-but">
                    READ FULL ARTICLE
                </button>
            </div>
        </article>
    </div>

{/exp:channel:entries}
2
1

You could use the offset parameter:

https://ellislab.com/expressionengine/user-guide/add-ons/channel/channel_entries.html#offset

But that wouldn't be very efficient since you'd need two repetitive channel:entries tags which don't perform very well. You could instead use count to output different markup on different passes:

{exp:channel:entries channel="blogposts" limit="6"}
    {if count == 3}<div style="display:none">{/if}
    <div class='article-box'>
        <div class="article-image-box">
            <div class="article-image">

            </div>
        </div>
        <article>
            <h4>{title}</h4>
            <p class='author'>{blog_author}</p>
            <p>
                {blog_body}
            </p>
           <div class="ful-art-but-box">
                <button class="button green-but">
                    READ FULL ARTICLE
                </button>
            </div>
        </article>
    </div>
    {if count == total_results}</div><!-- close hiding div -->{/if}
{/exp:channel:entries}

... but that's not very readable or elegant in my opinion (I hate outputting disjointed chunks of opening/closing html tags, it becomes an ugly mess), so instead I'd use Stash with one set_list and two get_list tags, using offset and limit. Then if the actual markup for a single article becomes cumbersome you should abstract it out to a Stash embed to avoid the repetition.

{exp:stash:set_list name="entries" parse="yes"}
    {exp:channel:entries channel="blogposts" limit="6"}
        {stash:the-title}{title}{/stash:the-title}
        {stash:another-field}{blog_field}{/stash:another-field}
        {stash:and-another}{blog_field2}{/stash:and-another}
        {stash:link}{url_title_path=blog}{/stash:link}
        ...etc...
    {/exp:channel:entries}
{/exp:stash:set_list}

{exp:stash:get_list name="entries" limit="3"}
    <div class='article-box'>
        <h1>{the-title}</h1>
        ...etc... (or abstract all this markup to a Stash embed)
    </div>
{/exp:stash:get_list}

<div class="hidden-articles">
    {exp:stash:get_list name="entries" limit="3" offset="3"}
        <div class='article-box'>
            <h1>{the-title}</h1>
            ...etc... (or abstract all this markup to a Stash embed)
        </div>
    {/exp:stash:get_list}
</div>

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.