Pb : no image in blog-list

Support Themes & Styling
1

Hello,
I use grav with webfolio theme.
I’ve creating a “blog” page and an “blog-post” page in this blog, with an image in the same directory of my blog-post.
Byt the image do not display when I consult the blog page.
The variable : post.media[post.header.image] seems to be empty …
Here is code from the blog.html.twig :slight_smile:

{% extends 'partials/base.html.twig' %}
{% set posts = page.header.content ? page.collection : page.children %}

{% block content %}
<section class="blog">
    <section class="container">
        {{ content|raw }}

							
        <section class="blog__cards">
            {% for post in posts.published %}
                <a class="blog__card__link" href="{{ post.url }}">
                    <div class="blog__card">
                        {{ post.media[post.header.image].html('', post.header.title ~ ' image', 'blog__card__img') }}
                        <div class="blog__card__content {% if not post.media[post.header.image] %} no-img {% endif %}">
                            <h3 class="blog__card__title">
                                {{ post.header.title }}
                            </h3>
                            <div class="blog__card__date">
                                {% set date_format = page.dateformat ? page.dateformat : system.pages.dateformat.short %}
                                {{ post.date|date(date_format) }}
                            </div>
                            <div class="blog__card__preview">
                                {{ post.summary|striptags }}
                            </div>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </section>
    </section>
</section>
{% endblock %}
2

@pzul, What does the frontmatter of the blog-post.md file look like?

3

I paste it below.

---
title: 'Etre soi-même ?'
content:
    pagination: true
media_order: psytête.jpg
---

Article en cours de construction...
![](psytête.jpg)
4

@pzul, Apparently, no value has been set for ‘image’ in the frontmatter of blog-post.md. Hence, post.media[post.header.image] will also be empty.

Variable ‘image’ should contain the name of the image you would like to show. Probably ‘psytête.jpg’.

If there is only one image, you can fallback to the first image in the folder by using:

{% set image = post.media[post.header.image] || post.media.images | first %}
{{ image.html('', post.header.title ~ ' image', 'blog__card__img') | raw }}

By the way,

  • I do not understand why a blog_post should contain a (incomplete) collection definition.
  • media_order with only a single image also seems unnecessary.
5

I also don’t understand all this code, but displaying the first image is a very good solution for me…
With the code below, I have a pretty good html, but not interpreted.
I obtain :

&lt;img alt=&quot;Etre soi-même ? image&quot; class=&quot;blog__card__img&quot; src=&quot;/user/pages/06.blog/02.test/psytête.jpg&quot; /&gt;

extract of my template :

{% set image = post.media.images | first %}
6

My problem is now ‘only’ : to generate correct html tags…

My twig :

<section class="blog__cards">
            {% for post in posts.published %}
				{% set image = post.media.images | first %}
                <a class="blog__card__link" href="{{ post.url }}">
                    <div class="blog__card">
                        {{ image.html('', post.header.title ~ ' image', 'blog__card__img') }}
                        <div class="blog__card__content {% if not post.media[post.header.image] %} no-img {% endif %}">
                            <h3 class="blog__card__title">
                                {{ post.header.title }}
                            </h3>
                            <div class="blog__card__date">
                                {% set date_format = page.dateformat ? page.dateformat : system.pages.dateformat.short %}
                                {{ post.date|date(date_format) }}
                            </div>
                            <div class="blog__card__preview">
                                {{ post.summary|striptags }}
                            </div>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </section>
7

@pzul, Sorry, I forgot the | raw filter… See my updated post.

8

THANKS A LOT ! It runs

9

@pzul, Now you have only one thing to do… Mark the post as solved by ticking the ‘solution’ icon in the lower right corner of the reply that lead you to the solution.