Editing Image Properties
This article applies to the Email and Pages builder in all plans.
Overview
Content Properties enable you to customize your content within the builder. Each content block you add to your design includes a set of options that you can customize. This allows you to have control over how your content looks and interacts with your overall design.
Image Content Properties
In this section, we will discuss how Content Properties functions for the Image Content Block.
When you insert an image or click on an image already present in the design, the Content Properties area of the builder will display customizable settings in the panel on the right-hand side of the screen. You can edit these image settings based on your design needs.
In the following GIF, the example displays a user adjusting the width of their image within the builder. They do this by toggling off Auto width and using the slider to experiment with the image width to find the perfect size.
Settings
The following list outlines the available Content Properties for an Image Content Block:
- Auto-width: If the image size is bigger than the box, this option is enabled automatically. You can switch it off if you want to resize it. Toggle this setting ON and OFF to automatically fill (ON) or not (OFF) the content area of the image.
- Align: Use this to change the positioning of the image. You can align the image to the text.
- Dynamic image: Toggle this setting ON or OFF to indicate whether your image is dynamic. Learn more about dynamic images.
- Appy effects: Click on this button to load an image editing tool that allows you to resize the image, apply visual effects, and much more.
- Change image: Click on this button to open the File manager, where you can replace the image with a new one.
- URL: Specifies where the image is saved. You can also paste an external URL to load an image.
- Alternate text: Enter the text that should be displayed when images are turned off. This is a best practice in email design since there are still email clients that have images turned off by default. Adding alternate text also makes your images more accessible. You can use AI within Beefree to write your alternate for you.
- Image rounded corners: Use this option to round the corners of an image you selected within the builder. You have the option to customize how you round each corner of the image.
AI Alt Text
You can use AI to automatically write alternate text for your image type content blocks.
AI is available to generate alternate text for the following content blocks:
- Images
- GIFs
- Icons
- Stickers
Before you generate alternate text for an image using AI, ensure it meets the following requirements:
- The image must be in JPEG, PNG, GIF, BMP, WEBP, ICO, TIFF, or MPO format.
- The file size of the image must be less than 20 megabytes (MB).
- The dimensions of the image must be greater than 50 x 50 pixels and less than 16,000 x 16,000 pixels.
Note: If the image does not meet these specifications, you will receive an error when you attempt to use AI to write alternate text for an image.
Based on how many image type content blocks you have in your design, you can use AI to write your alternate text for a single image, or for multiple.
Take the following steps to use AI to write your alternate text for a single image content block:
- Enter your design’s builder
- Click on the image you would like to add alternate text to
- Navigate to Content Properties on the right-hand side of the screen
- Navigate to the Alt text field
- Click the wand icon
A drop-down menu will appear
- Click Generate alt-text
Alternate text describing the image will appear within the previously blank Alt text field
To use AI to write your alternate text for multiple images within your design, change step six from the previous section. Instead of clicking Generate alt-text, click Generate alt-text in bulk. Now, when you navigate to the Content Properties of another image within your design, you will notice that it has alternate text filled in.
Note: AI can only create alternate text in English.
Image rounded corners
The Image rounded corners image property allows you to round the corners of any image you select within the builder.
Take the following steps to use this image property:
- Enter your design within the Beefree App
- Select an image within the builder
- Navigate to the image properties located on the right-hand side of the screen
- Navigate to the Image rounded corners property
- If you'd like to round each corner of your image equally, click the plus (+) symbol below All corners to round all four corners simultaneously
- If you'd like to round each corner separately, toggle on More options
- Click the plus (+) symbol to round each corner individually
Note: Rounded image corners do not render with Outlook. The fallback for Outlook emails is squared corners.
Action
The Action section of Content Properties enables you to link the image to a URL, to a new email in an email client, or to a telephone number for making a call or sending a text message. You can also link the image to a file that you previously uploaded through the builder’s file manager.
The following options are available in the Image link drop-down:
- Open web page
- Send email
- Make call
- Send SMS
Block Options
Block options allow you to customize the padding and visibility of the image. For the padding, you can adjust All sides proportionally, or opt to adjust the padding for each side of the image individually.
You can opt to hide your content on Desktop or Mobile using the visibility block option.
If you have any questions, feel free to contact us.
Comments
12 comments
Hi there- when I upload a file from my computer into the file manager. Then use that file in my message, it will display as normal when editing. However, when I save and get the HTML doc, the image doesn't render. Any idea what might be going on?
Hi Kindra, notice that when you download the message it's a zip file that contains the HTML file and an image folder. You need to import or link those images to the HTML file depending on whether you've opened the HTML file in a program like Dreamweaver or imported the HTML file into your emailing software. We explain this in more detail on https://support.beefree.io/hc/en-us/articles/360004496232-How-to-use-external-images-in-your-message. Hope this clarifies things!
Hi, Is it possible to add custom functions along with existing toolbar like Copy, Copy from Word etc. ?
Hi Saranya, unfortunately this is not possible at this time.
Hi Massimo,
Thanks for your reply. We are just plan to get Bee free silver plan. But we need some more functionalities like conditional block.
The conditional block means that text in the email content will display based on condition such as if the email id starts with 'aa', then display some content else don't display.
E.g.: [[IF ([!Email!] IS 'aa')]]everywhere [[ELSE]] [[END IF]].
1. If we are giving this as a change request to you after get the paid plan, is it possible for you to do it?
2. If yes, then ETA please???
3. And also we have some set of feature need to implement to the existing behaviour.
Is it possible for a paid user to add any custom function to Merge Tags, etc..
4. Is each change request is payable?
5. Also, is it possible to create custom template in HTML??
Hi Saranya, please contact us to discuss. Conditional statements is a feature that we are working on "as we speak", so you are catching us at a good time. With regard to everything else, let's discuss. https://beefree.io/contact-us/
Hi there, are you able to resize image containers less than the default 120px?
Hi there, thank you for your comment. Unfortunately, it is not possible to resize the image containers under 120 pixels. You can customize more your message by inserting an HTML block -using your own code may affect how the message is rendered. Make sure to use correct and responsive HTML.
Is there a way we can either add html code before our export or within the image setting that will add right click protection. It's extremely necessary for what I'm using the templates for.
Hello Ashanti. We are sorry but it's not possible to add HTML code before exporting the message with those options.
Hello. The animation on this page shows a tooltip containing image width in pixels when adjusting image width manually. That does not seem to appear in email editor. Is that feature gone or is it possible to enable it somehow? Are there other ways to display dimensions of image as in what size are they going to appear in email?
Hello Ville, and thank you for your comment.
This is in fact incorrect behaviour and it seems like a regression.
Our developers are working on a fix to make sure the tooltip shows.
Please sign in to leave a comment.