Skip to content
Grav 2.0 is officially stable. Read the announcement →
Support

Timeline plugin and Quark theme menu

Started by Bjorn 6 years ago · 5 replies · 667 views
6 years ago

I'm an absolute newbie with grav and I'm in the process of setting up a website with it. I found the "timeline" plugin which does exactly what I wanted. However, once I've chosen the timeline page, the quark theme menu is gone. Is there any configuration or option that can be chosen to keep the menu so I don't need to hardcode links back to the main page?

6 years ago

The Timeline-template, and its underlying Event-template, is standalone, and as such does not by default integrate any theme-elements. However, the Timeline-template exposes both a header and a footer template-partial that you can use for this purpose.

For example, in the header-template, which you can copy into your own theme, you could add

TWIG
{% import 'macros/macros.html.twig' as macros %}

<ul {{ tree ? 'class="tree"' : '' }}>
    {{ macros.nav_loop(pages) }}
</ul>

which is what Quark uses to construct the menu.

👍 1
6 years ago

I'm assuming I'm doing something incorrectly. I've created my own theme which inherits everything from Quark (as per the grav docs) and then copied the " timeline_header.html.twig" into ...grav/user/themes/mytheme/templates/partials.

With my custom theme and the timeline_header.html.twig with the above content, it looks like this in the timeline page:
Screenshot 2020-07-27 at 23.49.28|141x76

Is there something obvious I might be doing wrong?

6 years ago

Are you expecting it to render or style differently? The timeline_header.html.twig-partial would need to include the necessary styles, as the plugin itself only registers its own styles by default. You'll also want to register them to the bottom-group, eg. {% do assets.addCss('theme://css/mycss.css', {'group': 'bottom'}) %}.

6 years ago

Well, I'm hoping I can get it to render differently. The timeline page is one of several pages on my web site. On other pages the menu renders like this:
Screenshot 2020-07-29 at 22.55.03|690x71

The screenshot snippet from my earlier post is what it looks like after I added the code suggested by you in the first reply. Before that, no menu whatsoever was displayed on the page where I'm using your plugin.

6 years ago

As stated, the Timeline-plugin's template is not coupled to any theme, and as such will not render any particular theme's menu or other components by default. However, it doesn't take much to render a theme's elements. Using Quark as the example, create user/themes/mytheme/templates/partials/timeline_header.html.twig, with this content:

TWIG
{% set compress = theme_var('production-mode') ? '.min.css' : '.css' %}
{% if block("header", "partials/base.html.twig") is defined %}
  {{ block("header", "partials/base.html.twig") }}
{% endif %}
{% if block("stylesheets", "partials/base.html.twig") is defined %}
  {{ block("stylesheets", "partials/base.html.twig") }}
{% endif %}
{% if block("javascripts", "partials/base.html.twig") is defined %}
  {{ block("javascripts", "partials/base.html.twig") }}
{% endif %}
{% if block("assets", "partials/base.html.twig") is defined %}
  {{ block("assets", "partials/base.html.twig") }}
{% endif %}

{{ assets.css()|raw }}
{{ assets.js()|raw }}

Which will:

  1. Set the compress-variable that Quark uses.
  2. Render the header-block from Quark.
  3. Render the stylesheets-block from Quark.
  4. Render the javascripts-block from Quark.
  5. Render Quark's assets.

We now have the HTML-structure Quark uses for its header, as well as any and all assets necessary. So we'll be using the regular timeline.md with timeline.html.twig, but the plugin will also load what's necessary to render the menu:

image|690x339, 75%

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
3 101 9 hours ago
Support · by Anna, 3 days ago
2 98 1 day ago
Support · by Justin Young, 1 day ago
1 66 1 day ago
Support · by Duc , 1 week ago
2 101 6 days ago
Support · by Colin Hume, 1 week ago
2 94 6 days ago