Create responsive image thumbnails with overlays, modals, and accessibility features using the JSON Layout API V2
Simple image thumbnails with hover overlays and action buttons. Perfect for image galleries and portfolio showcases.
const config = {
version: 2,
layoutId: "basic-thumbnails",
breakpoints: { xs: 1, sm: 2, md: 3 },
items: [
{
id: "thumb-1",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop",
header: "Mountain Vista",
description: "Breathtaking mountain scenery",
button1Text: "View",
button1Link: "/view/1"
}
},
{
id: "thumb-2",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop",
header: "Ocean Waves",
description: "Serene ocean view",
button1Text: "View",
button1Link: "/view/2"
}
},
{
id: "thumb-3",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop",
header: "Forest Path",
description: "Peaceful forest trail",
button1Text: "View",
button1Link: "/view/3"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo1-output', config);Click thumbnails to view enlarged images in a modal dialog. Perfect for photo galleries and product showcases.
const config = {
version: 2,
layoutId: "modal-thumbnails",
breakpoints: { xs: 1, sm: 2, md: 4 },
items: [
{
id: "modal-thumb-1",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop",
header: "Sunset Beach",
modal: true
}
},
{
id: "modal-thumb-2",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=600&h=400&fit=crop",
header: "City Lights",
modal: true
}
},
{
id: "modal-thumb-3",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=600&h=400&fit=crop",
header: "Desert Dunes",
modal: true
}
},
{
id: "modal-thumb-4",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=400&fit=crop",
header: "Snowy Peaks",
modal: true
}
}
]
};
RSL.JSONLayout.renderLayout('#demo2-output', config);Thumbnails with two action buttons in the overlay. Great for dashboards and content management systems.
const config = {
version: 2,
layoutId: "multi-button-thumbnails",
breakpoints: { xs: 1, sm: 2, md: 3 },
items: [
{
id: "multi-thumb-1",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=600&h=400&fit=crop",
header: "Product A",
description: "High-quality product with premium features",
button1Text: "View Details",
button1Link: "/products/a",
button2Text: "Add to Cart",
button2Link: "/cart/add/a"
}
},
{
id: "multi-thumb-2",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=600&h=400&fit=crop",
header: "Product B",
description: "Affordable option with great value",
button1Text: "View Details",
button1Link: "/products/b",
button2Text: "Add to Cart",
button2Link: "/cart/add/b"
}
},
{
id: "multi-thumb-3",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=600&h=400&fit=crop",
header: "Product C",
description: "Premium choice for professionals",
button1Text: "View Details",
button1Link: "/products/c",
button2Text: "Add to Cart",
button2Link: "/cart/add/c"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo3-output', config);Thumbnails with caption links for navigation. Perfect for blog posts, articles, and project portfolios.
const config = {
version: 2,
layoutId: "link-thumbnails",
breakpoints: { xs: 1, sm: 2, md: 3 },
items: [
{
id: "link-thumb-1",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop",
header: "Latest Article",
description: "Discover the latest trends in web development",
link: "/articles/latest",
linkText: "Read More",
showButtons: false
}
},
{
id: "link-thumb-2",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop",
header: "Design Guide",
description: "Learn best practices for modern UI design",
link: "/guides/design",
linkText: "View Guide",
showButtons: false
}
},
{
id: "link-thumb-3",
content: {
type: "thumbnail",
image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop",
header: "Tutorial Series",
description: "Step-by-step tutorials for beginners",
link: "/tutorials",
linkText: "Start Learning",
showButtons: false
}
}
]
};
RSL.JSONLayout.renderLayout('#demo4-output', config);