Pricing
PURCHASE OPTIONSโ€‹
PRICING GUIDANCEโ€‹
๐ŸŽ‰ EdgeOne Free Planย Redemption๏ผUnlock the Worldโ€™s First Free CDN with China Access !
Back to Templates

Minimal Gallery

A clean, minimalist gallery template that showcases artwork with simple navigation and spacious layout. Perfect for displaying creative collections professionally.

View Demo
FrameworkNext.js
Use CaseGallery
A clean, minimalist gallery template that showcases artwork with simple navigation and spacious layout. Perfect for displaying creative collections professionally.

Nimmal Gallery

Nimmal Gallery is a modern image showcase website template built with Next.js. It provides an elegant interface to display your photography works, supporting category display, album management, and responsive design.

Quick Deploy

You can quickly deploy to Tencent Cloud EdgeOne using the button below:

Deploy to Tencent Cloud

Live Demo

๐ŸŒ Online Preview: https://minimal-gallery.edgeone.app/

Website Content Configuration

Homepage Content

  1. Navigate to app/config/home.json
  2. Modify the content according to your needs:
    {
      "hero": {
        "title": "Your Title",
        "subtitle": "Your Subtitle",
        "description": "Your Description",
        "cta": {
          "primary": "Primary Button Text",
          "secondary": "Secondary Button Text"
        },
        "backgroundImage": "/images/hero-bg.jpg"
      },
      "featuredCollections": [
        {
          "id": "collection-1",
          "title": "Collection Title",
          "description": "Collection Description",
          "image": "/images/collection-1.jpg",
          "link": "/gallery/category"
        }
      ],
      "services": [
        {
          "id": "service-1",
          "title": "Service Title",
          "description": "Service Description",
          "icon": "icon-name"
        }
      ],
      "testimonials": [
        {
          "id": "testimonial-1",
          "content": "Testimonial Content",
          "author": "Author Name",
          "role": "Author Role"
        }
      ]
    }
    

Gallery Content

  1. Navigate to app/config/gallery.json
  2. Modify the content according to your needs:
    {
      "categories": {
        "nature": {
          "title": "Nature",
          "description": "Nature Photography Collection",
          "albums": [
            {
              "id": "nature-1",
              "title": "Mountain Majesty",
              "description": "Capturing the majestic beauty of mountain landscapes",
              "coverImage": "/images/gallery/nature/your-image.jpg",
              "photoCount": 4,
              "createdAt": "2024-03-15",
              "photos": [
                {
                  "id": "photo-1",
                  "url": "/images/gallery/nature/photo1.jpg",
                  "title": "Photo Title",
                  "description": "Photo Description"
                }
              ]
            }
          ]
        }
      }
    }
    

Image Resources

Download Default Images

  1. Visit Unsplash to download your preferred images
  2. Place the images in the public/images/gallery directory following this structure:
    public/images/gallery/
    โ”œโ”€โ”€ nature/
    โ”œโ”€โ”€ urban/
    โ”œโ”€โ”€ travel/
    โ””โ”€โ”€ architecture/
    

Project Structure

nimmal-gallery/
โ”œโ”€โ”€ app/                    # Next.js application directory
โ”‚   โ”œโ”€โ”€ components/        # Reusable components
โ”‚   โ”œโ”€โ”€ config/           # Configuration files
โ”‚   โ”œโ”€โ”€ gallery/          # Gallery related pages
โ”‚   โ”œโ”€โ”€ types/            # TypeScript type definitions
โ”‚   โ””โ”€โ”€ utils/            # Utility functions
โ”œโ”€โ”€ public/               # Static assets
โ”‚   โ””โ”€โ”€ images/          # Image resources
โ””โ”€โ”€ out/                 # Build output directory

Local Development

  1. Clone the repository

    git clone https://github.com/tomcomtang/nimmal-gallery.git
    cd nimmal-gallery
    
  2. Install dependencies

    npm install
    
  3. Start development server

    npm run dev
    
  4. Build the project

    npm run build
    
  5. Preview the build

    npm run start
    

Tech Stack

  • Next.js 14
  • React 18
  • TypeScript
  • Tailwind CSS
  • ESLint
  • Prettier

License

MIT License