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

You have multiple options to deploy the Image Gallery:

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>/

(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)