Issue with Zola Template - Image Not Displaying

Support
1

Hey Zola Community!

Really tearing my hair out here and I know the issue will be something that is so simple but I just can’t seem to resolve it -

In my blog/journal journal.html I’m trying to be able to display an image that will be unique to each blog post:

{% extends "base.html" %}
{% block content %}
  <section class="journal">
    <div class="journal__hero">
      <h1 class="journal__title">{{ section.title }}</h1>
    </div>

    <article class="journal__article">
      <ul class="journal__list">
        {% for page in section.pages %}
          <li class="journal__item">
            {% if page.image %}
              <img src="{{ page.image }}" alt="{{ page.title }}">
            {% endif %}
            <a href="{{ page.permalink | safe }}" class="journal__link">{{ page.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </article>
  </section>
{% endblock content %}

the page.title works perfectly fine and shows my various page titles, however the image doesn’t display!

I’m colocating the assets in each specific journal post, with my file structure like :
|-- content/
| |-- journal/
| | |-- _index.md
| | |-- first-post/
| | | |-- index.md
| | | |-- hello.png

this is my _index.md: 
+++
title = "Checkout what I've been up to -"
sort_by = "date"
template = "journal.html"
page_template = "journal-page.html"
+++

and this is my index.md:
+++
title = "My First Post"
date = 2019-11-27
image = "hello.png"
+++
This is the content of my first post.

Any idea why I can’t get the image to display there?

I can write it in markup directly and it works of course or link in a traditional way, but I obviously want the template file to be able to display all the images that I will have in various blog posts - not have to keep extending the markup in my journal.html file!

Thanks in advance for the resolution!!

2

You need to put image in the extra section of the front-matter, not at the top level

3

but then how can I display that image in journal.html (which is an index that displays all of my posts) without repeating the same lines?

like here

{{ page.title }}

4

page.extra.image

5

Hey thanks so that half worked - displayed the image placeholder on the screen but this is how I actually got it to work by utilising page.slug:

<img src=“/journal/{{ page.slug }}/{{ page.extra.image }}”

I’m not sure sure why this works - it’s something that I need to read up more on - thanks though!

6

If you want a cleaner approach, did you try using get_url?

src="{{ get_url(path=page.extra.image) }}"