Elementor Dynamic Image

Dynamic Image for Elementor free version allows you to  add your dynamic external image link 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 mechanism for Elementor free version and is not compatible with Elementor PRO.

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

Shortcode

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

Shortcode: External IMG + LINK

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; }

shortcode: external IMG + 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;
}