Grav 1.7 Appi theme - how to apply an image to a module's expected image?

Question

I have Grav with a modular page:

user/pages/03.mod (type: modular)

Within that, I've added the Appi theme's module "herohome":

user/pages/03.mod/_hero (type: modular/herohome)

I want to add the background image to that herohome module.

In herohome.html.twig I can see backgroundImage.jpg as the html variable

{% if page.header.background_image %}
    {% set backgroundImage = 'background-image: url(' ~ page.media.images[page.header.background_image].url() ~ ');' %}
{% else %}
    {% set backgroundImage = '' %}
{% endif %}

So I've taken their supplied herohome.jpg screenshot, renamed it to backgroundImage, and uploaded that to Page Media.

I've inserted it into the body.

![backgroundImage](backgroundImage.jpg "backgroundImage")

Both the 03.mod page and _hero module are published.

When I go to view the page, I can see the hero module there but the image is missing.

How do I apply the image? I can't see it in their docs/Google/YouTube.

Answer 1

You don't need to insert image in your Markdown file's content as well as rename it to backgroundImage.jpg

You only need to upload your image to the modular page _hero, then set the backgroundImage field in your Markdown page's header, if bg.jpg is the file you upload the code will be:

background_image: bg.jpg

You can check the skeleton as an example. bg.jpg is used as the background image, it is uploaded to the modular page: https://github.com/tranduyhung/grav-skeleton-appi/tree/master/pages/01.home/_herohome. background_image: bg.jpg is added to the header

---
title: Video
background_image: bg.jpg
video_mp4: user/pages/01.home/_herohome/bg.mp4
heading: Your App. <span>Reinvented.</span>
subheading: Lorem Ipsum is simply dummy text of the <br class="hidden-xs">printing and typesetting industry.
buttons:
    -
        icon: icon-append-iphone
        text: Learn More
        url: '#'
---

(https://raw.githubusercontent.com/tranduyhung/grav-skeleton-appi/master/pages/01.home/_herohome/herohome.md)