⚠️ THIS IS A MIRROR ⚠️

Warning

Hi there! This is a read-only mirror, automatically synced from our Forgejo instance.

• 🛠️ All development happens on the primary Forgejo repository
• 💬 You're welcome to open Issues, Discussions, or even PRs here if it's convenient — just know they may not be acted on directly, since the sync is one-way

For the best chance of your contributions being merged, or for quicker responses, please head over to the main Forgejo repo.

• Original repo: https://git.prisma.moe/aichan/image_gallery

— Self-hosting 4 the win!

---

Image Gallery

A responsive image gallery built with Rust Yew and WebAssembly. Features dynamic image loading, smooth animations, and Docker deployment for showcasing photo collections.

Yew Documentation · Report Bug · Request Feature

Table of Contents

1. About The Project
• Built With
2. Architecture
   • Gallery Frontend
   • Image Discovery
3. Features
4. Deployment
• Using Docker
• Using Docker Compose
5. Development
• Prerequisites
• Local Development
6. Contributing
7. License
8. Contact

About The Project

Image Gallery is a modern, responsive web application for displaying photo collections. Built with Rust and WebAssembly, it provides fast loading times and smooth user interactions. The application automatically discovers images in a directory and generates a dynamic gallery interface with lazy loading and responsive design.

Perfect for photographers, artists, or anyone wanting to showcase their image collections with a clean, professional interface.

(back to top)

Built With

(back to top)

Architecture

The Image Gallery uses a simple but effective architecture that separates image discovery from the frontend display.

Gallery Frontend

Technology: Rust Yew (compiled to WebAssembly)

• Responsive grid layout that adapts to different screen sizes
• Lazy loading for optimal performance with large image collections
• Smooth animations and transitions
• JSON-based image metadata loading
• Modern CSS Grid and Flexbox styling

Image Discovery

Technology: Bash script automation

• Automatic scanning of image directories
• JSON metadata generation with image paths and metadata
• File system monitoring for dynamic updates
• Support for common image formats (JPG, PNG, GIF, WebP)

(back to top)

Features

• 📸 Dynamic Image Loading - Automatically discovers and displays images from directories
• 🎨 Responsive Design - Adapts seamlessly to desktop, tablet, and mobile devices
• ⚡ WebAssembly Performance - Fast, native-speed execution in the browser
• 🖼️ Lazy Loading - Images load as needed for optimal performance
• 📱 Touch-Friendly - Optimized for mobile interactions and gestures
• 🔄 Auto-Discovery - Automatically updates when new images are added
• 🐳 Container Ready - Easy deployment with Docker and Docker Compose

(back to top)

Deployment

Just use docker-compose, it's cool an easy...

Using Docker

Run the pre-built container:

docker run --rm -it \
  -p 80:80/tcp \
  -e GALLERY_TITLE="Image Gallery" \
  -e GALLERY_HEADING="Welcome!" \
  -e GALLERY_DESCRIPTION="This is the gallery description that you can customize with GALLERY_DESCRIPTION env variable and even supports <a href=\"https://git.prisma.moe/aichan/image_gallery\">links like this</a>." \
  -e VISIT_COUNTER_URL="https://visitcounter.aichan.ovh/counter/gallery_example/svg?label=Visits&background_label=00000000&background_counter=00000000&shadow_opacity=0&grad_stop1_color=00000000&grad_stop1_opacity=0&grad_stop1_opacity=0&grad_stop2_opacity=0" \
  -v /path/to/your/images:/usr/share/nginx/html/static/images \
  git.prisma.moe/aichan/image_gallery:latest

Replace 'gallery_example' with your domain or unique identifier

Using Docker Compose

Create a docker-compose.yml file:

services:
  image_gallery:
    container_name: image_gallery
    image: git.prisma.moe/aichan/image_gallery:latest
    ports:
      - <YOUR_PORT>:80
    environment:
      - GALLERY_TITLE=Image Gallery
      - GALLERY_HEADING=Welcome!
      - GALLERY_DESCRIPTION=This is the gallery description that you can customize with GALLERY_DESCRIPTION env variable and even supports <a href="https://git.prisma.moe/aichan/image_gallery">links like this</a>.
      - FOOTER_LINK_TEXT=Repository
      - FOOTER_LINK_URL=https://git.prisma.moe/aichan/image_gallery
      - VISIT_COUNTER_URL=https://visitcounter.aichan.ovh/counter/gallery/svg?label=Visits&background_label=00000000&background_counter=00000000&shadow_opacity=0&grad_stop1_color=00000000&grad_stop1_opacity=0&grad_stop1_opacity=0&grad_stop2_opacity=0  # Replace 'gallery_example' with your domain or unique identifier
    volumes:
      - <PATH_TO_YOUR_IMAGES>:/usr/share/nginx/html/static/images
    restart: unless-stopped

Then run:

docker-compose up -d

Access Point:

• Gallery will be served at http://localhost:<YOUR_PORT>/

Note

You can generate your custom counter badge in https://visitcounter.aichan.ovh/ and copy the src part of it.

(back to top)

Development

Prerequisites

• Rust installed (includes Cargo)
• WebAssembly target:

  rustup target add wasm32-unknown-unknown

• Trunk for building and serving:

  cargo install --locked trunk

• (Optional) Docker for containerized deployment

Local Development

1. Clone the repository:

   git clone https://git.prisma.moe/aichan/image_gallery.git
   cd image_gallery

2. Add your images to the static/images/ directory

3. Generate the images JSON:

   ./generate_images_json.sh

4. Run the development server:

   trunk serve --address 0.0.0.0

5. Open your browser to http://localhost:8080

Development Notes:

• The generate_images_json.sh script scans the static/images/ directory and creates static/images.json
• Any changes to the Rust code require a rebuild
• CSS changes in styles.css are applied immediately
• Add new images to static/images/ and regenerate the JSON for them to appear

(back to top)

Contributing

Contributions are welcome! Please fork the repository, make your changes, and open a pull request.

1. Fork the Project on Forgejo
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the European Union Public License v1.2. See LICENSE for more information.

(back to top)

Contact

Aitor Astorga Saez de Vicuña - a.astorga.sdv@protonmail.com

Project Link: https://git.prisma.moe/aichan/image_gallery

(back to top)

Acknowledgments

Thanks to these amazing projects and technologies!

• Rust Yew - A modern Rust framework for creating multi-threaded front-end web apps with WebAssembly
• WebAssembly - A binary instruction format for a stack-based virtual machine

(back to top)

---

Warning

🔗 This repository is automatically mirrored from a private Forgejo instance.