How to use external images in your design
This article applies to the Email and Pages builder in all plans.
Importing Images or Using Remotely Hosted Ones
You can import images into your design in a variety of ways when using Beefree:
- Dragging and dropping them directly from your desktop
- Uploading them using the file manager
- Importing them from social media accounts, cloud storage, etc.
You can also decide not to import the images at all. Instead, you could keep them hosted using services such as Imgur or CloudApp. This allows you to use absolute URLs to them in your designs, as described below.
The HTML output you receive upon export might depend on how you bring an image into the builder. If you're exporting a ZIP file, you might see a local path to the image file or an absolute URL to it. Images hosted through Beefree will return a local file path in this case. External images will return the original absolute URL.
Let's look at both scenarios.
Locally hosted images (local paths)
The original export method provided by Beefree creates a ZIP file that you can save to your computer. You can also opt to keep the images hosted by Beefree and have the HTML of the email link to them.
If you export as a ZIP folder, the file contains:
- An "images" folder with the images used in your email (limited to 5 MB).
- An HTML file with local paths to that folder for those images (e.g. src="images/myImage.gif")
If designing emails, this allows you to upload all the contents to your ESP upon importing the export file. This is easy when your email service provider has an "import ZIP file" feature (or similar). If it doesn't, you can still import the HTML and images separately. In this case, the sending platform will host the images on your behalf.
Remotely hosted images (absolute URLs)
You can use images that are not hosted by Beefree, but rather somewhere else. We refer to them as external or remotely hosted images.
You can use images that are already online (e.g. on your company site, a blog, an online store, etc.) or use a service such as CloudApp or Imgur to host them.
It's easy to add an external image by using the URL field on the content properties of an image block:
Images added through the URL field:
- will not be available in the Beefree file manager
- will not be included in the "images" folder when you download the ZIP file
- will be left "as is" in the HTML. In other words, it will maintain the full link that you pasted into the URL field.
Limitations when using external images
-
If an external image is modified through the built-in image editor (Apply effects & more), it becomes a local image. It will be saved locally in the Beefree file system and added to the "images" folder of the downloaded ZIP file.
- Externally hosted images must be delivered via HTTPS protocol. If not, the image may disappear from the builder.
If you have any questions, feel free to contact us.
Comments
30 comments
Hey there, some users are reporting an error when uploading images from their computers into the file manager. I checked their browser console and see this entry:
rsrc.getbee.io/api/cloudstorage:1 POST https://rsrc.getbee.io/api/cloudstorage 400 (Bad Request)
Is this something you can assist with?
Hi David, are they using the same account?
Hey Guille, I believe only one user is logged in when this occurs (I asked the same question!). I haven't been able to recreate the error myself.
To replicate the error just open 2 instances in different browsers or tabs using the same account/user, the second instance will steal the session to the first, that will be unable to use the file manager.
That appears to be the problem. I will work with them to confirm only one user accesses the editor at a time. Thanks!
what happens if we use the URL generated in BeePro as the location of the images we have uploaded? will those references to those images still work at all times if the image remains in the library of images on our account?
Hi Steven, BEE Pro was built to create a downloadable message (including the images).
The image delivery is a service we plan to add in the next future to facilitate the message export to an ESP. Till that, we can't guarantee the availability of the assets for massive sends, but only cover the regular testing activity.
I created a CloudApp account and now want to add pictures into a message and have it use the URL from CloudApp and not have it import and change it to a BeeFree location. How is that done?
You need the images Url to add them as described in the article. When you download the message, these images won't be included in the zip folder.
I have my images in CloudApp and when I create an image block for inserting the URL, the "content properties" does not show, when can I find it? I also try simply to change the URL of the current image (uploaded in my file manager), which is a "http://pro-bee-beepro..." into the CloudApp URL and the software ignore it and punt the beepro URL again. Please help
The content properties need an image to work, they will display after an image is dropped in the block, or applied with the file manager. There is no option to quickly apply an external image, but you can clone an existing image to go faster.
About the CloudApp URL, can you paste here an example to verify it?
Thanks Guille. I can not even paste an example. The system inmediately change my CloudApp URL into the BeePro URL again and again....
Guille, I return to the traditional way, using the carpet "Images" for my .jpg files. When I upload my HTML code into Outlook everything looks fine, then I saved the message in order to send it to my client (I am still testing Beepro) and get a .msg file, then when my client open it in her Outlook the images do not show, and the same happens to me when I upload the same file. I hace the carpet "Images" in the same place that my HTML file and my client so. Please your help
Same problem as described by Lolimar Marcano above: The system inmediately change my external URL into the BeePro URL again and again....
Is there any way to copy the source code without creating and unzipping. Once it works I would use external images and it would be much faster to copy the code into my email editor.
Hi Gabriella,
Just to clarify, what emailing/sending platform are you importing your BEE message into?
For importing your email from BEE into Outlook, we recommend instead to follow these instructions:
1. Send your email message created in BEE to your Outlook inbox using the "Send test" feature (from top-left menu)
2. In Outlook, select the email and click on "Forward"
3. Remove any extra spacing at the top and the signature in the footer
4. Edit your subject line
5. Enter your email recipients and send it
Hope this helps!
I am using GroupMail. It would be much faster, easier to copy and paste html, then unzipping, opening and then copy/paste. Also, there are some strange question marks in the mail when I copy the html and the font is not what I set in BEE.
The external image URL paste worked fine today. It did not work yesterday. I will experiment further and let you know how it goes.
Sorry, I meant "than" not "then" in my post: I am using GroupMail. It would be much faster, easier to copy and paste html, than unzipping, opening and then copy/paste.
Is there any way to select more content, boxes at the same time and apply formatting at once. That would speed the process a lot.
Hi Lolimar & Gabriella, this is the URL to an image hosted with CloudAPP (I've just uploaded it). I applied it without problems:
https://d17oy1vhnax1f7.cloudfront.net/items/3q2X3z1s322j2g422246/90H.2G0V1m0S1o3W.jpg
Mind that you need to use a direct path to the image (in CloudApp is called original file). If you use the secure link or application page, the URL will not be replaced as the first one is not public, and the second one is a web page and not an image file.
To speed up formatting of contents or structures use the clone option to create new elements that inherit the element settings.
Clone is great, however, I may want to change the formatting later. Is there any way to to select more content, boxes and apply formatting at once?
You can't. Only some global options (Body panel) apply changes to all the modules.
Please, consider adding your request to our Community related topic, so other users can comment and up-vote it.
Hi Guille, I return to the traditional way, using the carpet "Images" for my .jpg files. When I upload my HTML code into Outlook everything looks fine, then I saved the message in order to send it to my client (I am still testing Beepro) and get a .msg file, then when my client open it in her Outlook the images do not show, and the same happens to me when I upload the same file. I have the carpet "Images" in the same place that my HTML file and my client so. Please your help
Hi Lolimar, you're sending the HTML inside the .msg, but how the images are loaded is something that happens in your computer, so any change or moving them too another computer will cause these problems.
If all you need is to show the message to your customer, send a quick test from the application, or send the entire ZIP folder.
Alternatively, you must host your images somewhere in internet as described above.
"External images cannot currently be used for social media icons"
For me this is very annoying because that means I have to replace all the local images to absolute URL's in the source code when downloading the HTML file. I create more than 500 mails/year in 9 different languages. Can you imagine all this extra work? Is there no kind of workaround for this?
Hi Emily, we have tons of new features planned for 2017 first quarter, including image delivery (image host and traffic) as a service. This will simplify things a lot.
Currently, if you're used to work with HTML, you can use the HTML block as a workaround. Crete your own code snippets from our code and use it in your templates.
Hello,
Definitively, image store is mandatory as it makes the process much easier/faster.
I'm still using Mosaico, but Bee will be a great option once the image hosting feature is implemented.
BTW, I use Mautic as my platform.
Thanks,
Alejandro.-
When is this planned to be available?
"External images cannot currently be used for social media icons."
Please sign in to leave a comment.