How to use external images in your message

Importing images or using remotely hosted ones

You can import images into your email message in a variety of ways when using the BEE editor with your BEE Pro account:

  • Dragging and dropping them directly from your desktop
  • Uploading them using the image manager
  • Importing them from social media accounts, cloud storage, etc.

You can also decide not to import the images at all, keeping them hosted elsewhere (e.g. using services such as Imgur or CloudApp), and using absolute URLs to them in your messages, as mentioned below.

Depending on how you bring an image into the editor, the HTML generated by the editor will contain either a local path to the image file or an absolute URL to it.

Let's look at both scenarios

Locally hosted images (local paths)

By default, when you download your message from your BEE Pro account, the system creates a ZIP file that you can save to your computer. The file contains:

  • An "images" folder with the images used in your email.
  • An HTML file with local paths to that foder for those images (e.g. src="images/myImage.gif")

This allows you to easily upload all the contents of your email message to your service provider by importing the HTML message and the image folder within the ZIP file. This is really easy when your email service provider has an "import ZIP file" feature (or alike). If it doesn't, you can still import the HTML and images separately.

Remotely hosted images (absolute URLs)

You can use images that are not hosted by BEE Pro, but rather somewhere else. We refer to them as external or remotely hosted images.

If your email service provider doesn't provide a ZIP import feature to update an email message into it, using external images can help speed things up when you export the message from BEE Pro and import it into your ESP or other software where the image will be sent.

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.

In BEE Pro you can easily 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 downloaded to the BEE Pro file system
  • will not be included in the "images" folder when the ZIP is downloaded
  • will be left "as is" in the HTML of the email, which will therefore maintain the full URL that you copied into the URL field.

Limitations when using external images

There are a couple of limitations when using external images via the image URL field:

  • Images inserted that way cannot be modified with the built-in image editor (Edit image button in the screenshot above). If an image is modified, it becomes a local image: it will be saved locally in the BEE Pro file system and added to the "images" folder of the downloaded ZIP file.
  • External images cannot currently be used for social media icons.
Have more questions? Submit a request

Comments

  • Avatar
    David Kunttu

    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?

  • Avatar
    Guille Padilla

    Hi David, are they using the same account?

  • Avatar
    David Kunttu

    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.

  • Avatar
    Guille Padilla

    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.

  • Avatar
    David Kunttu

    That appears to be the problem. I will work with them to confirm only one user accesses the editor at a time. Thanks!

  • Avatar
    Steven Pearl

    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?

  • Avatar
    Guille Padilla

    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.

  • Avatar
    Steven Pearl

    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?

  • Avatar
    Guille Padilla

    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.

  • Avatar
    Lolimar Marcano

    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

  • Avatar
    Guille Padilla

    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?

  • Avatar
    Lolimar Marcano

    Thanks Guille. I can not even paste an example. The system inmediately change my CloudApp URL into the BeePro URL again and again....

  • Avatar
    Lolimar Marcano

    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

  • Avatar
    Gabriella Gyorffy

    Same problem as described by Lolimar Marcano above: The system inmediately change my external URL into the BeePro URL again and again....

  • Avatar
    Gabriella Gyorffy

    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.

  • Avatar
    Sergio M.

    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!

    Edited by Sergio M.
  • Avatar
    Gabriella Gyorffy

    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.

  • Avatar
    Gabriella Gyorffy

    The external image URL paste worked fine today. It did not work yesterday. I will experiment further and let you know how it goes.

  • Avatar
    Gabriella Gyorffy

    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.

  • Avatar
    Gabriella Gyorffy

    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.

  • Avatar
    Guille Padilla

    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.

  • Avatar
    Guille Padilla

    To speed up formatting of contents or structures use the clone option to create new elements that inherit the element settings.

  • Avatar
    Gabriella Gyorffy

    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?

  • Avatar
    Guille Padilla

    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.

  • Avatar
    Lolimar Marcano

    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

  • Avatar
    Guille Padilla

    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.

  • Avatar
    Emily Willems

    "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?

  • Avatar
    Guille Padilla

    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.

  • Avatar
    Alejandro Guerrero

    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.-

    Edited by Alejandro Guerrero