Put all images from directory into HTML [closed]

Question

I am creating a website with an image slider (owl carousel) and I am looking for a good method to put all the images in my HTML quickly.

I hope so, that there is an alternative method to inputting images, because i have about 40 pictures and adding it manually, by hand, will be very tedious...

Could you guys help me by suggesting tell me a generating app or site or anything?

(I'm using Webstorm, but i didn't find any corresponding feature for this in that.)

Answer 1

If the list of files is static (you didn't mention if they are created dynamically or not) and you are using Windows a simple approach like this will do:

for %i in (*.jpg) do echo ^<img src="%i" /^> >> all.html

This will create a all.html file which includes references to your jpgs. Simply run the command from a command line window in the directory where your images are stored.

If you need to have the all.html in some other place either move it there or change to >> C:\files\html\all.html. Another alternative is to add a path in the parenthesis, like (C:\files\images\*.jpg) Don't forget to delete the all.html if necessary because the command shown above will always append to an existing file so you might end up with double entries.

Answer 2

You can't just use HTML for this (the only language tag in your question). You're going to need a server-side language, because they can interact with the server (e.g. reading the filesystem).

PHP is great for this: You can iterate through the folder with the images and dynamically add images, so that you don't have to do it manually.

Here's an example:

<?php
    $files = scandir('path/to/img/directory/');
    foreach($files as $file) {
        if($file !== "." && $file !== "..") {
            echo "<img src='$file' />";
        }
    }
?>