how can I apply multiply each as express handlebars (#each)? - node.js

Question

.Handlebars file
{{#each products}}
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<div class="product_block">
<div class="product-image-container image">
<a href="#" class="product_img_link">
<img src="{{**???**= /images/product-1-1.jpg}}" alt="product-1-1" class="img-product" />
<span class="product-additional">
<img src="{{**???**= /images/product-1-2.jpg}}" alt="product-1-2-back" />
</span>
</a>
.index.js
app.get('/collections/all', (req, res) => { res.render('collections/all', {
title: 'All Products',
products: [
'/images/product-1-1.jpg',
'/images/product-1-2.jpg',
'/images/product-2-1.jpg',
'/images/product-2-2.jpg'
] }); });
Q. As you can see, I want to apply like 'product-1-1' and 'product-1-2' each <img>
But How can I apply each <img> as {#each} ???
Because I have to repeat <div class="col->..
So it is hard to apply ?
Excuse me, please help me ~

Answer 1

I think you have to rearange your data. At least you will have the opportunities of the (dynamic) each loop instead of comparing (static) filenames.
products: [
{
front: '/images/product-1-1.jpg',
back: '/images/product-1-2.jpg',
altFront: 'product-1-1',
altBack: 'product-1-1-back'
},
{
front: '/images/product-2-1.jpg',
back: '/images/product-2-2.jpg',
alt: 'product-2-1',
altBack: 'product-2-1-back'
},
]
{{#products}}
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<div class="product_block">
<div class="product-image-container image">
<a href="#" class="product_img_link">
<img src="{{front}}" alt="{{altFront}}" class="img-product" />
<span class="product-additional">
<img src="{{back}}" alt="{{altBack}}" class="img-product" />
</span>
</a>
</div>
</div>
</div>
{{/products}}