How to reference hero image in the images file

1

I have a site that successfully loads a hero image when the image is in the same page
eg. hero_image: small-bandpic.png
But I want to use this image as hero for several pages.
So I put it in user/images
then hero_image: images/small-bandpic.png fails to find the image
and so does hero_image: user/images/small-bandpic.png

I tried with quotes but the administrator removed them.

Does anyone have better ideas?
(I am using quark theme, fully updated and yes, I cleared cache and browser cache.)
Thanks
Norma

2

@normawhite I have never used Quark but had a look at the README and code.

The README.md says explicitly:

The hero_image should point to an image file in the current page folder

And also the code looks for an image in the folder of the page. For example, the twig templates/item.html.twig looks for the image with:

{% set hero_image_name = page.header.hero_image %}
ā€¦
{% set hero_image = page.media[hero_image_name] %}

If you want the template to find an image in the pages/images folder, do the following:

  • In the pageā€™s frontmatter do:

    hero_image: small-bandpic.png

    Note: No path prepended

  • In the template item.html.twig file:

    {% set hero_image = page.find(ā€˜/imagesā€™).media[hero_image_name] %}

    See the Grav docs in Where to put your media files

3

Thanks. I read so many docs that I forgot about this ā€œlittleā€ thing:)

4

@normawhite If you make changes, donā€™t forget to read about Theme inheritance. If you make changes in Quark itself, your changes will be overridden when installing a new release of Quark.

5

I temporarily got my site going with a copy of a hero image in about 5 folders, but now I am trying to get page.find to find it either in the current folder or in /images. page.find does not find anything.

I have a modified copy of hero.html.twig in my theme. It is definitely is being executes. It works when the hero image is in the current folder but fails to find the image in ā€˜imagesā€™.

Here is the code
hero.html.twig name {{page.header.hero_image}}
{% set grid_size = theme_var(ā€˜grid-sizeā€™) %}

{% set hero_image = page.media[page.header.hero_image] %}
{% if hero_image %}
Do nothing
{% else %}
Looking in images for {{page.header.hero_image}}
{% set hero_image = page.find(ā€™/imagesā€™).media[page.header.hero_image] %}
Found {{hero_image.url}}
{% endif %}

{% include ā€˜partials/hero.html.twigā€™ with {id: ā€˜modular-heroā€™} %}

And here is what it prints
Looking in images for small-bandpic.png Found
and it shows a blank picture.

Thanks
Norma

6

Hi @normawhite, long time no seeā€¦

Hate so say, but it seems to be working in my environmentā€¦

In ā€˜One-Page Skeletonā€™ which uses Quark, I did the following:

  • Using $ bin/plugin devtools newtheme I created an inherited theme from Quark
  • In ā€˜/user/config/system.yamlā€™ I set ā€˜theme: mythemeā€™
  • In ā€˜/user/config/system.yamlā€™ I disabled cache: ā€˜enabled: falseā€™.
  • I copied the template ā€˜user/themes/quark/templates/modular/hero.html.twigā€™ into folder ā€˜user/themes/mytheme/templates/modular/ā€™
  • Replaced content of ā€˜hero.html.twigā€™ with the code youā€™ve given above.
  • Created folder ā€˜/user/pages/imagesā€™
  • Moved file ā€˜header.jpgā€™ from ā€˜/user/pages/01.home/01.hero/header.jpgā€™ into ā€˜/user/pages/imagesā€™
  • Refreshed the browser:
    • It prints: (formatted)
      hero.html.twig name header.jpg 
Looking in images for header.jpg 
Found /site-modular/user/pages/images/header.jpg'
    • and the hero images is shown correctlyā€¦
7

Many thanks - the problem was that my header image was in user/images and not user/pages/images. Without your help I doubt that I would have found that ever (though the manual is very clear).

8

Hi

I have the same or very similar problem. I spent about 5 hours browsing the web and trying. No success.

I am using the Skeleton ( Halcyon Site).

I wanted a hero carousel. I modified the header.twig.html with this:

<header id="home">
  {% block navigation %}
  {% include 'partials/navigation.html.twig' %}
  {% endblock %}
  <section class="hero" id="hero">
    <div>
      <div class="nav-hamburger">
        <div class="col-md-12 text-right navicon">
          <a id="nav-toggle" class="nav_slide_button" href="#"><span></span></a>
        </div>
      </div>




      <div id="hero-carousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#hero-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#hero-carousel" data-slide-to="1"></li>
            <li data-target="#hero-carousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="https://via.placeholder.com/1600x800?text=SLIDE+1" alt="...">
              <div class="carousel-caption">
                <h5>SkiGUlmarg.com</h5>
                <p>
                  Vist Skigulmarg to live the ski trip of YOUR life time and ski the HIMALAYAS!
                </p>
                <div class="button">
                  Visit Skigulmarg.com
                </div>

              </div>
            </div>
            <div class="item">
              <img src="https://via.placeholder.com/1600x800?text=SLIDE+2" alt="...">
              <div class="carousel-caption">
                <h5>SkiGUlmarg.com</h5>
                <p>
                  Vist Skigulmarg to live the ski trip of YOUR life time and ski the HIMALAYAS!
                </p>
                <div class="button">
                  Visit Skigulmarg.com
                </div>
              </div>
            </div>
            <div class="item">
              <img src="https://via.placeholder.com/1600x800?text=SLIDE+3" alt="...">
              <div class="carousel-caption">
                <h5>SkiGUlmarg.com</h5>
                <p>
                  Vist Skigulmarg to live the ski trip of YOUR life time and ski the HIMALAYAS!
                </p>
                <div class="button">
                  Visit Skigulmarg.com
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
</section>
</header>

I added a bit of css.

Now what I am trying to do is use something like this (From: https://learn.getgrav.org/16/content/media)

```
{{ page.media['retina.jpg'].sizes('80vw').html() }}
```

For Grav to create a srcset and the images.

I also want to have my images@3x.jpg in user/pages/images folder.

I want to add reference to these images in the frontmatter/header so the name of the images is not hardcoded in the header.twig.html.

I tried so many ways but. no success. I had one way that did what I wanted by adding the images in the file media then using twig filters |first and |last

{{ page.media|fisrt.sizes('100vw').html() }}
{{ page.media|last.sizes('100vw').html() }}

But the if I had more then 2. I did no manage to access the second orā€¦

I trised |slice(1,1)

No luck.

I tried, as shown in the tread above:

<div class="item active">
              {% set image_one_name = page.header.image_one %}
              {% set image_one = page.find('/images').media[image_one_name] %}
              {{ page.media[imageone].sizes('100vw').html('','my sushi alt') }}
              <div class="carousel-caption">
                <h5>SkiGUlmarg.com</h5>
                <p>
                  Vist Skigulmarg to live the ski trip of YOUR life time and ski the HIMALAYAS!
                </p>
                <div class="button">
                  Visit Skigulmarg.com
                </div>

              </div>
            </div>

With this in my page frontmatter

imageone: sushi@3x.jpg
image2: taroko.jpg
image3: hot.jpg
alt:
    alt1: 'this is my alt'
    alt2: 'this is my alt 2'
    alt3: 'this is my alt 3'

Any help would be appreciated.

Thanks in advance.

9

@Boaime, There are a couple of issues in both your frontmatter as in Twig:

  • Variable names in Twig and frontmatter do not match, e.g. ā€˜imageoneā€™ vs. ā€˜image_oneā€™
  • Referencing location of media files in Twig is not consistent. You refer to two different folders:
    • ā€˜pages/imagesā€™ folder by using page.find('/images').media[image_one_name]
    • ā€˜pages/<currentpage>/ā€™ folder by using page.media[imageone]

Here is a working sample, where all images are stored in ā€˜/user/pages/imagesā€™:

frontmatter:

slides:
    - name: sushi.jpg    # Note: The file does not have any density info
      alt: 'this is my alt'
    - name: taroko.jpg
      alt: 'this is my alt 2'
    - name: hot.jpg
      alt: 'this is my alt 3'

Twig:

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  {% for slide in page.header.slides %}
    {% set image = page.find('/images').media[slide.name] %}
    <div class="item {{ loop.first ? 'active' : '' }}">
        {{ image.sizes('100vw').html('', slide.alt) }}
        <div class="carousel-caption">
          ... 
        </div>
    </div>
  {% endfor %}
</div>

ā€˜/user/pages/images/ā€™ folder:

sushi@3x.jpg  // Note the density indication
hot,jpg
taroko.jpg

This will generate the following image elements:

With denisity:

<img alt="this is my alt" src="/grav/site-halcyon/images/3/3/c/a/3/33ca33e5eb2c1b2213c51989304f8f18315df896-sushi1x.jpeg" srcset="/grav/site-halcyon/user/pages/images/sushi@3x.jpg 4928w, /grav/site-halcyon/images/b/1/c/2/2/b1c22f78b42f13534992253fbc5c0eb66e68c084-sushi2x.jpeg 3285w, /grav/site-halcyon/images/3/3/c/a/3/33ca33e5eb2c1b2213c51989304f8f18315df896-sushi1x.jpeg 1642w" sizes="100vw">

Without density:

<img alt="this is my alt 2" src="/grav/site-halcyon/user/pages/images/taroko.jpg">

Apart from the coding issues, I think the missing link was this note in the documentation:

Letā€™s assume you have a file called retina@2x.jpg , you would actually reference this in your links as retina.jpg [ā€¦]

This means, the file itself contains the density in its name, but file references in frontmatter/Twig do not contain density info.

Hope this helpsā€¦

1 Like
10

@Boaime, I think this question should be in a separate issue. If you create a new issue, Iā€™ll be happy to copy my reply.

@hughbris, Do you perhaps have the permission to split this issue into its own with a few keystrokes? That would be the easiest way I guess.

11

Thank You. Works perfectly :slight_smile:

12

That doesnā€™t seem to be an option for me.