Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Pb : no image in blog-list

Solved by pamtbaau View solution

Started by byache 4 years ago · 8 replies · 697 views
4 years ago

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 🙂

TWIG
{% 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 %}

4 years ago

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

4 years ago

I paste it below.

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

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

@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:

TWIG
{% 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.
last edited 04/02/22 by pamtbaau
4 years ago

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 :

TXT
&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 :

TWIG
{% set image = post.media.images | first %}
4 years ago

My problem is now 'only' : to generate correct html tags...

My twig :

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>
4 years ago

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

4 years ago

@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.

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 197 2 months ago
Themes & Styling · by Ian, 2 months ago
3 92 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 454 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 47 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 127 3 months ago