0

In my university course/module that covers intermediate HTML and CSS, and basic java-script (thought we haven't gotten there yet): I need to create a website using HTML, CSS and optionally java-script as bonus marks.

I am stuck at the gallery, I want to make a responsive image grid (that I can learn/get from https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp); However I want to have a local folder filled with say 100 images and my website with html/css/js code that doesn't require me to manually hard code each individual image from the folder. In hindsight I want to add and remove images from said folder and have the website's gallery adapting to the added/removed images.

Theoretically I assume that I'll need to read in the folder's contents, into a list/array, then somehow parse them and output the content.

I have found two sources that touches on the idea: - https://www.html5rocks.com/en/tutorials/file/dndfiles/ - https://github.com/blueimp/JavaScript-Load-Image#meta-data-parsing

I have searched for a few hours and I would think that such a code should exist somewhere, thought I believe my lack of knowledge regarding html, css, js, etc and general terminology is hindering me in my search, thus any advice would be greatly appreciated.

Thank you in advance for your time and effort.

Tessalarius
  • 25
  • 1
  • 1
  • 5
  • 1
    You will need server side code to do so. So just forget about it. – evgeni fotia Oct 14 '18 at 23:04
  • 2
    This question may be a duplicate. Have a look at https://stackoverflow.com/questions/18480550/how-to-load-all-the-images-from-one-of-my-folder-into-my-web-page-using-jquery – Rocky Sims Oct 14 '18 at 23:17
  • @RockySims I noticed that question, however it started dwelling into areas such as jquery and Ajax which are at th moment out of my capabilities. Unless, on a scale of 1-10, how difficult would it be to learn enough jp, jquery and Ajax to achieve this? – Tessalarius Oct 15 '18 at 05:59
  • 1
    Well, if you want new images to appear just by adding them to the folder, there's no way to avoid using javascript. If you're going to use javascript, I'd say adding jQuery to the mix will make things easier on the whole not harder. Ajax might be a little harder but not much especially if you have code to copy and paste. All that said there is a much easier solution if you just want to automate the process of generating the html for a bunch of where the src is filled in automatically for each image in the folder, copy the result, and paste that in manually. – Rocky Sims Oct 15 '18 at 06:19

2 Answers2

3

Consider using a shell script from the corresponding directory where source image files are present.

You can simply make a .cmd file with the following code and execute that, it would dynamically generate an html file where you can display images as you wish.

scriptToExecute.cmd

echo ^<!doctype html^>^<head^>^</head^>^<body^> >> index.html
for %%j in (*.JFIF, *.png, *.JPG, *.GIF) do echo ^<img src=^"./%%j^" style="width:176px;height:300px" ^>  >> index.html
echo ^</body^>^</html^> >> index.html

index.html

<!doctype html><head></head><body> 
<img src="./2.jfif" style="width:176px;height:300px" >  
<img src="./3.jfif" style="width:176px;height:300px" >  
<img src="./4.jfif" style="width:176px;height:300px" >  
<img src="./1.png" style="width:176px;height:300px" >  
</body></html>

You can make changes to the shell script to display the images in different elements such as a carousel, etc.

thesquaregroot
  • 1,414
  • 1
  • 21
  • 35
subbiah
  • 31
  • 4
2

If you want to load images from a folder dynamically (not entering each manually) you can't avoid needing javascript. Adding jQuery into the mix makes it easier not harder. Don't be afraid of using jQuery even if you're only just starting to learn javascript.

To be able to use jQuery, all you need to do is add this:

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Essentially what that does is add the $ variable which you'll see in the following code provides a straightforward way to make an ajax call and also to add new img elements to the body element.

To create an element for each image in the folder (assuming it contains only images) should be as simple as the following:

<script type="text/javascript">
    var folder = "images"; //TODO: change this to the path to your folder with the images.
    $.ajax({
        url: folder,
        success: function(data) {
            $(data).find("a").attr("href", function(i, val) {
                $("body").append("<img src='" + folder + '/' + val + "'>");
            });
        }
    });
</script>

Alternately, if you just want to avoid having to type out all the img elements by hand and fill in each src attribute by hand, you can write a bit of javascript that automates that. Using the following script you'll be able to click 'Choose Files' and select all the images in the folder, click 'Open', and then click 'Go' and it will generate the html for all the img elements and display it. You can then copy that html and manually paste it into your real project.

<input id="file" type="file" multiple />
<button onClick="go()">Go</button>
<div id="output"></div>

<script type="text/javascript">
  function go() {
  const fileInput = document.getElementById('file');
  const outputDiv = document.getElementById('output');
  let html = '';
  for (const file of fileInput.files) {
    html += '<img src="images/' + file.name + '" />';
  }
  outputDiv.textContent = html;
}
</script>

https://codepen.io/rockysims/pen/MPEMOG

Rocky Sims
  • 3,523
  • 1
  • 14
  • 19
  • Thank you, I appreciate your effort and advice immensely. I tried it and I might have implemented it incorrectly, does the following look correct: https://codepen.io/tessalarius/pen/dgZRaP/ – Tessalarius Oct 15 '18 at 14:53
  • 1
    Yes, that looks correct with one except (a mistake on my part). `folder + val` should be `folder + '/' + val`. It may still not work, however, unless you're running a web server. If that is the problem, you should see the following error message in the console (F12 to open the console) once you open the page: `Cross origin requests are only supported for protocol schemes`. – Rocky Sims Oct 17 '18 at 02:47
  • 1
    The thing to understand about javascript is it isn't allowed to access your hard drive directly. If it were, then any website you viewed would be able to access your hard drive (a major security problem). So instead javascript is only allowed to access files served up by some web server (usually via http). When you set `src="Assets/UtilizedAssets/Gallery/Dance/somePic.png"` that really means `src="http://www.MyWebsite.com/Assets/UtilizedAssets/Gallery/Dance/somePic.png"` so, if you're not running a web server, to allow access to files on your hard drive you have to upload them (` – Rocky Sims Oct 17 '18 at 02:54