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.)
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.
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' />";
}
}
?>
I would use php and make an array and an foreach loop like this:
$pictures = array('linkToPicture1', 'linkToPicture2', 'andSoOn');
foreach ($pictures as $picturelink) {
echo "<img src=".$picturelink.">";
}
And edit the HTML inside the foreach loop and add all your links in the $pictures array.
