Coding and inserting multiple img at once

Just wanted to thank everyone for their contributions. Ended up going with a php solution. This thread got me going in the right direction. Thanks all!

All good suggestions so far.

Below is a vanilla javascript solution, no framework or library dependencies involved:

<script>
const totalImages = 100; // set number of images
for(var i = 1; i < totalImages; i++) {
document.querySelector('.gallery').innerHTML += `
<img class="img-cls${i}" alt ="altim" src="path/to/media/${i}.jpg">
`;
}
</script>

first of all... if you add the img-cls1 class to image 1, this implies that you want to add a separate class for each image... well... why? for what purpose?

Otherwise, there are several possibilities to handle this... among others...HTML, JS, or PHP...

on the HTML side, use Emmet (includes in DW) which will do the job... remember to store the emmet statement in an HTML comment so you can modify it and reuse it if necessary

so write the following instruction

(img.img-cls$$$[alt="altim"][src="path/to/media/$$$.jpg"])*100

then immediately after the last 0, press TAB

JS, well you can use plain vanilla... but if you already have jquery used... you can

<div id="galery"></div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
    for (var i=1;i<100;i++) {
        var img = $('<img />', {
            class: 'img-cls'+i,
            src: 'path/to/media/'+i+'.jpg',
            alt: 'altim'
        });
        img.appendTo($('#galery'));
    }
</script>

and in PHP

<?php
   for ($i=0; $i<100; $i++) {
      echo '<img class="img-cls'.$i.'" alt ="altim" src="path/to/media/'.$i.'.jpg">';
   }
?>

but the question, in my opinion, would be ... why choose one method over another, therefore... other questions could be considered, such as

• Does the list of images need to be updated frequently?
• can images be placed in different folders?
• should we add a filter that would allow us to display only this or that type of image?
• are the images stored in an image database?
• can the list of images be directly listed and read from a folder?

etc. etc... etc...

and perhaps that I totaly missed your point... 😉