How to reference hero image in the images file

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.