Using Eleventy Converted a long long long page of HTML into 10 lines of code in a Nunjucks for loop. So cool !!!

Here's how:

I started with a neverending HTML file of the same HTML code over and over 50+ times. With different links to different albums in Flickr. It was hard to navigate and easy to type and easy to mess up. So I converted to and Array + Eleventy + nunjucks. Way more manageble and easy to add to in the future. Ed H.

The file below is located in the _data folder, Eleventy creates a global array of the same name as the filename which in this case is allPhotosbyClassorCategory.js which creates a global array named allPhotosbyClassorCategory.

Note: For some reason these arrays created this way are not accesable from macro's and have to be passed into macros. That doesn't apply in this case but it is nice to know for future reference. With the following format:

//
// [titleorCategory, photoLink, alt, imageLink, category] = 5 related items = format of the data arrat below
//

module.exports = [

["Alumni News", "https://www.flickr.com/photos/ahs/albums/72157661428008576", "click to see News from Ames High School Ames, Iowa AHS Alumni", "https://farm1.staticflickr.com/619/22826076779_0dae902f57_q.jpg", "News from AHS Alum"],

["Authors", "https://www.flickr.com/photos/ahs/albums/72157659500146404", "click to see Ames High School AHS Authors", "https://farm6.staticflickr.com/5760/23686938175_3806117b53_q.jpg", "AHS Authors"],

["MORE pics", "/pictures.html", "click to see even MORE AHS Pictures", "https://live.staticflickr.com/1517/23817559684_c61170e622_q.jpg", "Even MORE AHS Pictures"],

["Collections", "https://www.flickr.com/photos/ahs/collections/72157650972192276/", "click to see Ames High School, Ames, Iowa Alumni photo collections", "https://c1.staticflickr.com/1/571/23135431790_9e4563188b_q.jpg", "Even more Ames High School pictures", "Collections"],

["AHS Albums", "https://www.flickr.com/photos/ahs/albums", "click to see Ames High School AHS alumni photo albums", "https://c2.staticflickr.com/6/5633/22569345614_9f9a890e1e_q.jpg", "Even more Ames High School pictures"],

["ALL AHS", "/photos/", "All AHS PHOTOs", "https://c1.staticflickr.com/9/8723/16814302489_1e6abbbdf7_q.jpg", "click to see more even MORE!! Ames High School pictures"],

["Holiday", "https://www.flickr.com/photos/ahs/collections/72157662982665191/", "Click to see photos from past Ames High School All Class Holiday Gatherings", "https://c1.staticflickr.com/9/8584/16239902161_e0e29d1cf5_q.jpg", "All Ames High School Holiday Gatherings"],

["1938", "https://www.flickr.com/photos/ahs/albums/72157675033642233", "click to see photos from the Ames High School class of AHS 1938", "https://c2.staticflickr.com/1/681/31305396033_07ee9a45bf_q.jpg", "1938"],

["1943 44 45", "https://www.flickr.com/photos/ahs/albums/72157650538915707", "click to see photos from the Ames High School combined reunion classes of AHS 1943 1944 and 1945", "https://farm4.staticflickr.com/3910/15016618157_cb69117d54_q.jpg", "1943 1944 1945"],

["1949", "https://www.flickr.com/photos/ahs/albums/72157658471342329", "click to see photos from the Ames High School class of 1949", "https://farm6.staticflickr.com/5727/20960182954_1bcbd6b893_q.jpg", "1949"],

["1950", "https://www.flickr.com/photos/ahs/albums/72157649351356943", "click to see photos from the Ames High School class of 1950", "https://farm4.staticflickr.com/3795/19316727460_cf202aa3eb_q.jpg", "1950"],

...
...

this goes on and on for 50+ entries and then a closing bracket

]

10 Lines of Code

The array allPhotosbyClassorCategory is referenced in the nunjucks for loop below. It pulls out 5 items from the array on each iteration which are then displayed using the nunjucks double curly braces notation in the HTML.

  <div class="level is-flex-wrap-wrap is-mobile">

    {& for yearorCategory, photoLink, alt, imageLink, category in allPhotosbyClassorCategory %&} {# Nunjucks for loop pulling out 5 items on each iteration #}

    <div class="level-item has-text-centered">  {# https://Bulma.io CSS framework level class #}
      <div>
        <figure class="image is-96x96 m-0 p-0"><a href={{ photoLink }} title="{{ alt }}"> <img src={{ imageLink }{ width="75" height="75" alt={{ category }}> </a>
        </figure>
        <div>{{ yearorCategory }{</div>
      </div>
    </div>

    {& endfor &}

Creates the following page full of photo thumbnail images

click here → photos.ameshigh.org