In my previous articles, I wrote tutorial on this topic but it was in PHP, in this post I would like to show you, how you can generate a photo gallery based on the images within given directory using Node js as a platform, express js as framework.
I am not going to write about express js or node js here, as that topics are out of scope for this tutorial, lets focus on topic directly, if you need more information on node js and express js please feel free to visit – https://nodejs.org/, https://expressjs.com/
This project is simple. We will use express web server which does the task of routing and html generation with pug template engine.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "photo-gallery", "version": "1.0.0", "description": "Node js – Auto Generate a Photo Gallery from a Directory", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node server.js" }, "license": "ISC", "dependencies": { "express": "^4.15.2", "pug": "^2.0.0-beta11" } } |
Installing dependencies
Save the above json string in the package.json file, and from that folder, open your terminal and type
|
1 |
npm install |
With issuing above command, node package manager will pull all the required dependencies into node_modules folder under your project root folder.
Create a file called server.js, you can name it as you wish but make sure to update package.json file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
const fs = require('fs'); const express = require('express'); const app = express(); const path = require('path'); app.set('view engine', 'pug'); app.use('/static', express.static(path.join(__dirname, 'uploads'))) app.get('/get-images', (req, res) => { let images = getImagesFromDir(path.join(__dirname, 'uploads')); res.render('index', { title: 'Node js – Auto Generate a Photo Gallery from a Directory', images: images }) }); // dirPath: target image directory function getImagesFromDir(dirPath) { // All iamges holder, defalut value is empty let allImages = []; // Iterator over the directory let files = fs.readdirSync(dirPath); // Iterator over the files and push jpg and png images to allImages array. for (file of files) { let fileLocation = path.join(dirPath, file); var stat = fs.statSync(fileLocation); if (stat && stat.isDirectory()) { getImagesFromDir(fileLocation); // process sub directories } else if (stat && stat.isFile() && ['.jpg', '.png'].indexOf(path.extname(fileLocation)) != -1) { allImages.push('static/'+file); // push all .jpf and .png files to all images } } // return all images in array formate return allImages; } app.listen(8080, function () { console.log(`Application is running at : localhost:8080`); }); |
Here is my view file, which using pug template engine.
|
1 2 3 4 5 6 7 8 9 |
html head title= title body h1=title ul each image in images li img(src=image width=300) |
Running Project
Just issue following command form the terminal, but before doing that please update folder name and path from where you want to pull images.
|
1 |
npm server.js |
Now point your to http://localhost:8080/get-images, you will get output similar to below,
I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.
