Skip Navigation
Within Components

External Image

The External Image component allows content authors to display images on AEM pages. Specifically, the images can be external to AEM, and an author can use various images to display on a page. 

On This Page:

Related Information

Example

View on public site:

web Blog Page: Census Feedback
The images included in this page are external images

When to Use

The External Image component should be used when  a content author needs to attach an image that may not be located as an asset in DAM.

Usage

The External Image is used to display various images. The author must add a pathlink instead of an asset to display the desired image. An author can also alter size and shape of the image, using the configuration box.

Configure Dialog

Tab 1: External Image Information

author

The configure dialog has several different inputs: 

  • Title: An optional title for the image
  • Title Size: Several title sizes are presented for the image
  • Title Alignment: The alignment and orientation of the title for your image
  • Description: A discription for the image, located below the image
  • Image Location: Pathlink to the external image

Tab 2: Accessibility

author

The second tab is for accessibility and contains:

  • Alt Text: An alternative text for the image, mainly used as an accessibility option
  • Image is decorative: This checkbox is used to indicate that the image is purely decorative and does not have meaningful content

Developer Resources

Expand the section below to see the External Image component's HTML output.

style="min-height: 20px;" class="externalImage">

 

 

<img src="/content/dam/Census/newsroom/blogs/2023/dirblog-2030-frn/dirblog-2030-frn-idea-cloud.jpg">

</div><!--cq{"decorated":true,"type":"census/components/common/body/externalimage","path":"/content/census/en/newsroom/blogs/director/2023/03/2030-census-feedback-helps-our-nation-spanish/jcr:content/root/responsivegrid/externalimage_copy","selectors":null,"servlet":"Script /apps/census/components/common/body/externalimage/externalimage.html","totalTime":1,"selfTime":1}-->

<cq data-path="/content/census/en/newsroom/blogs/director/2023/03/2030-census-feedback-helps-our-nation-spanish/jcr:content/root/responsivegrid/externalimage_copy" data-config="{&quot;path&quot;:&quot;/content/census/en/newsroom/blogs/director/2023/03/2030-census-feedback-helps-our-nation-spanish/jcr:content/root/responsivegrid/externalimage_copy&quot;,&quot;slingPath&quot;:&quot;/content/census/en/newsroom/blogs/director/2023/03/2030-census-feedback-helps-our-nation-spanish/jcr:content/root/responsivegrid/externalimage_copy.html&quot;,&quot;dialog&quot;:&quot;/apps/census/components/common/body/externalimage/cq:dialog&quot;,&quot;dialogLoadingMode&quot;:&quot;auto&quot;,&quot;dialogLayout&quot;:&quot;auto&quot;,&quot;dialogSrc&quot;:&quot;/mnt/override/apps/census/components/common/body/externalimage/_cq_dialog.html/content/census/en/newsroom/blogs/director/2023/03/2030-census-feedback-helps-our-nation-spanish/jcr:content/root/responsivegrid/externalimage_copy&quot;,&quot;dialogClassic&quot;:&quot;/apps/census/components/common/body/externalimage/dialog&quot;,&quot;type&quot;:&quot;census/components/common/body/externalimage&quot;,&quot;isResponsiveGrid&quot;:false,&quot;policyPath&quot;:&quot;root/responsivegrid/census/components/common/body/externalimage&quot;,&quot;csp&quot;:&quot;censusgovfullwidth|sharededitablebasepage|pagecore|page|basicpage/root|responsivegrid/responsivegrid/externalimage&quot;}"></cq>

</div>

Top of Section
✕
Is this page helpful?
Thumbs Up Image Yes Thumbs Down Image No
✕
NO THANKS
255 characters maximum 255 characters maximum reached
✕
Thank you for your feedback.
Comments or suggestions?

Top

Back to Header