Default Frontmatter for Modular Pages

Support Content & Markdown
1

I have a website and on the most pages, I have a modular layout with a hero component. So, all hero.de.md files, look like this:

---
title: hero
body_classes: "modular"
class: p-hero
image_align: left
hero_classes: "text-light overlay-dark parallax"
hero_image: theme://images/hero/default.jpg
published: true
---

# Page Title

As you can see, the only real difference in all hero.de.md files is # Page Title: the frontmatter is every time the same. I know, I could hard-code it in the modular template, but if the user wants to have a different hero image, he should be able to change the hero_image.

How am I able to do this?

Versions:
Grav: 1.7.40
Theme: Quark: 2.0.4

2

@chraebsli, You haven’t mentioned it, but may I presume pages are being edited using Admin?

If so, add the frontmatter fields to blueprint user/themes/quark/blueprints/modular/hero.yaml and give the fields a default value.

Note:

  • Don’t edit theme Quark itself, but instead create a child theme and override the blueprint of Quark.
3

@pamtbaau,

I know that I can use blueprints and this also works. But I want that Grav automatically renders the default banner if no banner was specified in the frontmatter of the hero module. So if I want to change the default banner (with name) I don’t have to change it on all pages.

PS: I already have a child theme for Quark created, but to simplify, I wrote Quark since it just extends Quark. But thanks.

4

@chraebsli, Ah that’s a different scenario… In that case, have a look at
/user/themes/quark/templates/modular/hero.html.twig, and see how a fallback image can be used if no hero_image is being defined in the frontmatter of the hero module.

{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}
5

@pamtbaau
But how can I do this? I tried this, but I didn’t work:

{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : 'theme://images/hero/default.jpg' %}

{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media['theme://images/hero/default.jpg'] %}
6

@chraebsli, Have you already consulted the docs on Media?

In section Media: Where to put your media files, you will find examples of storing images in the folder of the page, or user/pages/images, or user/themes/mytheme/images, etc. and how to retrieve them using Twig.

1 Like