Editing Image Properties
Beefree App is now RGE Studio!
The email design suite you already know and love just leveled up. We’re working hard to update our help center, but you still may see some references to the old product name.
This article applies to the Email and Pages builder in all plans.
Overview
Content Properties let you customize each content block in your design. Each block has its own set of options. These options control how your content looks and behaves. This article covers the options for the Image content block.
Image Content Properties
Insert an image or click an image in your design. The Content Properties panel then opens on the right side of the screen. It shows the settings you can change for that image.
The GIF below shows how to change the width of an image. First, turn off Auto width. Then, drag the slider to set the width you want.
Settings
The Image content block includes these Content Properties:
- Auto width: Makes the image fill its content area. RGE Studio turns this on for images larger than the content area. Turn it off to set the image width yourself.
- Align: Changes the position of the image.
- Dynamic image: Turn this on if your image is dynamic. Learn more about dynamic images.
- Apply effects: Opens the image editor. Use it to resize the image or add visual effects. Learn more about the image editor.
- Change image: Opens the File Manager. You can replace the image with a different one there.
- URL: Shows where the image is stored. You can also paste an external URL to load an image.
- Alternate text: Adds text that describes the image. Some email clients block images by default. Alternate text shows in place of a blocked image. It also makes your images more accessible. See AI Alt Text to have AI write it for you.
- Title: Adds text that shows when someone hovers over the image. Like alternate text, a title can make your image more accessible.
- Image rounded corners: Rounds the corners of the image. You can round all corners equally or each corner separately. See Image rounded corners for the steps.
AI Alt Text
You can use AI to write alternate text for these content blocks:
- Images
- GIFs
- Icons
- Stickers
Before you start, check that your image meets these requirements:
- The file format is JPEG, PNG, GIF, BMP, WEBP, ICO, TIFF, or MPO.
- The file size is less than 20 megabytes (MB).
- The image is larger than 50 x 50 pixels.
- The image is smaller than 16,000 x 16,000 pixels.
Note: You will see an error if your image falls outside these requirements.
You can use AI for one image or for multiple images at once.
Single image
Follow these steps to write alternate text for one image:
- Open your design in the builder.
- Click the image you want to add alternate text to.
- Go to Content Properties on the right side of the screen.
- Find the Alt text field.
- Click the wand icon. A drop-down menu appears.
- Click Generate alt-text. The AI adds alternate text to the Alt text field.
Multiple images
Follow the steps above. In step 6, click Generate alt-text in bulk instead. The AI also adds alternate text to the other images in your design. You can see it in the Content Properties of each image.
Note: AI writes alternate text in English only.
The video below explains why alt text matters for accessibility. It also shows how to use AI for one image or in bulk.
Image rounded corners
Use this setting to round the corners of any image in your design. Follow these steps:
- Open your design in RGE Studio.
- Select an image in the builder.
- Go to Content Properties on the right side of the screen.
- Find the Image rounded corners setting.
- Choose one of these options:
- To round all corners equally, click the plus (+) symbol below All corners.
- To round each corner separately, turn on More options. Then click the plus (+) symbol for each corner.
Note: Emails opened in Outlook show square corners instead.
Action
Use the Action section to link your image. Choose an option from the Image link drop-down:
- Open web page: Opens a URL.
- Send email: Opens a new email in the reader's email client.
- Make call: Calls a phone number.
- Send SMS: Starts a text message to a phone number.
You can also link the image to a file you uploaded to the File Manager.
Block Options
Use Block options to change the padding and visibility of the image. You can set the same padding on All sides. You can also set the padding for each side separately.
Use the visibility options to hide the image on desktop or mobile. Learn more about mobile design mode.
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, 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. 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.