The advanced image block for Gutenberg allows you to change the aspect ratio of your image, as well as add a link to the image. The advanced image block for Gutenberg allows you to change the aspect ratio of your image, as well as add a link to the image.
1. How to add the Image Block? #
To add the Image Block Block in your Gutenberg editor first click on the (+) icon then in the search box type “Image Block” and you will see the “Image Block” block.
After inserting the “Image Block” block you will get the default look like below. Now you need to change the preset and other settings.
2. General Settings #
The General settings tab has the Preset option and counter settings number settings option. The General settings panel properties are as follows.
- Style: We pre-defined image styles like Rounded, Square, Circle etc.. you can select the style. Then set the image, image alignment, image width and height, image hover effect, and image overlay style. You can also enable image captions and image links.
3. Style Settings #
From the Styles settings tab, you can set all possible styles typography, color, padding, background, and other style settings.
- Border: Set normal and hover image border style and border-radius.
- Shadow: Set image shadow.
- Image Filter: Set image opacity and CSS style
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
