Antimatter - Header image on standard pages

Archive
1

How do you add a header image to a standard page?

Do I have to edit the base.html.twig file?

I’d prefer to use similar methods seen in the blog and one-page Antimatter skeletons, but I can’t get it work on a standard page (jpg in 01.home etc.).

I think there is a new feature allowing this to be done via the Admin panel and the latest version of the Antimatter theme using blueprints, but when I diff the code (1.7.2 vs. 1.7.3) it looks like the change is in blog_item.html.twig (I assume blog_item.html.twig is not used by a standard page).

So what is the cleanest way to have the same image as a header/banner on a site comprised of standard pages?

Thanks.

2

If you want to have the same image in a header banner, I suggest modifying the (or creating a new) page template. The default.html.twig is the standard one, but you could just copy that and create a new banner-page.html.twig or something and add the image logic to that page. Then just choose that template for all pages that you want to have the banner displayed on.

3

So with a little trial and error I got it working with (mytemplate.html.twig):

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

{% block content %}
		<div class="flush-top" style="background-image: url({{url('theme://images/header.jpg')}});">
		</div>
        
    <div class="content-wrapper">
        <p>
            {{ page.content }}
        </p>
    </div>

{% endblock %}

And having following also in the .md YAML

body_classes: header-image fullwidth

Does this look sensible? Are there other classes beyond “flush-top” and “content-wrapper” that I should be using?

Thanks again.