Antimatter: How to edit the sidebar content?

Archive
1

Hello there,

I am very new to Grav and to the theme Antimatter I still don’t get everything:

  • Where can I switch the sidebar on and off?
  • Where can I set the contents of the sidebar, i.e. maybe a search field, latest posts etc.?

Thanks!!

2

lousyweather,

Grav is a bit different than some of the popular cms platforms like wordpress in that there is no defined widget areas to be used for a sidebar. Grav is very versatile though and there are many ways to go about setting up a sidebar. Like with any cms you can modify your theme to add a sidebar but a simpler way is to create a hidden page called sidebar and add the content you want to show in the sidebar on that page. Then on your other pages where you want the sidebar to show you can use the page.find to get the contents from the hidden sidebar page.

Antimatter uses purecss ( http://purecss.io/) which makes added responsive grids quite easy in your pages so you could set up your page that you want a sidebar on like the following.

{{ page.find('/sidebar').content }}
Content Goes in this column

the page.find command will go out and get the content from your sidebar page and add it in that the first column and you can use that command on any page you wanted that same sidebar to show. The other column would be your content.

The great thing about this is that you can great pages that function like widgets in wordpress and can even call those pages from templates. You do however need to make sure the path is correct to your page for your sidebar.

3

I should add you can also assign a page to use the blog template which should have a sidebar area. Also there are themes on the themes page the have a default sidebar. https://getgrav.org/downloads/themes

4

You may want to also get the plugins the blog template uses: Simplesearch, Relatedpages, Random, Taxonomylist, Archives and Feed from https://getgrav.org/downloads/plugins

5

@lousyweather
The sidebar and its content in the antimatter theme is controlled with the twig user/theme/antimatter/templates/partials/sidebar.html.twig
Inside you’ll see code that is prepared to get enabled when a certain plugin gets installed. For instance you’ll find this snippet that will activate if you install the simplesearch plug-in:

{% if config.plugins.simplesearch.enabled %}
<div class="sidebar-content">
    <h4>{{ 'SIDEBAR.SIMPLE_SEARCH.HEADLINE'|t }}</h4>
    {% include 'partials/simplesearch_searchbox.html.twig' %}
</div>
{% endif %}

The 3 latest posts you can add yourself as follows:

<div class="sidebar-content">
<h4>Recent posts</h4>
<ul>
    {% for post in page.find('/blog').children.order('date', 'desc').slice(0, 3) %}
        <li class="recent-posts">
            <a href="{{ post.url }}">{{ post.title }}</a>
        </li> 
    {% endfor %}
</ul>
</div>
6

That helped a lot, thank you!!

7

Ah, well: One more question concerning Antimatter…

I’ve added the SimpleSearch plugin and it seems to work, but like in all the other places where there are functions that should replace placeholders like “SIDEBAR.SIMPLE_SEARCH.HEADLINE” or “BLOG.ITEM.CONTINUE_READING” it does not work. It prints the placeholders in the frontend. What is missing here? Is there a language file missing?

8

Found out! In the configuration file “Translation enabled” has to be set to true, it seems.

9

Although I love what I am seeing with Grav, the method for editing sidebar content is deal breaker for me.

I need to the ability to use unique sidebars per page. Suggestion, perhaps the sidebar content/widget could be set up to be a page type like the blog in a folder named sidebar.

Then have the content for each widget edited the same way as a blog post or page. The sidebar could become something like collections. Then when creating a page, there would be a field to select sidebar/no sidebar with options which content/widgets you want.

Or even add the ability to select such plugins as the simple search.

Beautiful interface so far though. Great job. Fine craftsmanship.

Regards,
Bill

10

bj_rodge,

There are many ways to have custom sidebars and I am sure some of the members here can give some better examples but what you suggest is an option. You can create pages to use as widget areas similar to wordpress or other cms platforms.

Because you can pull content from any page you can create a hidden child page called sidebar and then call that page using page.find like the following example for the home page.

{{ page.find('/home/sidebar').content }}

So then you would edit the contents of sidebar like any page.

The gravstrap skeleton is a good example of using folders as components ( like widgets )

I was uncertain about not having dedicated widget areas at first but from playing around I can see how easy it is to make a completely flexible template that has widgetized header, footer and sidebars. Depending on your theme you may already have a simple way to create columns on your pages which I am starting to like better than hard coding it into a template.

For example Antimatter uses purecss… so you can use somethi ng like the following to create a two column layout and call the sidebar content into the left column. This makes it very easy to change layouts and content around with being tied to a template. And you could still use the purecss classes inside a template as well.

{{ page.find('/home/sidebar').content }}
Your content here
1 Like
11

I really can not get the sidebar working. I am using the gateway theme and can not figure out how to add recent posts, search and social counters (like PinPress) onto the gateway theme.

I also tried to configure a custom menu by editing the site.yaml but then the url went unresponsive. Is there no easy way to edit the sidebar and the menu in order to place the widgets you want?