Image

Image allows a single image asset to be displayed on the page. Images are adaptive; the relevant image width is selected for the screen size and lazy loading is available.

Github URL
Adobe URL
Source URL
Title
Standard
Content

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.

Result
Lava flowing into the ocean
Properties:
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
Markup:
<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>
JSON:
{"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":[]}}}}
PostCSS: CSS: Title
Caption
Content

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.

Result
Lava flowing into the ocean Lava flowing into the ocean
Properties:
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
Markup:
<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>
JSON:
{"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":[]}}}}
PostCSS: CSS: Title
Linked
Content

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

Result
Properties:
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
Markup:
<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>
JSON:
{"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":[]}}}}
PostCSS: CSS: Title
SVG and GIF Images
Content

SVG and GIF image MIME types are supported.

Result
Component
Properties:
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
Markup:
<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>
JSON:
{"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":[]}}}}
PostCSS: CSS:

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.

Leave a comment

Your email address will not be published. Required fields are marked *