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.

Content & Markdown

Default Frontmatter for Modular Pages

Solved by pamtbaau View solution

Started by chraebsli 3 years ago · 5 replies · 519 views
3 years ago

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:

MD
---
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

3 years ago

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

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

3 years ago

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

TWIG
{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}
3 years ago

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

TWIG
{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : 'theme://images/hero/default.jpg' %}
TWIG
{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media['theme://images/hero/default.jpg'] %}
last edited 04/26/23 by chraebsli
3 years ago Solution

@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

Suggested topics

Topic Participants Replies Views Activity
Content & Markdown · by Jochen, 8 months ago
6 97 8 months ago
Content & Markdown · by Ton Haarmans, 1 year ago
10 185 1 year ago
Content & Markdown · by Jan L'Am, 1 year ago
4 148 1 year ago
Content & Markdown · by Leonardo, 1 year ago
3 61 1 year ago
Content & Markdown · by belthasar, 1 year ago
4 255 1 year ago