Accessible-first image gallery component with auto-generated ARIA labels
The Thumbnail component is a comprehensive, accessible-first solution for showcasing images with captions, overlays, buttons, and modal integration. Built with UX and accessibility at its core, it automatically generates ARIA labels and ALT tags from your content, eliminating the need for manual accessibility markup.
Auto-generates ARIA labels and ALT tags from captions, headers, and link text.
Full keyboard support with Tab, Enter, Space, and Escape keys.
Choose from 8 overlay colors and 3 opacity levels via data attributes.
Built-in modal integration for viewing enlarged images with captions.
Perfect integration with RSL's grid system for responsive layouts.
Automatic dark mode support that adapts to user preferences.
<!-- CSS -->
<link rel="stylesheet" href="styles/grid.css">
<link rel="stylesheet" href="styles/thumbnail.css">
<!-- Optional: Modal support -->
<link rel="stylesheet" href="styles/modal.css">
<!-- JavaScript -->
<script src="javascript/layout.js"></script>
<script src="javascript/thumbnail.js"></script>
<!-- Optional: Modal support -->
<script src="javascript/modal.js"></script><!-- JavaScript automatically generates ARIA labels and ALT tags -->
<div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
data-thumbnail-header="Modern Architecture"
data-thumbnail-description="Contemporary design with clean lines">
</div>| Attribute | Type | Default | Description |
|---|---|---|---|
data-thumbnail-image |
String | Required | Path to the thumbnail image |
data-thumbnail-image-alt |
String | Auto-generated | Manual override for ALT text (not recommended - let JS handle it) |
data-thumbnail-aspect |
String | 3:2 |
Image aspect ratio. Options: 1:1, 3:2, 4:3, 16:9, 21:9 |
data-thumbnail-lazy |
Boolean | false |
Enable lazy loading for image |
| Attribute | Type | Default | Description |
|---|---|---|---|
data-thumbnail-header |
String | '' | Main heading/title for the thumbnail |
data-thumbnail-description |
String | '' | Description text displayed below header |
| Attribute | Type | Default | Description |
|---|---|---|---|
data-thumbnail-link |
String | '' | URL for the thumbnail link |
data-thumbnail-link-text |
String | Learn More |
Text for the link button |
data-thumbnail-link-target |
String | _self |
Link target. Options: _self, _blank |
| Attribute | Type | Default | Description |
|---|---|---|---|
data-overlay-color |
String | dark |
Overlay color. Preset options: primary, secondary, success, danger, info, warning, dark, light. Also accepts custom colors: hex (#c9a96e), rgba (rgba(201, 169, 110, 0.9)), or any valid CSS color. |
data-overlay-opacity |
String | medium |
Overlay opacity on hover. Options: light (50%), medium (75%), heavy (95%) |
data-thumbnail-show-buttons |
Boolean | true |
Show overlay buttons on hover |
data-button-color |
String | #333 |
Custom button text/icon color. Accepts any CSS color value. |
data-button-bg-color |
String | rgba(255,255,255,0.95) |
Custom button background color. Accepts any CSS color value including transparent. |
data-button-hover-color |
String | inherits from button-color | Custom button text/icon color on hover. |
data-button-hover-bg-color |
String | #fff |
Custom button background color on hover. |
data-button-icon-color |
String | inherits from button-color | Custom icon color. Useful when you want the icon to be a different color than the text. |
data-button-icon-hover-color |
String | inherits from icon-color | Custom icon color on hover. |
| Attribute | Type | Default | Description |
|---|---|---|---|
data-thumbnail-button1-text |
String | '' | Text for first overlay button |
data-thumbnail-button1-action |
String | '' | Global function name to call when button clicked |
data-thumbnail-button1-link |
String | '' | Direct URL (makes button a link instead of action) |
data-thumbnail-button1-icon |
String | '' | FontAwesome icon class (e.g., fas fa-eye) |
data-thumbnail-button2-text |
String | '' | Text for second overlay button |
data-thumbnail-button2-action |
String | '' | Global function name to call when button clicked |
data-thumbnail-button2-link |
String | '' | Direct URL (makes button a link instead of action) |
data-thumbnail-button2-icon |
String | '' | FontAwesome icon class |
| Attribute | Type | Default | Description |
|---|---|---|---|
data-thumbnail-modal |
Boolean | false |
Enable modal for viewing larger image |
data-thumbnail-modal-header |
String | Uses data-thumbnail-header |
Modal title (defaults to thumbnail header) |
data-thumbnail-modal-description |
String | Uses data-thumbnail-description |
Modal description (defaults to thumbnail description) |
| Attribute | Type | Default | Description |
|---|---|---|---|
data-thumbnail-disabled |
Boolean | false |
Disable thumbnail interactions |
Thumbnails are automatically initialized on page load:
// Automatically runs on DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
RSL.Thumbnail.init();
});// Initialize all thumbnails
RSL.Thumbnail.init();
// Initialize a specific thumbnail
var element = document.querySelector('[data-thumbnail-image]');
var instance = RSL.Thumbnail.create(element);| Method | Parameters | Description |
|---|---|---|
init() |
None | Initialize all thumbnails on the page |
create(element) |
HTMLElement | Create a single thumbnail instance |
openModal(element) |
HTMLElement | Open modal for a specific thumbnail |
closeModal(modalId) |
String | Close a specific modal by ID |
destroy(element) |
HTMLElement | Remove thumbnail instance and cleanup |
getInstance(element) |
HTMLElement | Get thumbnail instance for an element |
Define global functions that will be called when buttons are clicked:
// Define custom action function
window.viewDetails = function(element, instance) {
console.log('View details for:', instance.config.header);
// Your custom logic here
};
// HTML: data-thumbnail-button1-action="viewDetails"The component intelligently generates ALT text for images following this priority:
data-thumbnail-image-altComprehensive ARIA labels are generated from your content, including:
| Key | Action |
|---|---|
Tab |
Navigate to thumbnail and buttons |
Enter or Space |
Activate thumbnail (open modal or navigate to link) |
Escape |
Close modal (if RSL Modal component is included) |
button, link)prefers-reduced-motionThe Thumbnail component works seamlessly with the RSL JSON Layout API. Components are automatically initialized when rendered through JSON configuration.
data-thumbnail-image attributes using the JSON API, thumbnails are automatically initialized without manual setup.
const config = {
version: 1,
layoutId: "thumbnail-gallery",
breakpoints: { xs: 1, sm: 2, md: 3 },
items: [
{
id: "thumb-1",
content: {
type: "html",
value: \`
<div data-thumbnail-image="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
data-thumbnail-header="Mountain Vista"
data-thumbnail-description="Breathtaking mountain scenery"
data-thumbnail-button1-text="View"
data-thumbnail-button1-link="/view/1">
</div>
\`
}
},
{
id: "thumb-2",
content: {
type: "html",
value: \`
<div data-thumbnail-image="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop"
data-thumbnail-header="Ocean Waves"
data-thumbnail-modal="true">
</div>
\`
}
}
]
};
// Thumbnails are auto-initialized!
RSL.JSONLayout.renderLayout('#container', config);| Method | Description |
|---|---|
RSL.Thumbnail.init() |
Initialize all thumbnails on the page |
RSL.Thumbnail.create(element) |
Create thumbnail instance for specific element |
RSL.Thumbnail.openModal(element) |
Open modal for thumbnail element |
RSL.Thumbnail.closeModal(modalId) |
Close specific modal by ID |
RSL.Thumbnail.destroy(element) |
Remove thumbnail instance |
See More: Browse all JSON API component examples →
For complete usage examples and demonstrations, visit: