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.
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.
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: '#'
---