Reusing the modules of modular pages

Support Content & Markdown
#1

Hi, I’m an old hand with WordPress but new to Grav.

In WordPress, I would build sites using ACF Pro, so that I had a number of flexible content blocks (e.g. 1 col text, 2 col text, image carousel, testimonials, etc) and I could reuse these blocks in any order, in any page I created.

For example the home page might have a 1 col text block with certain content in it, and the about page might also have a 1 col text block, but with its own content. Each of these pages would also contain other blocks.

Each block had its own fields for editing (e.g. a textarea and a select box, etc), and each had its own markup and CSS defined in the theme.

Now looking at Grav, I’m fairly sure I need to be using modular pages for this scenario, and I’ve read the ‘learn’ site and spun up a couple of test sites, but it’s not clear to me how I make my modular modules reusable across pages. I’m probably missing something simple.

Can someone help me get the concepts aligned in my head?

#2

@zigpress,

Based on the following quote I guess you are referring to a block as a layout design and not content. Right?

For example the home page might have a 1 col text block with certain content in it, and the about page might also have a 1 col text block, but with its own content.

A block with a certain design is a Twig template in Grav. These templates can be reused for any (modular) page.

When building a modular page, you add its child modules inside its folder. The filename used for a child (e.g. ‘testimonials.md’) determines its layout template.
The page then contains its specific content and fields used by the template.

The file can be edited by any plain text editor or by using Admin which provides a UI. When using Admin, you need to create a ‘blueprint’ for each template. The blueprint contains definitions for fields needed to create content, or the fields/variables used by the template.

1 Like
#3

Thanks very much for responding.

Yes you’re right, I’m thinking about layout blocks which are populated with different content on each page where they are used.

So, thinking aloud…

I can create a modular page with (let’s say) 2 modules:
_1columntext/1columntext.md
_2columntext/2columntext.md
and the page’s modular.md frontmatter is set to display the 1columntext module first and then the 2columntext module.

And I can create another modular page with (let’s say) the same modules but its modular.md frontmatter is set to show them in a different order.

So, from what you’re saying, I need 2 twig templates:
1columntext.html.twig
2columntext.html.twig
and these would contain the markup for each module, with the twig variables to determine where the content is placed. These templates would get used by both pages.

And the final piece of the puzzle, is that I need a blueprint for each module:
1columntext.yaml
2columntext.yaml
which should (I think) be in my user/themes/mytheme/modular folder, and these will contain the logic which says “for the 1 column text module, provide 1 markdown editor box” and “for the 2 column text module, provide 2 markdown editor boxes”.

I’ll worry about the content of the YAML files later, but am I on the right track so far?

Corrections and comments welcomed!

#4

@zigpress, Almost right…

which should (I think) be in my user/themes/mytheme/modular folder

The blueprints go into the … /user/themes/mytheme/blueprints folder. And yes, the names of the blueprints (eg. ‘1columntext’) are the same as the accompanying template names.

#5

Understood, thanks. I think I meant to type blueprints but somehow typed modular instead.

You’ve been extremely helpful and I feel I’m now on the right track. Thanks!

Also, I feel more confident that Grav will be a good solution for some of my projects.

#6

Quick amendment for anyone following along:

Adding a page blueprint for a modular page module means that the blueprint has to go in a modular subfolder, viz:

user/themes/mytheme/blueprints/modular/

Found here: https://stackoverflow.com/questions/49484871/custom-themes-blueprints-not-being-detected-in-admin-plugin-at-all

1 Like