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?
Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
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 | 60 | 15 hours ago | ||
| 2 | 66 | 18 hours ago | ||
| 1 | 33 | 19 hours ago | ||
| 2 | 69 | 6 days ago | ||
| 2 | 61 | 6 days ago |