0

Related to this previous post. But I have created a new post with more information. Understanding Eager Loading

So My template code with Eager Loading looks like this.

{% set articles = craft.entries({
        section: 'blog',
        with: [
            ['bannerImage', { withTransforms: ['cardImage'] } ]
        ]
}) %}


{% block main %}
<div class="container">
    <div class="blogPrimary">
        <h1 class="section__heading // flush-bottom"><strong>Riaflex</strong> Blog</h1>
        <p class="section__msg // margin-bottom">Latest and featured articles from Riaflex&trade;</p>
    </div>
</div>

<section class="row">
{% for article in articles.featured('1').limit(1)  %}
{% set array = article.title|split(' ', 2) %}
    <div class="c-card // l-blogCard--featured">
        <a href="{{ article.url }}">
            <div class="featuredPost">
                <span>Featured</span>
            </div>

            {# <img src="{{ article.bannerImage.first().getUrl('cardImage') }}" alt="{{ article.title }}" class="c-card__img"> #}

            {% set image = article.bannerImage[0] ?? null %}
            {% if image %}
                <img src="{{ image.getUrl('cardImage') }}" alt="{{ image.title }}">
            {% endif %}


            <div class="c-card__bar // js_fitcontent">
                <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                <p class="flush-bottom">
                    <svg role="img" class="icon // icon-date" title="Date Icon">
                        <use xlink:href="/assets/img/icons.svg#icon-date"></use>
                    </svg>{{ helpers.date_formatted(article.postDate) }}
                </p>
            </div>

            <div class="c-card__over">
                <div class="c-card__over-content">
                    <div class="animate">
                        <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                        <p class="half-margin-bottom">
                            {{ article.subHeading }}&hellip;<br />
                        </p>
                        <p class="btn // btn--sub">Read Article</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
{% endfor %}

{% for article in articles.featured('not 1')  %}
{% set array = article.title|split(' ', 2) %}
    <div class="c-card // {{ loop.first ? 'l-blogCard--featured' : 'l-blogCard' }}">
        <a href="{{ article.url }}">
            {% if  loop.first %}
            <div class="featuredPost // featuredPost--latest">
                <span>Latest</span>
            </div>
            {% endif %}

            {% set image = article.bannerImage[0] ?? null %}
            {% if image %}
                <img src="{{ image.getUrl('cardImage') }}" alt="{{ image.title }}">
            {% endif %}

            <div class="c-card__bar // js_fitcontent">
                <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                <p class="flush-bottom">
                    <svg role="img" class="icon // icon-date" title="Date Icon">
                        <use xlink:href="/assets/img/icons.svg#icon-date"></use>
                    </svg>{{ helpers.date_formatted(article.postDate) }}
                </p>
            </div>

            <div class="c-card__over">
                <div class="c-card__over-content">
                    <div class="animate">
                        <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                        <p class="half-margin-bottom">
                            {{ article.subHeading }}&hellip;<br />
                        </p>
                        <p class="btn // btn--sub">Read Article</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
{% endfor %}


{# DUMMY TO RPEAT THE CONTENT #}
{% for article in articles  %}
{% set array = article.title|split(' ', 2) %}
    <div class="c-card // l-blogCard">
        <a href="{{ article.url }}">

            {% set image = article.bannerImage[0] ?? null %}
            {% if image %}
                <img src="{{ image.getUrl('cardImage') }}" alt="{{ image.title }}">
            {% endif %}

            <div class="c-card__bar // js_fitcontent">
                <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                <p class="flush-bottom">
                    <svg role="img" class="icon // icon-date" title="Date Icon">
                        <use xlink:href="/assets/img/icons.svg#icon-date"></use>
                    </svg>{{ helpers.date_formatted(article.postDate) }}
                </p>
            </div>

            <div class="c-card__over">
                <div class="c-card__over-content">
                    <div class="animate">
                        <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                        <p class="half-margin-bottom">
                            {{ article.subHeading }}&hellip;<br />
                        </p>
                        <p class="btn // btn--sub">Read Article</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
{% endfor %}

This results in 38 queries according to the log in the console.

If I use the original code without Eager Loading:

{% set articles = craft.entries.section('blog').order('postDate desc') %}

{% for article in articles.featured('1').limit(1)  %}
{% set array = article.title|split(' ', 2) %}
    <div class="c-card // l-blogCard--featured">
        <a href="{{ article.url }}">
            <div class="featuredPost">
                <span>Featured</span>
            </div>

            <img src="{{ article.bannerImage.first().getUrl('cardImage') }}" alt="{{ article.title }}" class="c-card__img">
            <div class="c-card__bar // js_fitcontent">
                <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                <p class="flush-bottom">
                    <svg role="img" class="icon // icon-date" title="Date Icon">
                        <use xlink:href="/assets/img/icons.svg#icon-date"></use>
                    </svg>{{ helpers.date_formatted(article.postDate) }}
                </p>
            </div>

            <div class="c-card__over">
                <div class="c-card__over-content">
                    <div class="animate">
                        <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                        <p class="half-margin-bottom">
                            {{ article.subHeading }}&hellip;<br />
                        </p>
                        <p class="btn // btn--sub">Read Article</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
{% endfor %}

{% for article in articles.featured('not 1')  %}
{% set array = article.title|split(' ', 2) %}
    <div class="c-card // {{ loop.first ? 'l-blogCard--featured' : 'l-blogCard' }}">
        <a href="{{ article.url }}">
            {% if  loop.first %}
            <div class="featuredPost // featuredPost--latest">
                <span>Latest</span>
            </div>
            {% endif %}


            <img src="{{ article.bannerImage.first().getUrl('cardImage') }}" alt="{{ article.title }}" class="c-card__img">
            <div class="c-card__bar // js_fitcontent">
                <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                <p class="flush-bottom">
                    <svg role="img" class="icon // icon-date" title="Date Icon">
                        <use xlink:href="/assets/img/icons.svg#icon-date"></use>
                    </svg>{{ helpers.date_formatted(article.postDate) }}
                </p>
            </div>

            <div class="c-card__over">
                <div class="c-card__over-content">
                    <div class="animate">
                        <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                        <p class="half-margin-bottom">
                            {{ article.subHeading }}&hellip;<br />
                        </p>
                        <p class="btn // btn--sub">Read Article</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
{% endfor %}

{# DUMMY TO RPEAT THE CONTENT #}
{% for article in articles  %}
{% set array = article.title|split(' ', 2) %}
    <div class="c-card // l-blogCard">
        <a href="{{ article.url }}">

            <img src="{{ article.bannerImage.first().getUrl('cardImage') }}" alt="{{ article.title }}" class="c-card__img">
            <div class="c-card__bar // js_fitcontent">
                <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                <p class="flush-bottom">
                    <svg role="img" class="icon // icon-date" title="Date Icon">
                        <use xlink:href="/assets/img/icons.svg#icon-date"></use>
                    </svg>{{ helpers.date_formatted(article.postDate) }}
                </p>
            </div>

            <div class="c-card__over">
                <div class="c-card__over-content">
                    <div class="animate">
                        <p class="c-card__title"><strong>{{ attribute(array, 0) }}</strong> {{ attribute(array, 1) }}</p>
                        <p class="half-margin-bottom">
                            {{ article.subHeading }}&hellip;<br />
                        </p>
                        <p class="btn // btn--sub">Read Article</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
{% endfor %}

This results in 39 queries according to the log in the console.

Any ideas why this isn't being reduced more and what might be off in my syntax? I have tried to follow the docs as best I can so really not sure where else to turn.

2
  • I'd suggest paring the template examples down to only what's relevant to the question... it's difficult to parse the wall of text of completely unrelated HTML attributes and code. But my guess is that you don't have many bannerImage selected. Eager loading is going to show its benefits the more things there are to eager load. There is some initial overhead associated with it you have to overcome.
    – Brad Bell
    Nov 11 '16 at 0:11
  • Terry: if your goal is performance, and you are able to do so, you might want to try using the {%cache%} as well. The fastest SQL in the world is no match for a result already figured out. Nov 11 '16 at 23:20

Your Answer

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

Browse other questions tagged or ask your own question.