Best Practice

Archive
1

I am trying to build a tabbed content page, http://ryanwake.com/opgp_dev_html/schedule/ using Grav. I know I could build this page using a modular page and just list all the content on one .md page. In the interest of maximum edibility, I would like to build out this page using this sort of organization: https://www.dropbox.com/s/alxowavu4qwqsce/Screenshot%202015-03-19%2012.57.58.png?dl=0

When I explore the existing skeletons and themes, they all seem to be done using one file, instead of this multiple page method. If the multiple page method is the best way, can someone point me in the direction of an example I can follow? I am having trouble figuring out how to make this work.

I feel like this should work like a foreach loop or something.

2

For small amounts of content I would suggest sticking with a single page if that works for you. For more complex content in each tab, then a collection of pages probably would work best.

This could be accomplished with a collection similar to how the blog index page works. Simply create a collection of child pages, and loop over them, displaying their content between appropriate HTML. Just look at the blog skeleton for an example on how to do this.

3

I thought doing this as a single page would be easier, but you can see on the gitter posts, that has not been the case.

4

I get to a point, then I get stuck.
http://ryanwake.com/opgp_cms/scheduletest

The code I have in my html.twig is recognizing that I have three pages in my directory, but I don’t know how I can call the custom header tags:

page code:

modular_schedule.html.twig

5

if you can put a zip file with your current site somewhere on dropbox/onedrive/googledrive etc, i can download/install and take a look for you.

6

That would be awesome! Can you also help me with the blog post feed on the homepage - same sort of issue there, I believe?

7

Anyway you can explain to me what this schedule page should render?

8

or perhaps a screenshot of what your trying to achieve? I can see a mix of things in here, and none of them are quite ‘finished’. For examples you are using modular pages, but you have no templates/modular/schedule-list.html.twig file to render them.

9

I have it looking like this currently:

Schedule | Offshore Powerboat Grand Prix 2015-03-20 16-23-35

10

Also homepage looks like this:

Home | Offshore Powerboat Grand Prix 2015-03-20 16-35-20

The two squares under the title are coming from the prev/next buttons for the image gallery above. They just need some css styling.

11

Those are exactly what I was looking for! Now I just need to inspect the code to see what I was missing.

12

Basically for the tabs, i changed the modular content to just regular content items. modular content would be a little trickier for your tabs implementation because you need to iterate over it twice. So I removed the _ in the folders, changed the content of the loops to use your child variable and also changed the surrounding page’s collection setup to use @self.children. Pretty much that was it with some tweaking.

For the homepage, i put a find call in at the top of the blog_list twig, and then iterated over that.

13

Thank you very much. With the tabs, having to go through it twice is where I think I was having the most trouble. Figuring out how to configure that. I have poured over the Grav documentation, but would I benefit more from learning more about TWIG templating? I feel like that is my major short coming in really being able to use Grav to it’s full potential.

R

14

Yah this was pretty much twig experience with a little ‘collection’ experience. The problem is collections are so powerful in Grav its actually hard to document them. I put up some ‘testing’ API documentation that actually is pretty useful:

Collection API Docs

All the API stuff is there although we need to definitely improve the documentation in the code itself so these generated API docs are more helpful.

15

One more question. I have another page similar to the schedule page - for race teams. The race teams will be divided into two classes. https://www.dropbox.com/s/ndviru7q0ff44br/Screenshot%202015-03-23%2001.33.26.png?dl=0

I think I could just do a template similar to the schedule pages and filter the results based on something like: page.header.category

Is this the best way to go, or is there a way for me to combine {% for child in collection %} with a filter of some kind?

16

You can have multiple collections per page, that could work, but frankly it might be easier for you to simply put the collection query directly in the twig and use taxonomy. You could even have the teams dynamically set in the page header.

17

Is there a place where I could see this in action? Either the taxonomy or the dynamic set? My first thought was using taxonomy, but I was unsure how to create a collection that specifically targeted a certain taxonomy.

18

We might have an example in some skeleton, but it escapes me exactly where. The syntax is pretty simple though as you can see here

19

I got this working! Just followed the documentation. (if all else fails, read the directions)

I am returning to the code that you edited for me. I am having issues referencing an image.

{% if child.header.upcomingrace.image %}
   <img src="{{ page.media[child.header.upcomingrace.image].url }}" />
{% endif %}

OR

{% if child.header.upcomingrace.image %}
   <img src="{{ child.media[child.header.upcomingrace.image].url }}" />
{% endif %}

Neither option is working for me. Not sure what I am missing. If I just use {{ child.header.upcomingrace.image }} I get the result I would expect. I am stumped.

20

When in doubt try doing this:

dump(child.header)

Then look in the messsages tab in the debugger (must be turned on of course). Then you can inspect and dig into the data and see what your getting back.