Managing images in Flex block
In Flex block, you can add images, place them in an arbitrary place in the block and one above the other, align them on different sides of the block (behind the left and top edges, etc.), change the size and visible part of the image (position it), etc. This gives freedom in editing and allows you to realize many creative ideas.
Content:
Adding and editing an image
Batch image editing
Scale to fill mode (change image aspect ratio)
Scale to fit mode (preserve image aspect ratio)
Note: Learn how to add an "Image" element to a Flex block in this article.
After adding the “Image” element, hover over it and click on the “gear.” In the new window, click on Upload to add a file from your computer or on the Gallery button to search or generate other images:
Tip: If no image is selected yet, you can immediately open the media gallery by double clicking on the image element.
In a new window, you can select one of the already added images, find the desired image in the Free photos tab, or generate your own image using AI Visual:
Note: You can learn about default image settings in this article.
Hold down the ALT key and click on the image to see the distance to the edge of the block in pixels:
Tip: When you click on the added image, you will see its size in pixels below.
To move the image around the block space, hold it with the left mouse button and drag it in the required direction. As soon as the image approaches the center of the block in length or width, you will see the corresponding red linesю. They will come in handy if you need to place the image exactly in the center of the block (vertically and/or horizontally):
Note: If you hold down the "Shift" key and then start moving the image, it will only move horizontally or verticallyю. This is useful if you need to move the image only along 1 axis (X or Y), and on the other axis leaves the position of the image unchanged.
By clicking on the icon in the form of three dots, you will see a list of available actions with the image:
Tip: You can learn more about "Alignment" here and about "Arrange" - in this section of the article.
You can select several images with the mouse and move them as one element:
To check the distance in pixels from one image to another, select one of them and hover over the other.
Note: If you need to move one image by only a couple of pixels, then this can be easily done using the arrows on the keyboard. Each click on the arrow button moves the image in the corresponding direction by 1 pixel. If you hold down the "Shift" key simultaneously, the image will move 10 pixels each time you press the arrow on the keyboard.
The image can also be placed relative to each other along the top edge:
... along the bottom edge:
And also align the centers of the two images with each other:
Tip: You can also move images with the mouse and align them to the edge or center of other images. You will see an orange line when 2 images are aligned to one of their edges.
Note: The above alignment option is valid not only for images, but also for other elements in the Flex block.
By default, images are added to the Flex block with the fill mode (Scale to fill). When an image is scaled to fill, it means that the entire container is filled with the image, even if it requires cropping or stretching the image. The image's aspect ratio might not match the aspect ratio of the container, which can lead to parts of the image being cropped out or the image being stretched to fit the container entirely.
You can edit the image size by stretching or shrinking it in different directions:
It is also possible to adjust the positioning of the image, that is, which part of it will be visible and which part will be cropped. To do this, click on the Position button:
…and select the part of the image that should be displayed:
Click the left mouse button outside the photo to apply the changes.
Hint: You can also move to image positioning by double-clicking on the photo.
Note: You can individually change the positioning of the image for the display you need on all devices in the mobile version editor. This is especially useful if you have specified different dimensions or proportions of the image for mobile devices.
In scale to fill mode, you also have the option to zoom in and out to select the desired area to be displayed.
ㅤㅤㅤ1) To do this, click on the aforementioned Position button or double-click on the image.
ㅤㅤㅤ2) Then set the required image scale:
...and click outside of it to apply the changes.
ㅤㅤㅤ3) If necessary, you can select which image's area to display:
When an image is scaled to fit, it means that the entire image is resized proportionally to fit within a specific container while maintaining its aspect ratio. This ensures that no part of the image is cropped or cut off, but it might result in empty spaces (margins) within the container if the container's aspect ratio differs from that of the image. This approach is used to keep the entirety of the image visible.
To enable this mode, click on the gear icon:
Activate the Scale to fit switch:
This option allows you to resize an image while maintaining its aspect ratio:
Feel free to contact us anytime via chat or email (support@weblium.com). We will be glad to help!
Content:
Adding and editing an image
Batch image editing
Scale to fill mode (change image aspect ratio)
Scale to fit mode (preserve image aspect ratio)
Adding and editing an image
Note: Learn how to add an "Image" element to a Flex block in this article.
After adding the “Image” element, hover over it and click on the “gear.” In the new window, click on Upload to add a file from your computer or on the Gallery button to search or generate other images:
Tip: If no image is selected yet, you can immediately open the media gallery by double clicking on the image element.
In a new window, you can select one of the already added images, find the desired image in the Free photos tab, or generate your own image using AI Visual:
Note: You can learn about default image settings in this article.
Hold down the ALT key and click on the image to see the distance to the edge of the block in pixels:
Tip: When you click on the added image, you will see its size in pixels below.
To move the image around the block space, hold it with the left mouse button and drag it in the required direction. As soon as the image approaches the center of the block in length or width, you will see the corresponding red linesю. They will come in handy if you need to place the image exactly in the center of the block (vertically and/or horizontally):
Note: If you hold down the "Shift" key and then start moving the image, it will only move horizontally or verticallyю. This is useful if you need to move the image only along 1 axis (X or Y), and on the other axis leaves the position of the image unchanged.
By clicking on the icon in the form of three dots, you will see a list of available actions with the image:
Tip: You can learn more about "Alignment" here and about "Arrange" - in this section of the article.
Batch image editing
You can select several images with the mouse and move them as one element:
To check the distance in pixels from one image to another, select one of them and hover over the other.
Note: If you need to move one image by only a couple of pixels, then this can be easily done using the arrows on the keyboard. Each click on the arrow button moves the image in the corresponding direction by 1 pixel. If you hold down the "Shift" key simultaneously, the image will move 10 pixels each time you press the arrow on the keyboard.
The image can also be placed relative to each other along the top edge:
... along the bottom edge:
And also align the centers of the two images with each other:
Tip: You can also move images with the mouse and align them to the edge or center of other images. You will see an orange line when 2 images are aligned to one of their edges.
Note: The above alignment option is valid not only for images, but also for other elements in the Flex block.
Scale to fill mode (change image aspect ratio)
By default, images are added to the Flex block with the fill mode (Scale to fill). When an image is scaled to fill, it means that the entire container is filled with the image, even if it requires cropping or stretching the image. The image's aspect ratio might not match the aspect ratio of the container, which can lead to parts of the image being cropped out or the image being stretched to fit the container entirely.
You can edit the image size by stretching or shrinking it in different directions:
It is also possible to adjust the positioning of the image, that is, which part of it will be visible and which part will be cropped. To do this, click on the Position button:
…and select the part of the image that should be displayed:
Click the left mouse button outside the photo to apply the changes.
Hint: You can also move to image positioning by double-clicking on the photo.
Note: You can individually change the positioning of the image for the display you need on all devices in the mobile version editor. This is especially useful if you have specified different dimensions or proportions of the image for mobile devices.
In scale to fill mode, you also have the option to zoom in and out to select the desired area to be displayed.
ㅤㅤㅤ1) To do this, click on the aforementioned Position button or double-click on the image.
ㅤㅤㅤ2) Then set the required image scale:
...and click outside of it to apply the changes.
ㅤㅤㅤ3) If necessary, you can select which image's area to display:
Scale to fit mode (preserve image aspect ratio)
When an image is scaled to fit, it means that the entire image is resized proportionally to fit within a specific container while maintaining its aspect ratio. This ensures that no part of the image is cropped or cut off, but it might result in empty spaces (margins) within the container if the container's aspect ratio differs from that of the image. This approach is used to keep the entirety of the image visible.
To enable this mode, click on the gear icon:
Activate the Scale to fit switch:
This option allows you to resize an image while maintaining its aspect ratio:
Feel free to contact us anytime via chat or email (support@weblium.com). We will be glad to help!
Updated on: 01/31/2024
Thank you!