Display gallery image title / caption

🆘 Support
1

I’m using Metalsmith in conjunction with DatoCMS. (I used the old Metalsmith portfolio starter, which has since been removed, as a base and built from there.) I’ve been trying to get the titles/captions from each individual image from a gallery within a “work” to display, but all I can get are the entire set of titles to display at once. Here’s the code I’ve been using:

dato.config.js (relevant segment)

  root.directory('src/works', dir => {
    // ...and for each of the works stored online...
    dato.works.forEach((work, index) => {
      // ...create a markdown file with all the metadata in the frontmatter
      dir.createPost(`${work.slug}.md`, 'yaml', {
        frontmatter: {
          title: work.title,
          coverImage: work.coverImage.url({ w: 450, fm: 'jpg', auto: 'compress' }),
          detailImage: work.coverImage.url({ w: 600, fm: 'jpg', auto: 'compress' }),
          position: index,
          excerpt: work.excerpt,
          seoMetaTags: work.seoMetaTags,
          extraImages: work.gallery.map(image =>
            image.url({ h: 800, fm: 'jpg', auto: 'compress' }),
          ),
          imageCaption: work.gallery.map(image => 
              image.title,
          ),
        },
        content: work.description
      });
    });
  });

work.ejs (relevant segment)

<div class="flexslider js_max_height_target">
          <ul class="assets_container slides">
          <% extraImages.forEach(image => { %>
            <li class="asset image no_caption">
              <div class="image">
                <span>
                  <div class="image-wrapper">
                  <canvas class="image-placeholder" width="1600" height="1067"></canvas>
                  <img src="<%= image %>">
                  </div>
                </span>
              </div>
              <p class="caption"><%= imageCaption %></p>
            </li>
          <% }) %>  
          </ul>
</div>

Here is the output of:

<p class="caption"><%= imageCaption %></p>

<p class="caption">Lickey Hills / #6236-01,Clyde Sea / #2038-03,Whiting Bay / #4539-04,Bowen Craigs / #2180-06,Headley Heath / #6234-01,Broomfield / #2180-08,Greeto Bridge Trailhead / #4596-07,Douglas Park / #2181-08,Forhill / #4169-04,Craigielee Plantation / #2888-06,Greeto Bridge Trailhead / #2039-03,Lifford / #0322-04,Clyde Sea / #2038-04,Kelvin Walk / #2181-03,Brisbane Glen / #1437-03,Pencil Beach / #2179-08,Lindon Gate / #2180-09,Redhallbank Plantation / #2888-05</p>

This is just a list of all the titles for the images within the gallery. How can I access each individual one?

I’ve tried using the API to understand how to pull the individual image titles, which seems to work, but I don’t understand how to convert this into something usable within my js / ejs files.

I assume it’s something to do with using “work.gallery.map” to grab the titles/captions, but I’m not sure how else to do this.

Any help would be greatly appreciated.

2

hey @nickantony335

imageCaption is itself an array, so if you want to just print out one single caption, you should print only the caption at the same index of the image you are printing.

On the forEach you can pass also another argument, which is the index of the iteration, that you can use to print the corresponding imageCaption.

Hope this helps!

3

Hey @mat_jack1

Many thanks. That helps explain it a little, but I’m still having trouble implementing this. I’ve done further research, but my js skills are lacking here. Could you post some code examples for how to print a single caption from the imageCaption array, and how to pass the index of the iteration in the forEach loop?