Dynamic Image for 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’
Add the shortcode code
Add custom CSS
Under the ‘Advanced’ tab
The shortcode with the arguments
External image linked to a website
[code]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"[/code]External image displayed in the fancybox
[code]eac_img src="https://www.cestpascommode.fr/wp-content/uploads/2019/04/fauteuil-louis-philippe-zebre-01.jpg" fancybox="yes" caption="Fauteuil Zèbre"[/code]Personalize the image with the custom css widget
/** Advanced Tab: EAC Custom CSS */
selector { text-align: center; }
selector figure { padding: 10px 5px; }
selector figure img { border: 5px solid gray; }
/** 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; }