Image

Github URL

Adobe URL

Source URL

Standard

Simple image with an asset referenced from DAM and no other configuration. By default, metadata for the asset (alternative text and caption) is read from DAM but can also be provided by an author.

jcr:primaryType: nt:unstructured
jcr:createdBy: admin
fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
jcr:lastModifiedBy: admin
jcr:created:
displayPopupTitle: true
jcr:lastModified:
titleValueFromDAM: true
sling:resourceType: core-components-examples/components/image
isDecorative: false
altValueFromDAM: true

<div class="image">
  <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/page-authoring/image/_jcr_content/root/responsivegrid/demo_554582955/component/image.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-f4b958f398" data-cmp-data-layer="{&quot;image-f4b958f398&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T17:31:15Z&quot;,&quot;dc:title&quot;:&quot;Lava flowing into the ocean&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
    <img src="/content/core-components-examples/library/page-authoring/image/_jcr_content/root/responsivegrid/demo_554582955/component/image.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean" title="Lava flowing into the ocean">
    <meta itemprop="caption" content="Lava flowing into the ocean">
  </div>
</div>

{"id":"image-f4b958f398","alt":"Lava flowing into the ocean","title":"Lava flowing into the ocean","src":"\/content\/core-components-examples\/library\/page-authoring\/image\/_jcr_content\/root\/responsivegrid\/demo_554582955\/component\/image.coreimg.jpeg\/1550672497829\/lava-into-ocean.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/page-authoring\/image\/_jcr_content\/root\/responsivegrid\/demo_554582955\/component\/image.coreimg{.width}.jpeg\/1550672497829\/lava-into-ocean.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-f4b958f398":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2019-01-22T17:31:15Z","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg","xdm:tags":[],"xdm:smartTags":[]}}}}

Caption

Captions are displayed by default in a pop-up on hover but the image can also be configured so that the caption is displayed directly on the page.

  

    
    Lava flowing into the ocean
  

jcr:primaryType: nt:unstructured
jcr:createdBy: admin
fileReference: /content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg
jcr:lastModifiedBy: admin
jcr:created:
displayPopupTitle: false
jcr:lastModified:
titleValueFromDAM: true
sling:resourceType: core-components-examples/components/image
isDecorative: false
altValueFromDAM: true

<div class="image">
  <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/page-authoring/image/_jcr_content/root/responsivegrid/demo_1384627264/component/image.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-1a5cc576ae" data-cmp-data-layer="{&quot;image-1a5cc576ae&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T11:48:48Z&quot;,&quot;dc:title&quot;:&quot;Lava flowing into the ocean&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
    <img src="/content/core-components-examples/library/page-authoring/image/_jcr_content/root/responsivegrid/demo_1384627264/component/image.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean">
    <span class="cmp-image__title" itemprop="caption">Lava flowing into the ocean</span>
  </div>
</div>

{"id":"image-1a5cc576ae","alt":"Lava flowing into the ocean","title":"Lava flowing into the ocean","src":"\/content\/core-components-examples\/library\/page-authoring\/image\/_jcr_content\/root\/responsivegrid\/demo_1384627264\/component\/image.coreimg.jpeg\/1550672497829\/lava-into-ocean.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/page-authoring\/image\/_jcr_content\/root\/responsivegrid\/demo_1384627264\/component\/image.coreimg{.width}.jpeg\/1550672497829\/lava-into-ocean.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-1a5cc576ae":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-07T11:48:48Z","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg","xdm:tags":[],"xdm:smartTags":[]}}}}

Linked

Images can be linked to internal relative AEM resources or to external absolute URLs.

jcr:primaryType: nt:unstructured
jcr:createdBy: admin
fileReference: /content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg
jcr:lastModifiedBy: admin
jcr:created:
linkURL: /content/core-components-examples/library/page-authoring/image
displayPopupTitle: true
jcr:lastModified:
titleValueFromDAM: true
sling:resourceType: core-components-examples/components/image
isDecorative: false
altValueFromDAM: true

<div class="image">
  <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/page-authoring/image/_jcr_content/root/responsivegrid/demo_1473529393/component/image.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-8974cba812" data-cmp-data-layer="{&quot;image-8974cba812&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T17:31:25Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/page-authoring/image.html&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
    <a class="cmp-image__link" href="/content/core-components-examples/library/page-authoring/image.html" data-cmp-clickable="" data-cmp-hook-image="link">
      <img src="/content/core-components-examples/library/page-authoring/image/_jcr_content/root/responsivegrid/demo_1473529393/component/image.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
    </a>
    <meta itemprop="caption" content="Snowy mountain glacier">
  </div>
</div>

{"id":"image-8974cba812","alt":"Snowy mountain glacier","title":"Snowy mountain glacier","src":"\/content\/core-components-examples\/library\/page-authoring\/image\/_jcr_content\/root\/responsivegrid\/demo_1473529393\/component\/image.coreimg.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/page-authoring\/image\/_jcr_content\/root\/responsivegrid\/demo_1473529393\/component\/image.coreimg{.width}.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","widths":[],"lazyEnabled":false,"link":"\/content\/core-components-examples\/library\/page-authoring\/image.html",":type":"core-components-examples\/components\/image","dataLayer":{"image-8974cba812":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2019-01-22T17:31:25Z","dc:title":"Snowy mountain glacier","xdm:linkURL":"\/content\/core-components-examples\/library\/page-authoring\/image.html","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/snowy-mountain-glacier.jpg","xdm:tags":[],"xdm:smartTags":[]}}}}

SVG and GIF Images

SVG and GIF image MIME types are supported.

jcr:primaryType: nt:unstructured
jcr:createdBy: admin
fileReference: /content/dam/core-components-examples/library/components/component.svg
jcr:lastModifiedBy: admin
jcr:created:
displayPopupTitle: true
jcr:lastModified:
titleValueFromDAM: true
sling:resourceType: core-components-examples/components/image
isDecorative: false
altValueFromDAM: true

<div class="image">
  <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/page-authoring/image/_jcr_content/root/responsivegrid/demo/component/image.coreimg{.width}.svg/1558693642154/component.svg" data-asset="/content/dam/core-components-examples/library/components/component.svg" data-asset-id="bf8419f0-1d78-4ce8-9af8-80d3ea45da26" data-title="Component" id="image-97a7aea87d" data-cmp-data-layer="{&quot;image-97a7aea87d&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T17:30:58Z&quot;,&quot;dc:title&quot;:&quot;Component&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;bf8419f0-1d78-4ce8-9af8-80d3ea45da26&quot;,&quot;repo:modifyDate&quot;:&quot;2019-05-24T10:27:22Z&quot;,&quot;@type&quot;:&quot;image/svg+xml&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/components/component.svg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
    <img src="/content/core-components-examples/library/page-authoring/image/_jcr_content/root/responsivegrid/demo/component/image.coreimg.svg/1558693642154/component.svg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Component" title="Component">
    <meta itemprop="caption" content="Component">
  </div>
</div>

{"id":"image-97a7aea87d","alt":"Component","title":"Component","src":"\/content\/core-components-examples\/library\/page-authoring\/image\/_jcr_content\/root\/responsivegrid\/demo\/component\/image.coreimg.svg\/1558693642154\/component.svg","srcUriTemplate":"\/content\/core-components-examples\/library\/page-authoring\/image\/_jcr_content\/root\/responsivegrid\/demo\/component\/image.coreimg{.width}.svg\/1558693642154\/component.svg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"bf8419f0-1d78-4ce8-9af8-80d3ea45da26","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-97a7aea87d":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2019-01-22T17:30:58Z","dc:title":"Component","image":{"repo:id":"bf8419f0-1d78-4ce8-9af8-80d3ea45da26","repo:modifyDate":"2019-05-24T10:27:22Z","@type":"image\/svg+xml","repo:path":"\/content\/dam\/core-components-examples\/library\/components\/component.svg","xdm:tags":[],"xdm:smartTags":[]}}}}

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

View all of mchavez's posts.