Add External Image With Elementor Using Shortcode

Dynamic Image for the free version of Elementor allows you to  add your external image with a shortcode and apply your CSS rules for styling the image.
Very useful to display your images from your CDN especially with the ‘Image gallery’ component.
This component implements the Dynamic Tag feature 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.

Insert the shortcode with the expected arguments to display the image

Choose text editor widget or your custom text field and click the dynamic icon in the upper right corner of the field and select ‘shortcode image’

Add the shortcode code

Add custom CSS
Under the ‘Advanced’ tab

The shortcode with the arguments

Shortcode

  • eac_img: shortcode name
  • src: absolute url of the external image
  • link: img + caption are surrounded by a page url link
  • OR
  • fancybox: (yes/no) image opens in the Fancybox
  • Caption: image caption

Personalize the image with the custom css widget

External image linked to a website

Shortcode:

[eac_img src=”https://www.cestpascommode.fr/wp-content/uploads/2020/04/chaise-victoria-01.jpg” link=”https://www.cestpascommode.fr/realisations/chaise-victoria” caption=”Chaise Victoria”]

/** Advanced Tab: EAC Custom CSS */
selector { text-align: center; }
selector figure { padding: 10px 5px; }
selector figure img { border: 5px solid gray; }

External image displayed in the fancybox

Shortcode:

[eac_img src=”https://www.cestpascommode.fr/wp-content/uploads/2019/04/fauteuil-louis-philippe-zebre-01.jpg” fancybox=”yes” caption=”Fauteuil Zèbre”]

/** Advanced Tab: EAC Custom CSS */
selector {
    text-align: center;
    background-color: black;
    background-color: rgba(0, 0 , 0, .5)
}

selector figure { padding: 10px 5px; }
selector figure img { border: 5px solid lightblue; }
selector figure figcaption { padding-top:20px; color:white; }