Insert an image results in background image change

Support
1

New to Grav but familiar with HTML/CSS/JS.

Tried insert an image into the page:

    ![Photo](avatar.jpg)

The image displays correctly but also displayed as the background image of that particular page, which is not my intention.

Any hints?

2

@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?
3

Thanks for the reply. Answers below:

  1. Active theme: Quark 2.0.2. Tried to Antimatter 2.2.0, more or less the same issue.
  2. The template is blog.md.
  3. 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
  4. Nope
  5. 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:

    <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!

Ashampoo_Snap_2020年1月21日_16h43m30s_004_
Ashampoo_Snap_2020年1月21日_16h43m30s_004_1453×830 407 KB

4

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.

5

@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:
    1. Show hero only when defined in page header
      • To remove the default image, replace line 2 with:
        {% 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:
        {% if blog_image %}
   {% include 'partials/hero.html.twig' with {id: 'blog-hero', content: page.content, hero_image: blog_image} %}
{% endif %}
    2. Never show hero in blog.md
      • Delete line 2 and line 21-23

Hope this helps…

NB. If it works, you might want to close the issue on github.

6

Thanks. I can do that. Close this one.