Add External Image For Elementor

External Image for Elementor allows you to add your image from an external url when you use the widget ‘Image’ from Elementor. You conserve all the properties and options that the Image widget provides.
Very useful to display the images from a CDN without using the Media library and especially handy for multisite. You are not wasting server space for the same images.
Pay attention: Dynamic Tags are disabled if Elementor Pro is installed and active.

    The link provided by a CDN display the content in a webpage not the direct image link.
    How to obtain a direct link to an image in Google Photos : Consult this page.
    How to obtain a direct link to an image in Google Drive
    – Use the Get Shared Link option in Google Drive to get the URL
    – Original Url: https://drive.google.com/file/d/XXXXX/view?usp=sharing
    – Target Url: https://drive.google.com/uc?export=view&id=XXXXX
    Copy the ID from the original to the target and you obtain the direct Url.

    Add your external image url with the image widget

    Choose image widget and click the dynamic tags icon
    Choose Elementor image widget and click the dynamic tags icon
    Select URLs/External image
    Select the Dynamic Tag URLs/External image
    Paste the full image URL
    Paste the full image URL
    Link unblast.com
    This image is linked from unblast.com

    Using image as a link to another page

    Yes you know how to add a link from the image to another HTML page. But it’s a step before understanding the rest.
    You have to open the Link properties with the gear icon to the right of the Link field and set the url.

    Link unblast.com
    Link unblast.com

    How to show the external image in a popup box

    Unfortunately the images of a CDN do not always have an extension of the type “jpg, png …”.
    You will therefore not be able to use the property Link / Media file and Lightbox / Yes – Default to display the image in a popup box because URIs are not rewritten with the Lightbox functionality of Elementor.
    However EAC makes extensive use of the Fancybox plugin. We will show you how to use it to open one or more images in a popup.

    Single image with custom link attributes

    Select Link/Custom URL: you must paste the same url as the image. Yes you can set another url to open a different image in the Fancybox.
    Open the Link properties with the gear icon to the right of the Link field
    Set Custom Attributes with: ‘data-fancybox|standaloneimg’ (Key|Value).
    where data-fancybox is mandatory and value is any value

    Link unblast.com
    Link unblast.com

    Multiple images with custom link attribute

    Custom URL: you must paste the same url as the image
    Custom Attributes: data-fancybox|groupeimg You must use the same pair Key|Value for each image to navigate between them

    Animated image from 'cloud.2urn.com'
    Animated image
    Another image is opened in the Fancybox
    Unblast.com
    Skydive
    Skydive
    Eiger 3967m Alpes
    Eiger 3967m Alpes

    Improve your SEO with the Dynamic Tag External image

    Vector Illustration
    Set attribute 'ALT' for the External image

    As you know, to improve the SEO of the page, you should at least value the ‘ALT’ attribute of the image if you use the Dynamic Tag ‘External image’.
    This alt text guarantees that no information or functionality will be lost.
    To do this enter a short and meaningful text in the ‘ALT attribute’ field under the image widget.

    Add random image with the dynamic tag External image

    As you know unsplash.com offerts a simple API for embedding a random photo in you site by using the widget media.
    With the Dynamic Tag “External image” you just have to put this url: https://source.unsplash.com/random in the field.
    If you want to size the image you can add the ‘widthxheight’ at the end of the url like this: https://source.unsplash.com/random/640×420
    The API offers other parameters that you will discover on the site.

    /* You can also styling the image by adding some CSS in Advanced tab/EAC Custom CSS */
    selector img {
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    object-position: 50% 50%;
    object-fit: none;
    border: 5px solid beige;
    }
    External random image
    Add random image with Dynamic Tag
    Random image from unsplash.com
    Random image with unsplash.com

    14 thoughts on “Add External Image For Elementor”

      • Hello Maria,
        I just tested it (v1.8.7 and Elementor 3.4.6) and i don’t find any problem
        – Open the gallery list repeater
        – Image control: click on the wrench icon
        – You must find the list of Dynamic Tags and in particular the entry ‘URLs / External Image’

        Reply
    1. Hi there. I’ve tested using WordPress 6.0.1, Elementor – 3.6.8, Elementor Pro – 7.2.0 and the ‘URLs/External Image’ option is unavailable in Dynamic Tags.
      I tried it with a fresh install, and could not get it to work…

      Reply
      • Hi Mel,
        If Elementor PRO is installed and activated, our plugin’s dynamic tags are disabled to avoid possible collisions.
        The dynamic tags you see are from Elementor PRO and not from our plugin.
        But in any case you can use the standard Image dialog box to add an image with the left menu ‘Insert from URL’.
        This feature has been added to the free version of Elementor since v3.3.0
        Rgds

        Reply
    2. I installed the plugin but I don’t see External Image for Elementor anywhere. I am using Elementor Pro, if that matters.

      Reply
      • Hi Jim,
        If Elementor PRO is installed and activated, our plugin’s dynamic tags are disabled to avoid possible collisions.
        In any case you can use the standard Image dialog box to add an image with the left menu ‘Insert from URL’.
        This feature was added in Elementor since v3.3.0
        Rgds

        Reply
    3. Hello,

      Plugin throws memory limit error, i use 512M, after disabling your plugin it work again. Any ideas or updates ? Newest ELE / ELE PRO update + your plugin

      Reply
      • Hello Jan,
        Sorry for the problem,
        Multiple factors can cause the error you are reporting.
        Our memory usage statistics “ Memory: 10 of 128 MB (8%) | WP LIMIT: 40 MB | PHP 8.1.22”
        We don’t test our plugin with the PRO version of Elementor
        Is it a local server or a staging server?
        Disable components and features you won’t be using with our plugin (EAC components menu)
        Remove inactive plugins.
        Remove inactive themes.
        Rgds

        Reply
        • Hello Thank you for your answer,

          its quite good server above average.

          Server architecture Linux 5.15.0-78-generic x86_64
          Web server Apache
          PHP version 8.3.9 (Supports 64bit values)
          PHP SAPI apache2handler
          PHP max input variables 10000
          PHP time limit 600
          PHP memory limit 512M
          Max input time 60
          Upload max filesize 256M
          PHP post max size 512M

          I cleared from inactive themes and plugins, deactivated unused elements in elementor and in your menu, updated everything.

          Still error: Fatal error: Allowed memory size of 536870912 bytes exhausted (tried to allocate 20480 bytes)

          Reply
          • Hello Jan,
            I don’t think I can help you any further.
            If the error disappears after deactivating our plugin, simply remove it.
            Other plugins such as Essential Addon or Premium will certainly do the job.
            Rgds

            Reply

    Leave a Comment