light-image-gallery

View Demo · Report Bug

Table of Contents

1. About The Project
2. Prerequisites
3. Installation
4. Edit content
5. Deploy

About The Project

This React application serves as a template for building a lightweight and elegant image gallery. The application utilizes a JSON file to store data about the gallery and images are loaded from a specific folder. The color scheme of the application and header with contact information are fully customizable to suit the user's needs.
This application is perfect for those looking for a simple and efficient way to showcase their images in a professional and attractive manner.

---

Prerequisites

If you haven't already, you need to download GIT and NodeJS :

• nodejs.org
• git-scm.com

I recommand to minify your image to improve your site loading performance (imagecompressor.com, compressnow.com)

Installation

First, start by clicking the 'Use this template' button and 'Create a new repository'. It will create a clone of this repository.

Then, name it whatever ya want.

Once your new repository is created , enter the following command into your favorite terminal:

 git clone https://github.com/<--USER-->/<--REPO-->
 cd <--FOLDER-NAME-->

Then you need to install dependencies into your project so the stuff actually works !

npm i

(back to top)

Edit content

To edit the content, everything happens in src/configs folder. Everything is optionnal so custom the content as you wish !

Header

• Place your profile picture in src/configs folder

• Edit the header variable in src/configs/data.tsx file :

{
  title: "Hey there, I'm Billy Crawford.",
  description: "Welcome to my images gallery !",
  image: require("./profile.png"),
  disabled: false,
}

• You can also add your social link in the social variable :

{
  "github": "https://github.com/billycrawford",
  "twitter": "https://twitter.com/billycrawford",
  "linkedin": "https://www.linkedin.com/in/billycrawford",
  "disabled": false
}

Images galleries

• Place your images in the src/configs/images folder. Actually, the image extension supported are : eot,svg,ttf,woff,woff2,png,jpg,gif,webp,jpeg

• Edit the galleries variable in src/configs/data.tsx file :

[
  {
    category: "Category name",
    images: [
      {
        name: "image.png", // Important: specify the extension
        description: "Description of image 1",
      },
      {
        name: "image2.png",
        description: "Description of image 2",
      },
      ..., // duplicate image object for more
    ],
  },
  ..., // duplicate gallery object for more
]

Colors

You can change the color of your site with the light and dark mode in src/configs/colors.scss file :

.app.light {
  --color-primary: #f7f7f7;
  --color-secondary: #dfe3ee;
  --color-text: #001a2c;
}

.app.dark {
  --color-primary: #002137;
  --color-secondary: #001a2c;
  --color-text: #f1f1e6;
}

(back to top)

Deploy

• Run locally!

  To see it in action in your browser, run the start script:

npm run start

• Deploy onto a live website!

  1. First, create a Netlify account : netlify.com
  2. Then click on 'Import an existing project' and connect your github account :
  3. Pick your hithub repo create with the template :
  4. Then click on 'Deploy' (the site deployment can be a bit long)
  5. Netlify will give you a random domain (ex: https://voluble-bavarois-6f8126.netlify.app). You are free to buy a custom domain if you want by following Netlify set up !

(back to top)

---

VOILA ! 🎉

You're brand new gallery images should be ready to go!

Share it with some friends, family members, employers?

(back to top)