The Image options allow you to customize the appearance of featured images. These settings let you adjust borders, shadows, filters, and more to ensure your images align with your site’s design.
Where to Find the Image Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Image option group.
Image Options Overview
Sizing: It allows you to choose the size of the image.
Border: It allows you to define the border radius and border styles of the image.
Rounded Corners: Set a numerical value to round the image's corners.
Linked Values: All corners have the same radius by default.
Unlinked Values: Click the chainlink icon to set different values for each corner.
Border Width: Set the border thickness (minimum
1px).Border Color: Choose a border color from the palette or use the color picker.
Border Style: Select a style, such as solid, dashed, dotted, double, groove, ridge, inset, outset, or none.
Box Shadow: Apply a shadow around the image. Customize:
Horizontal Position: Move the shadow left or right.
Vertical Position: Move the shadow up or down.
Blur Strength: Increase to soften the shadow.
Spread Strength: Expand or contract the shadow.
Shadow Color: Pick a custom shadow color.
Box Shadow Position: Choose an inner or outer shadow.
Framing: Useful whenever you want an image’s rendered size to differ from its intrinsic size. That’s common when changing aspect ratio explicitly, but also when an image has a variable aspect ratio, such as when growing to fill its parent container.
Filters: It allows you to customize the CSS Filters applied to the Image.
Hue: Adjust the image's color tone.
Saturation: Control the vibrancy of colors.
Brightness: Make the image lighter or darker.
Contrast: Enhance the difference between light and dark areas.
Invert: Reverse the colors of the image.
Sepia: Add a vintage yellow-brown tone.
Opacity: Adjust the transparency of the image.
Blur: Apply a Gaussian blur for a soft-focus effect.
Blend Mode: Define how the image blends with the layers below. Options include normal (default), multiply, screen, overlay, and more.
⚠︎ Note: The Image option group supports Composable Settings, which allows you to add and use options groups such as Background, Spacing, and more.
Tips for Using Image Options
Add Depth: Use Box Shadow and Blur to make images visually engaging.
Align with Branding: Customize Hue and Saturation to match your site’s color palette.
Create Emphasis: Use bold Borders or unique Blend Modes for standout content.
Optimize Responsiveness: Preview changes across devices to ensure the featured images look great everywhere.