External Image for Elementor free version allows you to add your image from an external link 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.
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 link with the image widget
Please note: the “Shortcode media” is kept as part of the history and will be deleted in the next release (v1.6.3).
Using image as a link to another page
How to show the 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.
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 attributes
- 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
- Custom Attributes: ‘data-fancybox|standaloneimg’ (Key|Value).
Where ‘data-fancybox‘ is mandatory and ‘Value‘ is any value
Multiple images with custom 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
Credit
The Fancybox library for the viewer