Foxiz theme support featured image size option and custom ratio option within each block. Those options allow you to adjust the size and ratio to fit specific layouts, ensuring seamless image alignment with the design without cropping.
The important thing is that you have to upload featured image sizes with the same dimensions and aspect ratios. This will ensure consistent imagery across layouts, and any changes to the settings will also be synchronized as desired.
To get started, follow the steps below:
- Create your custom image crop sizes. Click on this link to see the guide: How to Create Image Crop Sizes?
- Run regenerate thumbnails to create thumbnails for existing images.
- Navigate to Pages > All Pages.
- Select a page you would like to edit, and click on the “Edit with Elementor” link.
- Navigate to the Live Editor and select a block you would like to edit
- In the settings panel for Block in this template, navigate to Style > Featured Image
- Featured Image Size: This option allows you to display the default size of the thumbnails as well as any custom sizes created in the Theme Options. You can then select a featured image size to optimize it.
- Custom Featured Ratio: This option allows you to input a ratio that matches the assigned block size to ensure that the image is displayed fully without any cropping. Please input the custom ratio percent (height*100/width) for the featured image you prefer, for instance, 60.
- Hover Effect: Choose a visual effect that will be activated when you hover over the images in this block.
- Align: Align the featured images in this block to suit your preference.
- Lazy Load: Disable lazy load image if this block is above the fold. The default is base on Theme Options > Performance > Featured Image – Lazy Load
How to Create Image Crop Sizes?
How Are Featured Images Cropped?
Assigning Image Sizes for Blog Layouts
Set Featured Image
