Coding and inserting multiple img at once

[customcables067]

I have to imagine this is a function of this software and I'm just not searching the right thing or understanding something. I'm creating a simple photo gallery and I have 100s of photos to place on one page. Currently I have the line 

<img class="img-cls1" alt ="altim" src="path/to/media/1.jpg">

and I copy and paste endlessly until I get all of the lines, then change 1 to a 2, then to a 3, etc etc. Surely Dreamweaver has a better way to handle this? Or should I be coding this entirely different? 

Thanks!

[B i r n o u]

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... 😉

[BenPleysier]

can the list of images be directly listed and read from a folder?

If that is not possible, I would use a database solution. In fact, I would utilise a JSON data source.

Data source (JSON)

{
    "gallery": [
        {
            "ImageID": 1,
            "Image": "img/listing-1.jpg",
            "alt": "This is my neighbour's home."
        },
        {
            "ImageID": 2,
            "Image": "img/listing-2.jpg",
            "alt": "Just finished building our home."
        },
        {
            "ImageID": 3,
            "Image": "img/listing-3.jpg",
            "alt": "My parents' home."
        }
    ]
}

HTML (when using Bootstrap and App Connect JSON Data Source)

	<section class="mt-4">
		<div class="container">
			<div class="row" is="dmx-repeat" id="rptImages" dmx-bind:repeat="jsonImages.data.gallery">
				<div class="col-12 col-sm-6 col-md-4 col-lg-3">
					<img dmx-bind:src="Image" class="img-fluid" dmx-bind:alt="alt">
				</div>
			</div>
		</div>
	</section>

The result

Edit: In case anyone has a problem with the code, this is what Lighthouse reports:

Best Practices: my localhost does not support HTTP/2

[customcables067]

Yikes. That went over my head quickly. 

I didn't mean to imply that each image gets its own class. It was just a generic class name I made up in the post. 

I guess I'm looking for the most simple solution to not copy and paste or find and replace all the image names and paths. 

[B i r n o u]

sorry, as I saw img1 and cls1... I injustely supposed that you was looking for a different and iterate appropriate class...

anyway, if you don't want to bother with code, or dynamic approach,  don't hesitate

run for this one

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 in the place where you want that the galery appear

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

then immediately after the last 0, press TAB (no space in between the last char and the TAB key pressed)

[osgood_]

<quote>Yikes. That went over my head quickly.</quote>

Ben has supplied the most efficient and advanced 'modern' solution, in my opinion, for managing multiple images - however its likely that you would need a better than average knowledge to implement this solution, so one of the other suggestions may well be better suited as they are a lot simpler to implement but are also less flexible.

[osgood_]

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>

[Nancy OShea · Accepted solution]

Don't use static HTML for this.  Do this dynamically.  It will save a huge amount of time.

Below, I used PHP, Bootstrap, jQuery & Fancybox image viewer.  No database required, just a folder of image thumbs and full-sized slides.

https://alt-web.com/GALLERY/BS-Gallery.php

[customcables067]

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!