Add a banner image to the antimatter default page type?

Archive
1

I have successfully created a web site, https://altoplace.com, using the default Grav antimatter theme. I am a “user” wanting to learn how to develop websites. I would like to add a banner image, much like the One-Page Site skeleton, One Page Demo Site | Grav.

I still need to learn more about using twig, but I tried to update templates/default.html.twig to:

1 {% embed ‘partials/base.html.twig’ %}
2
3 {% set default_image = page.media.images|first.grayscale().contrast(20).brightness(-125).colo rize(-35,81,122) %}
4 {% if default_image %}
5


6 {% else %}
7

8 {% endif %}
9 {% block content %}
10 {{ page.content }}
11 {% endblock %}
12

I added my banner image:

georgew751@gwimac14: /Users/georgew751/Sites/altoplace
==> l user/pages/01.home
default.jpg default.md

I cleared the cache:
georgew751@gwimac14: /Users/georgew751/Sites/altoplace
==> bin/grav clear-cache

I installed the sass compiler and ran it:

georgew751@gwimac14: /Users/georgew751/Sites/altoplace/user/themes/antimatter
==> ./scss.sh

Sass is watching for changes. Press Ctrl-C to stop.
[Listen warning]:
Listen will be polling for changes. Learn more at GitHub - guard/listen: The Listen gem listens to file modifications and notifies you about the changes..

When I try to access my test site (not altoplace.com), I am getting a syntax error:

Twig_Error_Syntax
A template that extends another one cannot have a body in “default.html.twig” at line 5.

I am using the Grav 1.1.0-rc.3 version, with v2.0.0-beta.1 Antimatter theme.

Can someone explain what I am doing wrong? Or better yet, add a banner image capability to the default page type? I know that I need to take more time and read through the template and twig tutorials. I was trying to “jump ahead” and get a basic website working, with a banner image. I just need to get the banner image working to accomplish my goal.

Thanks much!

2

If you extend/embed, you need to put all the markup in a block, for example:

{% extends 'partials/base.html.twig' %}

{% block content %}
	your code above
{% endblock %}

p.s. paste snippets surrounded by triple dashes or backticks to format as code, here in the forum :slight_smile:

3

Thank you for the code hint and how to format code snippets in the forum.

4

Wow, that actually worked, sort of:

==> cat default.html.twig
{% extends 'partials/base.html.twig' %}

{% block content %}
    {% set default_image = page.media.images|first.grayscale().contrast(20).brightness(-125).colo rize(-35,81,122) %}
    {% if default_image %}
        <div class="modular-row default flush-top" style="background-image: url({{ default_image.url }});">
    {% else %}
        <div class="modular-row default">
    {% endif %}
    {{ page.content }}
    </div>
{% endblock %}

The image covers the header and body text. I am heading back to the theme and twig tutorials to dig deeper into what I need to do. But, thanks, again, for the kickstart to get something working! Now that I am past the compile error, I can tweak and try things out.