# Streamlit Image Gallery Enhanced 🖼️✨
[](https://badge.fury.io/py/streamlit-image-gallery-enhanced)
[](https://pypi.org/project/streamlit-image-gallery-enhanced/)
An enhanced Streamlit component for displaying images in a responsive grid with **hover effects**, **click callbacks**, and **modern HTML structure**.
## 🚀 Features
- ✨ **Hover effects** with smooth transitions
- 👆 **Click callbacks** - get the index of clicked images
- 🎨 **No Material-UI dependency** - pure HTML/CSS
- 📱 **Responsive grid layout** using CSS Grid
- 🖼️ **Fixed image dimensions** with object-fit cover
- 🎯 **Clickable titles** below each image
- ⚡ **Lightweight** - 22KB smaller than Material-UI version
- 🔧 **Customizable** gap, columns, and dimensions
## 📦 Installation
```bash
pip install streamlit-image-gallery-enhanced
```
## 🎯 Quick Start
```python
import streamlit as st
from streamlit_image_gallery_enhanced import streamlit_image_gallery
# Define your images
images = [
{
"src": "https://images.unsplash.com/photo-1718439111428-f6ef86aae18d",
"title": "Beautiful Flowers"
},
{
"src": "https://images.unsplash.com/photo-1718554517666-2978ede88574",
"title": "Cute Bird"
},
# Add more images...
]
# Display gallery with click callback
clicked_index = streamlit_image_gallery(
images=images,
max_cols=3,
gap=10,
key="gallery"
)
# Handle clicks
if clicked_index is not None:
st.write(f"You clicked: {images[clicked_index]['title']}")
```
## 🎨 Advanced Usage
### Custom Styling
```python
streamlit_image_gallery(
images=images,
max_cols=4, # Maximum columns
max_rows=2, # Maximum rows
gap=15, # Gap between images
max_width=800, # Container max width
key="my_gallery" # Unique key for state
)
```
### Image Structure
```python
images = [
{
"src": "https://example.com/image.jpg", # Required: image URL
"title": "Image Title" # Required: image title
}
]
```
## ✨ What's New in Enhanced Version
### 🎨 Visual Improvements
- **Hover Effects**: Light blue background (`#f0f8ff`) on hover
- **Smooth Transitions**: 0.2s ease animations
- **Fixed Dimensions**: 150px height, 100% width with object-fit cover
- **Clean Titles**: Clickable text below images (no overlay)
### 🏗️ Technical Improvements
- **Pure HTML**: No Material-UI dependency (22KB smaller)
- **CSS Grid**: Modern responsive layout
- **React State**: Proper hover state management
- **Click Callbacks**: Returns image index to Python
### 🎯 Interactive Features
- **Both image and title clickable**
- **Index tracking** for click handling
- **Keyboard accessible**
- **Touch-friendly** for mobile
## 🔧 Component Structure
```html
<div style="display: grid; grid-template-columns: repeat(cols, 1fr);">
<div> <!-- Container with hover effects -->
<img style="height: 150px; width: 100%; object-fit: cover;" />
<p>Title Text</p>
</div>
</div>
```
## 📋 API Reference
### Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `images` | `List[Dict]` | **Required** | List of image dictionaries |
| `max_cols` | `int` | `2` | Maximum number of columns |
| `max_rows` | `int` | `2` | Maximum number of rows |
| `gap` | `int` | `10` | Gap between images (px) |
| `max_width` | `int` | `400` | Container max width (px) |
| `key` | `str` | `None` | Unique component key |
### Returns
- `int | None`: Index of clicked image (0-based), or `None` if no click
## 🎨 Styling Examples
### Large Gallery
```python
streamlit_image_gallery(
images=images,
max_cols=5,
max_rows=3,
gap=20,
max_width=1200
)
```
### Compact Gallery
```python
streamlit_image_gallery(
images=images,
max_cols=2,
gap=5,
max_width=300
)
```
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📄 License
MIT License - see LICENSE file for details.
## 🙏 Acknowledgments
Based on the original [streamlit-image-gallery](https://github.com/virtUOS/streamlit-image-gallery) by virtUOS, enhanced with modern features and improved UX.
Raw data
{
"_id": null,
"home_page": "https://github.com/motis10/streamlit-image-gallery-no-links",
"name": "streamlit-image-gallery-enhanced",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.7",
"maintainer_email": null,
"keywords": "streamlit, image, gallery, grid, component, hover, interactive",
"author": "motis10",
"author_email": "moti.stein@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/3b/9d/dff499144c1f4bb875ec518dee5f7a3a9ee68bd038fd8b412b0632dad812/streamlit_image_gallery_enhanced-1.0.1.tar.gz",
"platform": null,
"description": "# Streamlit Image Gallery Enhanced \ud83d\uddbc\ufe0f\u2728\n\n[](https://badge.fury.io/py/streamlit-image-gallery-enhanced)\n[](https://pypi.org/project/streamlit-image-gallery-enhanced/)\n\nAn enhanced Streamlit component for displaying images in a responsive grid with **hover effects**, **click callbacks**, and **modern HTML structure**.\n\n## \ud83d\ude80 Features\n\n- \u2728 **Hover effects** with smooth transitions\n- \ud83d\udc46 **Click callbacks** - get the index of clicked images\n- \ud83c\udfa8 **No Material-UI dependency** - pure HTML/CSS\n- \ud83d\udcf1 **Responsive grid layout** using CSS Grid\n- \ud83d\uddbc\ufe0f **Fixed image dimensions** with object-fit cover\n- \ud83c\udfaf **Clickable titles** below each image\n- \u26a1 **Lightweight** - 22KB smaller than Material-UI version\n- \ud83d\udd27 **Customizable** gap, columns, and dimensions\n\n## \ud83d\udce6 Installation\n\n```bash\npip install streamlit-image-gallery-enhanced\n```\n\n## \ud83c\udfaf Quick Start\n\n```python\nimport streamlit as st\nfrom streamlit_image_gallery_enhanced import streamlit_image_gallery\n\n# Define your images\nimages = [\n {\n \"src\": \"https://images.unsplash.com/photo-1718439111428-f6ef86aae18d\",\n \"title\": \"Beautiful Flowers\"\n },\n {\n \"src\": \"https://images.unsplash.com/photo-1718554517666-2978ede88574\", \n \"title\": \"Cute Bird\"\n },\n # Add more images...\n]\n\n# Display gallery with click callback\nclicked_index = streamlit_image_gallery(\n images=images,\n max_cols=3,\n gap=10,\n key=\"gallery\"\n)\n\n# Handle clicks\nif clicked_index is not None:\n st.write(f\"You clicked: {images[clicked_index]['title']}\")\n```\n\n## \ud83c\udfa8 Advanced Usage\n\n### Custom Styling\n```python\nstreamlit_image_gallery(\n images=images,\n max_cols=4, # Maximum columns\n max_rows=2, # Maximum rows \n gap=15, # Gap between images\n max_width=800, # Container max width\n key=\"my_gallery\" # Unique key for state\n)\n```\n\n### Image Structure\n```python\nimages = [\n {\n \"src\": \"https://example.com/image.jpg\", # Required: image URL\n \"title\": \"Image Title\" # Required: image title\n }\n]\n```\n\n## \u2728 What's New in Enhanced Version\n\n### \ud83c\udfa8 Visual Improvements\n- **Hover Effects**: Light blue background (`#f0f8ff`) on hover\n- **Smooth Transitions**: 0.2s ease animations \n- **Fixed Dimensions**: 150px height, 100% width with object-fit cover\n- **Clean Titles**: Clickable text below images (no overlay)\n\n### \ud83c\udfd7\ufe0f Technical Improvements \n- **Pure HTML**: No Material-UI dependency (22KB smaller)\n- **CSS Grid**: Modern responsive layout\n- **React State**: Proper hover state management\n- **Click Callbacks**: Returns image index to Python\n\n### \ud83c\udfaf Interactive Features\n- **Both image and title clickable**\n- **Index tracking** for click handling\n- **Keyboard accessible**\n- **Touch-friendly** for mobile\n\n## \ud83d\udd27 Component Structure\n\n```html\n<div style=\"display: grid; grid-template-columns: repeat(cols, 1fr);\">\n <div> <!-- Container with hover effects -->\n <img style=\"height: 150px; width: 100%; object-fit: cover;\" />\n <p>Title Text</p>\n </div>\n</div>\n```\n\n## \ud83d\udccb API Reference\n\n### Parameters\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `images` | `List[Dict]` | **Required** | List of image dictionaries |\n| `max_cols` | `int` | `2` | Maximum number of columns |\n| `max_rows` | `int` | `2` | Maximum number of rows |\n| `gap` | `int` | `10` | Gap between images (px) |\n| `max_width` | `int` | `400` | Container max width (px) |\n| `key` | `str` | `None` | Unique component key |\n\n### Returns\n\n- `int | None`: Index of clicked image (0-based), or `None` if no click\n\n## \ud83c\udfa8 Styling Examples\n\n### Large Gallery\n```python\nstreamlit_image_gallery(\n images=images,\n max_cols=5,\n max_rows=3, \n gap=20,\n max_width=1200\n)\n```\n\n### Compact Gallery\n```python\nstreamlit_image_gallery(\n images=images,\n max_cols=2,\n gap=5,\n max_width=300\n)\n```\n\n## \ud83e\udd1d Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## \ud83d\udcc4 License\n\nMIT License - see LICENSE file for details.\n\n## \ud83d\ude4f Acknowledgments\n\nBased on the original [streamlit-image-gallery](https://github.com/virtUOS/streamlit-image-gallery) by virtUOS, enhanced with modern features and improved UX.\n",
"bugtrack_url": null,
"license": null,
"summary": "Enhanced Streamlit component for displaying images in a responsive grid with hover effects and click callbacks",
"version": "1.0.1",
"project_urls": {
"Homepage": "https://github.com/motis10/streamlit-image-gallery-no-links"
},
"split_keywords": [
"streamlit",
" image",
" gallery",
" grid",
" component",
" hover",
" interactive"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "b4eb97b025a740d75a5bbe5892a87514bfb10a9b9050b447ae0ab97fc2bccf97",
"md5": "d42c4aa5ab6b2683bb66ea03b4964e0a",
"sha256": "55595f91cfa93d8ed39c55c69abf0b5059768f91d0f342ec56f8763354c368e1"
},
"downloads": -1,
"filename": "streamlit_image_gallery_enhanced-1.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "d42c4aa5ab6b2683bb66ea03b4964e0a",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.7",
"size": 429561,
"upload_time": "2025-07-23T21:24:27",
"upload_time_iso_8601": "2025-07-23T21:24:27.512566Z",
"url": "https://files.pythonhosted.org/packages/b4/eb/97b025a740d75a5bbe5892a87514bfb10a9b9050b447ae0ab97fc2bccf97/streamlit_image_gallery_enhanced-1.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "3b9ddff499144c1f4bb875ec518dee5f7a3a9ee68bd038fd8b412b0632dad812",
"md5": "2a9b3db4d674a870c291203199b85a31",
"sha256": "01cc59ef14159992dace0772e2b8ad8a11e34f0302eeedfd80690db813967ea4"
},
"downloads": -1,
"filename": "streamlit_image_gallery_enhanced-1.0.1.tar.gz",
"has_sig": false,
"md5_digest": "2a9b3db4d674a870c291203199b85a31",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.7",
"size": 428089,
"upload_time": "2025-07-23T21:24:29",
"upload_time_iso_8601": "2025-07-23T21:24:29.211915Z",
"url": "https://files.pythonhosted.org/packages/3b/9d/dff499144c1f4bb875ec518dee5f7a3a9ee68bd038fd8b412b0632dad812/streamlit_image_gallery_enhanced-1.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-07-23 21:24:29",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "motis10",
"github_project": "streamlit-image-gallery-no-links",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"requirements": [
{
"name": "streamlit",
"specs": [
[
"~=",
"1.35.0"
]
]
},
{
"name": "typing-extensions",
"specs": []
},
{
"name": "streamlit_image_gallery",
"specs": []
}
],
"lcname": "streamlit-image-gallery-enhanced"
}
JSON
