Image Block

The Image Block is a powerful and versatile component that enhances WordPress’s standard image functionality with advanced features, extensive customization options, and integrated image search capabilities. This block offers professional-grade styling controls, responsive design options, and seamless integration with popular stock photo providers to streamline your content creation workflow.

Key Features

The Image Block includes a comprehensive set of features designed to meet all your image display needs:

Enhanced Image Management: Upload from your media library or search and download directly from stock photo providers
Image Search Integration: Built-in search for Unsplash, Pexels, and Pixabay with one-click downloading
Advanced Styling Controls: Comprehensive border, shadow, spacing, and visual effects options
Responsive Design: Device-specific controls for optimal display across all screen sizes
Interactive Effects: Multiple hover effects including zoom, blur, grayscale, and rotation
Overlay System: Customizable overlays with normal and hover-only display options
Link Integration: Complete link control with new tab and rel attribute options
Animation Effects: Choose from various entrance animations with preview functionality
Dimension Controls: Precise width and height controls with multiple unit options
Object Fit Options: Control how images resize within their containers
Visibility Controls: Hide blocks on specific devices when needed

Adding the Image Block

To add an Image Block to your page:

1. Click the “+” icon to open the block inserter
2. Search for “Image” or navigate to the “DigiBlocks” category
3. Click on the “Image” block to add it to your page
4. The block will appear with upload options and image search capabilities

Image Management

Uploading Images

From Media Library: Click the “Select Image” button to choose from your existing media library. You can upload new images directly through the media library interface if needed.

Image Search Feature: If configured in settings, click “Search Images” to access stock photo providers:

• Unsplash: High-quality photography with 50 requests per hour on free tier
• Pexels: Professional stock photos with 200 requests per hour limit
• Pixabay: Diverse image collection with 5,000 requests per hour allowance

Image Search Functionality

The integrated image search provides a streamlined workflow for finding and using stock photos:

Search Interface:

• Type your search term in the search field
• Results appear automatically as you type (with debounced search)
• Grid layout displays thumbnail previews with author attribution

Image Selection:

• Hover over images to see title, author, and “Use Image” button
• Click any image or the button to download and insert automatically
• Images are properly attributed and optimized for your site

Search Management:

• Load more results with pagination support
• Real-time search status indicators
• Proper error handling for API issues

Image Properties

Alt Text: Essential for accessibility and SEO, describing the image content for screen readers and search engines

Title: Optional tooltip text that appears when users hover over the image

Image Size: Choose from Thumbnail, Medium, Large, or Full Size to balance quality and performance

Layout and Dimensions

Size Controls

Width Settings:

• Responsive controls for desktop, tablet, and mobile
• Units: pixels (px), percentage (%), or viewport width (vw)
• Range from 1 to 1000px or 1 to 100% depending on unit

Height Settings:

• Independent height control with responsive breakpoints
• Units: pixels (px), percentage (%), or viewport height (vh)
• Auto height option maintains aspect ratio

Object Fit Options:

• Cover: Scales image to cover entire container, may crop edges
• Contain: Scales image to fit completely within container
• Fill: Stretches image to fill container exactly, may distort
• None: Displays image at natural size

Alignment Options

Control image alignment within its container:

• Left: Aligns image to the left side
• Center: Centers the image horizontally (default)
• Right: Aligns image to the right side

Alignment affects both the image position and the overall block layout.

Styling Options

Spacing Controls

Padding: Internal spacing within the image container

• Responsive controls for each device type
• Individual control for top, right, bottom, and left sides
• Supports pixel and percentage units

Margin: External spacing around the image block

• Responsive breakpoint controls
• Separate values for all four sides
• Default bottom margin of 30px for proper content separation

Border Styling

Border Style Options:

• None, Solid, Dotted, Dashed, Double, Groove, Inset, Outset, Ridge

Border Configuration:

• Width: Responsive control for each side independently
• Color: Normal and hover state colors with alpha transparency
• Radius: Rounded corners with responsive controls, supports pixels and percentages

State Management:

• Normal state for default appearance
• Hover state for interactive color changes
• Smooth transitions between states

Box Shadow Effects

Normal Shadow: Default shadow styling for depth and visual interest

Hover Shadow: Alternative shadow on hover for interactive feedback

Shadow Properties:

• Position: Inset or outset shadows
• Horizontal and vertical offset controls
• Blur radius for shadow softness
• Spread radius for shadow size
• Color selection with alpha transparency

Visual Effects

Hover Effects:

• Zoom In: Scales image to 110% on hover
• Zoom Out: Starts at 110% scale, returns to normal on hover
• Grayscale to Color: Begins with 100% grayscale, reveals color on hover
• Blur to Clear: Starts with 5px blur, clears on hover
• Rotate: Applies 5-degree rotation on hover
• Glow: Increases brightness to 110% on hover

Overlay System:

• Enable Overlay: Toggles overlay functionality
• Overlay Color: Customizable background with alpha transparency
• Hover-Only Mode: Shows overlay only when hovering
• Smooth Transitions: CSS animations for professional appearance

Link Integration

Link Controls

The Image Block includes comprehensive linking capabilities:

URL Input: Standard link control with search functionality for internal pages

Link Settings:

• Open in New Tab: Controls target=”_blank” attribute
• Add noopener noreferrer: Security attributes for external links
• Rel Attribute: Custom relationship values

Link Removal: Easy one-click link removal option

Visual Feedback: Linked images maintain all styling and effects while providing proper link functionality

Advanced Features

Animation Effects

Available Animations:

• Fade Effects: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
• Slide Effects: slideInUp, slideInDown, slideInLeft, slideInRight
• Zoom Effects: zoomIn, zoomInUp, zoomInDown
• Bounce Effects: bounceIn, bounceInUp, bounceInDown
• Rotation Effects: rotateIn, rotateInDownLeft, rotateInDownRight

Animation Controls:

• Preview button to test animations in the editor
• Automatic preview when changing animation settings
• Smooth CSS transitions for professional appearance

Responsive Controls

All styling options include device-specific controls:

Breakpoints:

• Desktop: 992px and above
• Tablet: 768px to 991px
• Mobile: 767px and below

Responsive Features:

• Independent sizing for each device
• Device-specific spacing controls
• Responsive border and shadow settings
• Optimized display across all screen sizes

Visibility Controls

Device-Specific Hiding:

• Hide on Desktop: Conceals block on desktop screens
• Hide on Tablet: Hides block on tablet devices
• Hide on Mobile: Removes block from mobile displays

Editor Behavior: Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.

Image API Configuration

Setting Up Image Search

To enable image search functionality, configure API providers in DigiBlocks Settings:

Unsplash Setup:

1. Visit Unsplash Developers
2. Create a new application
3. Copy Application ID and Access Key to settings
4. Secret Key is optional for basic functionality

Pexels Configuration:

1. Go to Pexels API
2. Sign up for a free account
3. Generate API key in your dashboard
4. Add key to DigiBlocks settings

Pixabay Integration:

1. Visit Pixabay API Documentation
2. Create account and verify email
3. Find API key in your account settings
4. Configure in DigiBlocks settings

Performance Optimization

Image Size Selection

Choosing Appropriate Sizes:

• Thumbnail: Small images, icons, or previews
• Medium: Content images in sidebars or smaller containers
• Large: Main content images and featured visuals
• Full Size: Hero images or when maximum quality is required

Loading Optimization

Built-in Optimizations:

• Lazy loading for images below the fold
• Automatic image compression through WordPress
• Responsive image srcset generation
• Efficient asset loading only when blocks are used

API Rate Limits

Provider Limits:

• Unsplash: 50 requests/hour (free tier)
• Pexels: 200 requests/hour (free tier)
• Pixabay: 5,000 requests/hour (free tier)

Best Practices:

• Search efficiently with specific terms
• Download and reuse images rather than searching repeatedly
• Consider upgrading API plans for high-volume usage

Best Practices

Content Strategy

Image Selection:

• Choose high-quality images that support your content
• Ensure images are relevant to surrounding text
• Maintain consistent style and quality across your site
• Consider your audience and brand guidelines

SEO Optimization:

• Always include descriptive alt text
• Use relevant filenames before uploading
• Optimize image sizes for faster loading
• Include images in your sitemap

Design Considerations

Visual Hierarchy:

• Use appropriate sizing to create focal points
• Maintain consistent spacing throughout your content
• Consider how images work with your overall layout
• Test responsive behavior across devices

Performance Balance:

• Choose appropriate image sizes for each use case
• Compress images without sacrificing quality
• Use modern image formats when possible
• Monitor page load times regularly

Accessibility Guidelines

Screen Reader Support:

• Write descriptive, meaningful alt text
• Avoid redundant phrases like “image of” or “picture of”
• Include important text that appears in images
• Leave alt text empty for purely decorative images

User Experience:

• Ensure images enhance rather than distract from content
• Provide sufficient contrast for any text overlays
• Test hover effects for usability
• Consider users with motion sensitivity when using animations

The Image Block provides a comprehensive solution for displaying images with professional styling, advanced search capabilities, and responsive design features that enhance both the editing experience and frontend presentation while maintaining optimal performance and accessibility standards.