Responsive images with utility classes via JSON API V2
Images that scale to fit their container width while maintaining aspect ratio.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "responsive-images",
breakpoints: { xs: 1, md: 3 },
gap: "1.5rem",
items: [
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop",
alt: "Sample Image 1",
// responsive: true is default
caption: "100% Container Width"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop",
alt: "Sample Image 2",
caption: "Scales Automatically"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop",
alt: "Sample Image 3",
caption: "Maintains Aspect Ratio"
}
}
]
});Add rounded corners or make images completely circular for profile pictures and avatars.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "image-shapes",
breakpoints: { xs: 2, md: 4 },
gap: "1.5rem",
items: [
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop",
alt: "Default Square",
maxWidth: "200",
caption: "Default (Square)"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop",
alt: "Rounded Small",
maxWidth: "200",
shape: "rounded-sm",
caption: "Rounded Small"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop",
alt: "Rounded",
maxWidth: "200",
shape: "rounded",
caption: "Rounded"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=600&h=400&fit=crop",
alt: "Circle",
maxWidth: "200",
shape: "circle",
caption: "Circle"
}
}
]
});Add visual depth and definition to images with borders and shadow effects.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "image-effects",
breakpoints: { xs: 1, md: 4 },
gap: "1.5rem",
items: [
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=400&fit=crop",
alt: "No Effects",
maxWidth: "200",
shape: "rounded",
caption: "No Effects"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=400&fit=crop",
alt: "With Border",
maxWidth: "200",
shape: "rounded",
bordered: true,
caption: "With Border"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=400&fit=crop",
alt: "With Shadow",
maxWidth: "200",
shape: "rounded",
shadow: "shadow",
caption: "With Shadow"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=600&h=400&fit=crop",
alt: "Combined",
maxWidth: "200",
shape: "rounded",
bordered: true,
shadow: "shadow-lg",
caption: "Border + Shadow"
}
}
]
});Force images into specific aspect ratios for consistent sizing in galleries and grids.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "image-aspect-ratios",
breakpoints: { xs: 1, md: 3 },
gap: "1.5rem",
items: [
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=600&h=400&fit=crop",
alt: "Square Aspect",
fullWidth: true,
aspectRatio: "square",
shape: "rounded",
caption: "Square (1:1)"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=600&h=400&fit=crop",
alt: "Video Aspect",
fullWidth: true,
aspectRatio: "video",
shape: "rounded",
caption: "Video (16:9)"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1505765050516-f72dcac9c60e?w=600&h=400&fit=crop",
alt: "Portrait Aspect",
fullWidth: true,
aspectRatio: "portrait",
shape: "rounded",
caption: "Portrait (3:4)"
}
}
]
});Apply grayscale filter that becomes full color on hover - great for team pages and galleries.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "image-grayscale",
breakpoints: { xs: 2, md: 4 },
gap: "1.5rem",
items: [
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop",
alt: "Team Member 1",
maxWidth: "200",
grayscale: true,
shape: "rounded",
caption: "Hover for Color"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop",
alt: "Team Member 2",
maxWidth: "200",
grayscale: true,
shape: "circle",
caption: "Hover for Color"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop",
alt: "Team Member 3",
maxWidth: "200",
grayscale: true,
shape: "rounded",
shadow: "shadow",
caption: "Hover for Color"
}
},
{
content: {
type: "image",
src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop",
alt: "Team Member 4",
maxWidth: "200",
grayscale: true,
shape: "rounded",
bordered: true,
caption: "Hover for Color"
}
}
]
});Combine multiple image options to create a cohesive gallery layout.
RSL.JSONLayout.renderLayout('#container', {
version: 2,
layoutId: "image-gallery",
breakpoints: { xs: 2, sm: 3, md: 4, lg: 6 },
gap: "1rem",
items: [
{ content: { type: "image", src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop", alt: "Gallery 1", fullWidth: true, aspectRatio: "square", shape: "rounded-sm", shadow: "shadow" } },
{ content: { type: "image", src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop", alt: "Gallery 2", fullWidth: true, aspectRatio: "square", shape: "rounded-sm", shadow: "shadow" } },
{ content: { type: "image", src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop", alt: "Gallery 3", fullWidth: true, aspectRatio: "square", shape: "rounded-sm", shadow: "shadow" } },
{ content: { type: "image", src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop", alt: "Gallery 4", fullWidth: true, aspectRatio: "square", shape: "rounded-sm", shadow: "shadow" } },
{ content: { type: "image", src: "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=600&h=400&fit=crop", alt: "Gallery 5", fullWidth: true, aspectRatio: "square", shape: "rounded-sm", shadow: "shadow" } },
{ content: { type: "image", src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=600&h=400&fit=crop", alt: "Gallery 6", fullWidth: true, aspectRatio: "square", shape: "rounded-sm", shadow: "shadow" } }
]
});Complete reference for image configuration options.
// Image Content Type Configuration
{
type: "image",
// REQUIRED
src: "path/to/image.jpg", // Image source URL
alt: "Description for a11y", // Alt text (use "" for decorative)
// SIZE OPTIONS
responsive: true, // Auto-scale to container (default)
maxWidth: "200", // "100", "200", "300", "400", "500" (px)
minWidth: "100", // "100", "200", "300" (px)
thumbnail: false, // 150px max width
fullWidth: false, // Force 100% width
// SHAPE OPTIONS
shape: "rounded", // "rounded-sm", "rounded", "rounded-lg", "circle"
// STYLING OPTIONS
bordered: false, // Add border with padding
borderedThick: false, // Add thick border
shadow: "shadow", // "shadow", "shadow-lg"
center: false, // Center horizontally
grayscale: false, // Grayscale (color on hover)
// ASPECT RATIO
aspectRatio: "square", // "square", "video", "portrait"
objectFit: "cover", // "cover", "contain"
// PERFORMANCE
loading: "lazy", // "lazy" or "eager"
// CAPTION
caption: "Optional caption", // Adds figcaption
// ADVANCED
classes: ["custom-class"], // Additional CSS classes
style: { border: "2px solid red" }, // Inline styles
onClick: (e, img) => {} // Click handler
}