Vento test - random image from a list of images in yml data

1. readme.md

This Vento template engine partial works as of Lume v3.0.1. Vento allows you to use javascript code by adding a greater-than sign after the opening curly brackets, like {{> code here}}.

• An index.yml is calling home.vto, which is in turn calling this top-top-hero-ticker-image.vto partial among others. The index.yml has an array of images hero.images which is referenced here. The site is bilingual, so there is a Japanese (default lang) src/index.yml and an English src/en/index.yml.
• The {{> ... const randomIndex sets up a random index number based on the length of the hero.images array.
• The randomImage is then used as the index number to get the info from that image, so it can be referenced directly.
• Defaults are set as fallbacks.
• The img tag references the src and alt from the data, of the selected random image.

Every build of Lume, a different image is thus used, adding a little dynamism to the site.

This assumes you're doing a build a day, and that's going to be different on each hosting platform.

2. index.yml

lang: en
id: home
layout: layouts/home.vto
title: Home
script: /js/fathom-post-list-event.js
alert: 
  update: "Update"
hero: 
  title: "Your Virtual IT Department in Japan"
  copy: "eSolia resolves your Japan challenges. "
  ticker: "various service info to be displayed under the hero..."
  images: 
    - src: /assets/scott-graham-5fNmWej4tAA-unsplash.jpg
      alt: Image by Scott Graham on Unsplash
    - src: /assets/chase-chappell-m29D0DvAhF0-unsplash.jpg
      alt: Image by Chase Chappell on Unsplash
    - src: /assets/paymo-gY430v3SD6c-unsplash.jpg
      alt: Image by Paymo on Unsplash1 
    - src: /assets/eliott-reyna-qtMasDNcPQo-unsplash.jpg
      alt: Image by Eliott Reyna on Unsplash
    - src: /assets/ilyuza-mingazova-HaTIYO87qWQ-unsplash.jpg
      alt: Image by Ilyuza Mingazova on Unsplash
    - src: /assets/chase-chappell-HLS3XGNS4Z8-unsplash.jpg
      alt: Image by Chase Chappell on Unsplash
partners:
  title: "Our Partners"
...

3. hero-image.vto.html

<!-- ===== top-hero-ticker-image.vto TEMPLATE START ===== -->
<section class="bg-white overflow-hidden relative"> 
  <div class="2xl:max-w-7xl mx-auto px-8 pb-0 py-12 lg:pt-4 mb-12"> 
    {{>
    const randomIndex = Math.floor(Math.random() * it.hero.images.length);
    const randomImage = it.hero.images[randomIndex];
    const defaultSrc = '/assets/scott-graham-5fNmWej4tAA-unsplash.jpg';
    const defaultAlt = 'Image by Scott Graham on Unsplash';
    }}
    {{ if randomImage }} 
    <img 
      src="{{ randomImage.src || defaultSrc }}" alt="{{ randomImage.alt || defaultAlt }}" 
      width="1200" 
      height="630" 
      loading="lazy" 
      decoding="async" 
      class="w-full max-h-[80vh] rounded-t-2xl relative object-cover object-middle mt-12 border-1 border-accent-200" 
      transform-images="avif webp png jpeg 1280@2"> 
    {{ /if }}
    <div class="bg-accent-200 text-accent-600 font-medium relative rounded-b-2xl z-10 py-2 px-4 bottom-0 w-full overflow-x-hidden">
      <div class="items-center relative animate-marquee flex whitespace-nowrap"> 
      {{ hero.ticker }} {{ hero.ticker }} {{ hero.ticker }} {{ hero.ticker }} {{ hero.ticker }}
      </div> 
    </div> 
  </div> 
</section>
<!-- ===== top-hero-ticker-image.vto TEMPLATE END ===== -->