Available for: All project plans
Box Mode vs. Img Mode
In Studio, image boxes come with two distinct modes: "Box mode" and "Img mode". These modes differ in how they handle images and the features available for each. You can easily switch between them using the toggle in the upper right corner of the box. Let's dive into when and how to use each mode.
Box Mode: Utilizing Images as Backgrounds
Box mode treats your image as a background. This mode is ideal when you want to use an image as a backdrop or apply effects to it.
Key Features:
Allows application of filter effects
Enables adding other elements as child elements
Doesn't recognize the image's inherent size
Cannot maintain aspect ratio
How to Use:
Select the image box
Switch the toggle to [Box]
Adjust brightness, contrast, etc. in the [Image] tab
Img Mode: Handling Images as Standalone Elements
Img mode treats your image as an independent element. This mode is perfect when you need to maintain the image's aspect ratio or want to set alt attributes for accessibility.
Key Features:
Recognizes the image's aspect ratio
Can maintain proportions with "auto" setting
Cannot apply filter effects
Cannot add child elements
Allows setting of alt attributes (alternative text)
How to Use:
Select the image box
Switch the toggle to [Img]
Set alt text in the right-side panel
Tips for Choosing the Right Mode
Use Box mode when:
You need a background image
You want to apply effects to the image
Use Img mode when:
You need to maintain the image's aspect ratio
You want to set alt attributes
By selecting the appropriate mode for your needs, you can use images more effectively in your designs. Remember, the right choice depends on your specific design goals and the role the image plays in your layout. Experiment with both modes to see which works best for each situation in your project.
image picture