TileFlow is an image tiled gallery application that provides tiled layout customization, image organization, and export capabilities.
App is available at https://tiling.webgrove.pl/
- Row-Based Layout Engine: Create image grids with customizable row heights and spacing
- Smart Layout Options: Automatic layout calculation with options for last row behavior
- Image Management: Easily upload, arrange, and remove images
- Custom Labels: Add and edit labels for each image with customizable styling
- Flexible Sorting: Sort images by label, filename, or image size
- Advanced Export: Save your entire gallery as a single high-quality image with adjustable DPI
- Responsive Design: Adapts to different screen sizes and devices
Customize your gallery layout with these options:
- Row Height: Adjust the target height for image rows
- Images Per Row: Force a specific number of images in each row
- Spacing Controls: Set precise spacing between images and rows
- Last Row Behavior: Choose how the final row should be displayed (justified, left-aligned, or filled)
- Upscaling Prevention: Maintain image quality by preventing image upscaling
Add context to your images with customizable labels:
- Toggle Labels: Show or hide image labels
- Font Customization: Adjust font size and color
- Background Control: Change label background color and opacity
- Spacing Adjustment: Fine-tune label padding
Organize your images with multiple sorting methods:
- Label Name: Alphabetical sorting by custom labels
- File Name: Sort by original filenames
- Image Size: Arrange by image dimensions
- Sort Direction: Toggle between ascending and descending order
Share your gallery with flexible export options:
- Resolution Control: Adjust DPI settings for different use cases
- Presets: Quick settings for web, basic print, quality print, and professional printing
- Configuration Save: Save your layout settings for future use
# Clone the repository
git clone https://github.com/yourusername/tileflow.git
# Navigate to the project directory
cd tileflow
# Install dependencies
npm install
# Start the development server
npm start# Create a production build
npm run build
# The build files will be in the 'build' directoryTileFlow is built with modern web technologies:
- React: Frontend UI library
- CSS: Custom styling
- Canvas API: For high-quality image export
- Packery: For the image layout engine
- Draggabilly: For the image drag and drop functionality
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- All contributors who have helped shape TileFlow
- The React community for providing excellent tools and resources