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