Add External Image For Elementor

External Image for Elementor free version 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.
This component implement the dynamic tags mechanism for Elementor free version and is not compatible with Elementor PRO.

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 attributes

  • 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 from 'cloud.2urn.com'
Another image is opened in the Fancybox
Another image is opened in the Fancybox
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

Credit

The Fancybox library for the viewer

Leave a Comment