Quark: Show hero image from blog page also on default page

Support
,
1

I can’t get the hero image working.
Using the quark theme with the following frontmatter:
title: test
body_classes: ‘title-center title-h1h2 header-dark header-transparent’
hero_classes: ‘text-light title-h1h2 parallax overlay-dark-gradient hero-large’
hero_image: 20190428_0007-1.jpg
hero_align: center

2

Ok, I realized the problem is, that hero_images are only shown in the “blog” template.
How do I enable hero images in the default template?

3

@thomas, You could adapt the default.html.twig in Quark, but I would suggest the following:

  1. Create an inherited theme. This will prevent future updates of Quark to override your changes. Follow the steps outlined in the documentation about Theme Inheritance
  2. Copy ‘user/themes/quark/templates/default.html.twig’ to ‘user/themes/your-theme/templates/default.html.twig’
  3. Copy the following lines from ‘user/themes/quark/templates/blog.html.twig’ into ‘user/themes/your-theme/templates/default.html.twig’:
    line 2:  {% set blog_image = page.media.images[page.header.hero_image] ?: page.media.images|first %}
    to line 2.
    line 22: {% block hero %}
line 23:    {% include 'partials/hero.html.twig' with {id: 'blog-hero', content: page.content, hero_image: blog_image} %}
line 24: {% endblock %}
    to the bottom.

Refresh the page and you should see the hero image.

Hope this helps…

4

This works, thank you very much!
Undfortunatly I now have the text displayed over the image and once again under the image, as you can see on https://okaris.de

5

@thomas, Ah well, that was not part of the question… :wink:

You could try copying template ‘user/themes/quark/templates/partials/hero.html.twig’ to you theme and comment out lines 2 to 6.

That way you will keep the menu and the hero image, but loose the down-arrow and the duplicate page content.

This is only a fingerpointing to get you going. It might be wise to have a good look at the remaining code and strip what you don’t need and optimise it to your liking…

6

This works. Thank you!

7

@thomas, Have you already updated your site? It doesn’t feel right as it is right now…

8

Yes, for me its ok now.

9

@thomas, You might consider having a look at the following:

  • There is a down-arrow that has no function.
  • The default Grav footer might not be what you want.
  • The menu blinks when scrolling up and down
  • Also, the section with the background image has a so called parallax scrolling effect. That means it scrolls in a different speed than the foreground (the text). It is as if two panels are sliding independently above each other.
    • That parallax effect might not be the best reading experience for the user.
    • The parallax creates an annoying blinking effect which is especially noticeable at the ‘Impressum’ page.
10

I now set the page online on its destination url: https://akustikduo.eu/
I managed to get rid of the footer and integrated converse.js.
Unfortunatly I didnt get rid of the arrow and the focus immendiatly hops to the botton converse.js.

11

I solved this with an option in conversejs to not focus the input field.

12

I have the same problem… Now a new question: how to display some content on top of the hero image in this case?

13

@forest

I have the same problem…

Which means it has been solved using the suggestions in this thread… Isn’t it?

Now a new question: how to display some content on top of the hero image in this case?

As you said: “New question”. New questions should be asked in new posts…