Create one page with 4 sections (in Admin Panel)

Archive
1

I am somewhat new to TWIG and I am not sure if this will work with Grav.
What I want is to change the Page Editor for Content to not only have a title and Content but to have 4 content forms and for each an image.

This I need only for my home.html.twig layout because on the homepage I will have four parts of the site which will have little content with each an image.

Can I create a new page for each part (like home1, home2, home3 and home4) and then show each on the correct homepage? How would this work with Grav/Twig?

Or are there more simple solutions like a Twig for the Page Editor Content to show 4 forms and 4 Media selections?

Thanks,
Best Regards
Tobias

2

This is called a modular page and the theme you are using needs a template to do this.
You can find all the information you need to create this here: Grav learn: Modular pages

You also have many skeletons just for this. It is a good idea to learn from this to get a faster learning curve.

Good luck and have fun!

3

I just learned that I cannot use nested modular pages with the one page skeletton here

Is this still true? I want to avoid using child pages if possible because modular pages are a lot easier to manage.

Thanks!

4

When you create a modular page you are not really creating child pages, rather modules that is put into order with a page collection.

If I understand you correctly then the easiest way is to create “Home” as a modular page and add each section as a module under “Home”.
This way you can style each section as you like by adding new templates in the modular folder in your-theme/templates/modular.

5

Yes, but my problem is that what I described above is only one part of the homepage. Other sections below should follow.

The structure would look something like this:

Homepage:

  • Section 1
    – Block 1 (what I described above as Home1)
    – Block 2
    – Block 3
    – Block 4
  • Section 2 (More content below section1)
  • Section 3

This should all be one page.

6

Yea, I understand. This would look nicer at the back end, but it would make no difference in the front end since you can style it exactly as you want.

7

True, so I keep the structure in the Front-End and work with page childs on back-end.
One last question here: would it be possible to do the nesting of section 1 with modular page and the sections 1, 2 and 3 with page childs? This would mean I would change the modular.html.twig… maybe not so good idea…?

8

I have tried nesting the blocks(modules) in section 1 in a folder and within section 1, but failed.
When working with modular pages you are not really working with child pages, rather modules or blocks of a page. You could add more collections to modular.html.twig for displaying content that you organized in the admin, but if the page is not that complicated it would just be more work then value since the result would be the same anyways.

I guess you want to have something like “read more”? Then I would just add a new non-moldular page that is routable, but not visible to display that content if you want the site to be kept simple.

9

I think I will try the child pages (didn’t study how to implement them yet) and see the outcome.

It’s not read-more, but more like a landing page where one section can have multiple rows.

10

I see advantages separating these into blocks inside a module.
But if you take a look at the possibilities with markdown editing then you see that everything you ask for can be done there.
In the section 1 content your blocks can easily be added by for example adding:

___ (three underscores)
Image | Text

To get a block inside this content.

Or if you need to style it a bit more then make a template for each block and add each of the block as a module under section one.
This will require some knowledge of html and css. To make it simple you can copy the twig code from templates like landio which includes many different possibilities such as video, testimonials, text and so on as modular templates.

11

Well 3 underlines (___) in markdown will add

which doesn’t really help me.

I would need something like this:

![test] (test.png) Hier der Text

(Added a space between image description and image because it would try to show the image on the forum…)

But this doesn’t work as the image code will not be compiled inside html.

12

If that is the case then enable markdown extra in system configuration. Then you can add almost any HTML you want:)
To succeed always think simple first. Everything else comes afterwards.

13

I basically want to do the same and think i should be possible with a custom template .twig file similar to the text.html.twig contained in the antimatter theme.

<div class="modular-row callout">
    {% set image = page.media.images|first %}
    {% if image %}
        {{ image.cropResize(400,400).html('','','align-'~page.header.image_align) }}
    {% endif %}
{{ content }}
</div>

Now I’m looking for a way to set image = given link for each section. And iterate over every section (each section starts with ###Title) Can sb help?

14

@forfun
If that is the case then enable markdown extra in system configuration. Then you can add almost any HTML you want:)

This has the same effect. The picture will not show as the code inside the

section is not compiled and outputs as a string.

@forfun
To succeed always think simple first. Everything else comes afterwards.

I really think I’m missing something very simple that would solve my problem…

What I do right now should be the most simple. And the only problem I still have is to wrap a

(or something similar around four parts of one page. This can’t be that difficult to solve. (I will do some further research on this now…)

15

Okay I got it:

You have to write:

<div markdown="1">

Source

Thanks for your help. For now I work with this solution :slight_smile: