New to Grav but familiar with HTML/CSS/JS.
Tried insert an image into the page:
TXT
The image displays correctly but also displayed as the background image of that particular page, which is not my intention.
Any hints?
Support
Solved by pamtbaau View solution
@taylorren, That's quite odd...
No answers, only questions:
- Which theme are your using?
- What template are you using for the page? Eg. default.md, item.md, ...
- What's the frontmatter of that page?
- Have you made any changes to templates/code?
- Any plugins added?
Thanks for the reply. Answers below:
- Active theme: Quark 2.0.2. Tried to Antimatter 2.2.0, more or less the same issue.
- The template is blog.md.
- frontmatter (indention may not represent the actual content due to copy-paste):
title: 任氏有无轩铭名记
content:
items:- '@self.children'
limit: 5
order:
by: date
dir: desc
pagination: true
url_taxonomy_filters: true
- '@self.children'
- Nope
- Total 9 plugins, installed bigfoot/mathjax by myself, the other 7 are out of the zipped file.
See a screenshot below.
Source code inspection, 2 occurences of the referenced jpg file:
HTML
<section id="blog-hero" class="section modular-hero hero " style="background-image: url('/user/pages/03.rsywxmmj/avatar.jpg');">
...
<p><img alt="我的照片" src="[/user/pages/03.rsywxmmj/avatar.jpg](http://wiki/user/pages/03.rsywxmmj/avatar.jpg)" /></p>
The <p>...</p> corresponds to my page content but the section part is auto generated, I believe!
I see the problem now. The configuration of that theme says:
If you did not specify a Hero image, it will use the first image found in the page folder... So I guess this question should be addressed to the author on how to disable it.
@taylorren, No need to ask the devs, this can be done by yourself. Overriding templates is a common practice in Grav to adapt the layout to ones own needs.
- First create an inherited theme, else you will loose your changes when Quark gets updated
- Copy file '/user/themes/quark/templates/blog.html.twig' into folder '/user/themes/mytheme/templates'.
- Open '/user/themes/mytheme/templates/blog.html.twig' in your favorite editor
- You have 2 options:
- Show hero only when defined in page header
- To remove the default image, replace line 2 with:
TWIG
{% set blog_image = page.media.images[page.header.hero_image] %} - To prevent hero container from being created when no image is defined, replace line 22 with:
TWIG
{% if blog_image %} {% include 'partials/hero.html.twig' with {id: 'blog-hero', content: page.content, hero_image: blog_image} %} {% endif %}
- To remove the default image, replace line 2 with:
- Never show hero in blog.md
- Delete line 2 and line 21-23
- Show hero only when defined in page header
Hope this helps...
NB. If it works, you might want to close the issue on github.
last edited 01/23/20 by pamtbaau
Thanks. I can do that. Close this one.
Log in to reply.
Suggested topics
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 2 | 70 | 1 hour ago | ||
| 4 | 233 | 2 days ago | ||
| 13 | 283 | 5 days ago | ||
| 9 | 340 | 1 week ago | ||
| 4 | 192 | 2 weeks ago |