The Featured Image Block displays the featured image of the current post or page with extensive customization options. This Pro block is perfect for custom single post templates that you can create with our Site Builder feature from our DigiFusion theme and its Pro version. The block automatically pulls the featured image from WordPress and presents it with customizable styling, cropping, and layout options.
Adding the Featured Image Block
Navigate to the post or page where you want to display the featured image. Click the block inserter (+) and search for “Featured Image” in the DigiBlocks Theme category. The block will be added with a placeholder image that shows how the featured image will appear on the frontend.
Image Configuration
Image Size Settings
Control how the featured image is displayed using the image configuration options:
Image Size – Choose from predefined WordPress image sizes or select custom sizing:
- Thumbnail – Small square images typically 150×150 pixels
- Medium – Medium-sized images usually 300×300 pixels
- Large – Larger images commonly 1024×1024 pixels
- Full – Original uploaded image size
- Custom – Use custom dimensions based on other settings
Enable Image Cropping – Toggle to crop images to maintain consistent dimensions across different posts. When enabled, images will be cropped to fit the specified aspect ratio rather than being resized proportionally.
Aspect Ratio Control
When image cropping is enabled, choose from several aspect ratio options:
- Default – Uses the natural image proportions
- 1:1 – Perfect square format for profile images or social media
- 4:3 – Traditional photo format, great for landscapes
- 16:9 – Widescreen format ideal for hero images
- 3:2 – Classic 35mm photo ratio
- Custom – Set a specific pixel height for unique proportions
For custom aspect ratios, use the Custom Height control to set the exact height in pixels, with responsive controls for different screen sizes.
Display Options
Display Caption – Show the image caption below the featured image if one has been added to the media file in WordPress. The caption appears as centered text beneath the image.
Link to Post – Make the featured image clickable, linking to the full post content. This is particularly useful for archive pages or when the block is used in custom post listings.
Layout and Alignment
Alignment Controls
Position the featured image within its container using responsive alignment options:
- Left – Aligns the image to the left side of the container
- Center – Centers the image horizontally
- Right – Aligns the image to the right side of the container
Width Settings
Control the image width as a percentage of its container. Set different widths for desktop, tablet, and mobile devices to ensure optimal display across all screen sizes. Width ranges from 10% to 100% of the container.
Visual Styling
Border and Radius
Enhance the image appearance with border and corner radius options:
Border Style – Choose from none, solid, dashed, dotted, or double border styles. When a border style is selected, additional controls become available for customization.
Border Color – Set the border color with full color picker support including alpha transparency.
Border Width – Control border thickness for each side independently (top, right, bottom, left) with responsive settings for different devices.
Border Radius – Round the corners of the image. Use the four-corner control to set different radius values for each corner, or link them together for uniform rounding. Supports both pixel and percentage units.
Box Shadow Effects
Add depth and visual interest with customizable shadow effects:
Normal State Shadow – Configure the default shadow appearance with controls for:
- Horizontal and vertical offset positioning
- Blur radius for shadow softness
- Spread radius for shadow size
- Shadow color with opacity control
- Inset option for inner shadows
Hover State Shadow – Set different shadow properties that activate when users hover over the image, creating interactive visual feedback.
Spacing Controls
Fine-tune the spacing around and within the image block:
Padding – Internal spacing between the image and its container borders. Set different padding values for each side with responsive controls.
Margin – External spacing around the entire image block. Control margins independently for top, right, bottom, and left sides across different device sizes.
Advanced Features
Animation Effects
Add entrance animations to make the featured image more engaging when it comes into view during page scrolling. Choose from various animation options including fade, slide, zoom, and bounce effects.
Use the Preview Animation button to test the selected animation in the editor before publishing changes.
Visibility Controls
Control when the featured image appears based on screen size:
- Hide on Desktop – Prevents the block from displaying on desktop devices (992px and wider)
- Hide on Tablet – Hides the block on tablet devices (768px to 991px)
- Hide on Mobile – Conceals the block on mobile devices (767px and smaller)
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Additional Settings
HTML Anchor – Create a unique anchor ID for the block that enables direct linking to this specific section of the page. Enter a word or phrase without spaces to generate a linkable anchor.
Additional CSS Classes – Add custom CSS classes for advanced styling or integration with theme-specific styles. Separate multiple classes with spaces.
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. Adjust image dimensions, spacing, borders, and alignment independently for each screen size to ensure optimal display across all devices.
Template Usage
This block is particularly valuable when creating custom single post templates with the DigiFusion theme’s Site Builder feature. Use it to consistently display featured images across different post types while maintaining design coherence with your overall site aesthetic.
The block serves as a dynamic placeholder in the editor, with actual featured images populated automatically from each post’s media library on the frontend.