Best practices

Archive
1

Hello,

maybe this topic can be for Grav-learners like me.

Since two days ago I play with Grav and it is exciting!
I have done the “Theme Tutorial” and have a (for now default) page with 3 elements which I put in a Bootstrap-grid with inline HTML.
Could you please tell me if this is the best practice?

Thank you, Olli

2

There are no hard-and-fast rules in Grav about how you must do things, you really need to experiment with it based on how you want things to look, and how you prefer to manage your content.

I prefer to keep layout-things in the theme’s twig templates as much as possible. If there’s more complex layouts required you should look at modular-pages as a possible solution by breaking up a single page into multiple modular elements.

You can also make use of the page-inject plugin to inject other pages into a page, this way you can reuse common page elements in other pages.

My least favorite option is putting HTML into the markdown files themselves. This makes things harder to maintain over time, and just seems hackish :slight_smile:

3

Thank you for your answer!

I will do it with a template.
Would you take a standard or modular page for the following layout?

Text
Text text text
Text

4

i’m partial to modular pages for multiple blocks of ‘stuff’. Check out the One Page Skeleton for an example of this.

5

It was fun to get the layout how I want it to be!

Layout

If you don not mind I have some questions.

My .md and .twig for the 3 columns are as follows:

.md
.twig

Can I somehow loop through Markdown-headings and Markdown-texts so I don not need to write the 3 columns in the header?

Olli

6

You could put some kind of divider in the content, then split the content into an array based on that divider, then loop over those items in the array. I’ve done something similar in the lightslider plugin.

7

This sounds very good!

So I just need “—” above the second and third heading in the .md and a .twig (I have seen “split” and “hr” in your .twig)?

8

exactly :slight_smile:

Content example here: https://github.com/getgrav/grav-plugin-lightslider/blob/develop/README.md#options

Twig example here: https://github.com/getgrav/grav-plugin-lightslider/blob/develop/templates/modular/lightslider.html.twig#L49-L68

9

Sadly I can not get the loop to work.
Only if you have time, could you please show me how the .twig should look like?

My original .twig:

{{ content }}

{% for feature in page.header.features %}
{% if feature.header %}

{{ feature.header }}

{% endif %} {% if feature.text %}

{{ feature.text }}

{% endif %}
{% endfor %}

Thank you, Olli

10

it works pretty much as i pointed out in the example:

column.md: https://gist.github.com/rhukster/f310e9a6ed95c21e7a05

column.html.twig: https://gist.github.com/rhukster/21452e0db553d0e165a5

Result: http://polydeon.com/monosnap/Spice_Page_Test__Demo2_2015-07-18_15-11-52.png

11

obviously i’m testing with some simple table html for clarity, you would need to adjust the html to whatever you needed.

12

Thank you so much!

13

Is it something for your cookbook?

14

Could be! :slight_smile:

15

done!

16

Thank you!

Can I safely delete the whole width-constraining?

/* Constrain the width */
.container {
width: auto;
max-width: 960px;
padding: 0 15px;
}

17

Well, delete it and see if it has the effect you desire. I mean, not sure what theme that’s from, and what you are trying to do, but it will undoubtedly ‘break’ the width restriction.

18

Sorry, from your theme tutorial. I was not sure if this was done for a reason.