wickywills
1/9/2018 - 2:38 PM

Post loop with images

Within the index.php, ensure you have something like:

$context['posts'] = Timber::get_posts();

Within the .twig template file, referenced in the above:

{% if posts is defined and posts is not empty %}
    <div class="vert-push--small vert-push--teen--medium l-grid c-blog-item__set  c-std">
        {% for post in posts %}
            <div class="l-grid__item infant--one-half adult--one-third c-std">
                {% include 'components/blog/item/template.twig' with {"post": post} %}
            </div>
        {% endfor %}
    </div>
{% endif %}

And finally within the individual blog item template file:

{% if classes %}
    {% set class = classes|join(" ") %}
{% endif %}

<a href="{{ post.post_name }}" class="c-blog-item 
    {% if class is defined and class is not empty %} {{ class }}{% endif %}
">
    
    {% if post.ImageClass is defined and post.ImageClass is not empty %}
        {{ TimberImage(post.thumbnail.id) }}
        <div class="c-blog-item__image" style="background-image: url({{ TimberImage(item_project.thumbnail.id ) }})"></div>
    {% endif %}
    
    
    <div class="c-blog-item__content">

        {% if post.post_title is defined and post.post_title is not empty %}
            <div class="c-blog-item__title">
                <h2>{{ post.post_title }}</h2>
            </div>
        {% endif %}

        {% if post.post_date is defined and date is not empty %}
            <div class="c-blog-item__date">
                {{ post.post_date }}
            </div>
        {% endif %}

        {% if post.post_excerpt is defined and post.post_excerpt is not empty %}
            <div class="c-blog-item__excerpt">
                {{ post.post_excerpt }}
            </div>
        {% endif %}

        {% if category is defined and category is not empty %}
            <div class="c-blog-item__category">
                {{ category }}
            </div>
        {% endif %}
    
    </div>
</a>