Highlighted

Coding and inserting multiple img at once

Explorer ,
Mar 03, 2020

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy_OShea | Adobe Community Professional

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

 

Topics

Code, How to

Views

934

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Coding and inserting multiple img at once

Explorer ,
Mar 03, 2020

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by Nancy_OShea | Adobe Community Professional

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

 

Topics

Code, How to

Views

935

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Mar 03, 2020

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 04, 2020

Copy link to clipboard

Copied

 

 

 

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

junk.jpg

 

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

junk.jpg

Best Practices: my localhost does not support HTTP/2


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Mar 04, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 04, 2020

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 04, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Mar 04, 2020

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Mar 05, 2020

Copy link to clipboard

Copied

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

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
Mar 05, 2020

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group