The Basic Image is a simple image component with no text or other visual elements. It can be used responsively on our website.
Inserting images for visual effects.
The image component has the aspect-ratio functionality with which you can choose the different ratios according to the design specifications.
The image is a very straightforward component. If you want to achive a group of two or more images, you can use the container component and choose the margin between the images by selecting the auto gap style.
- layout: responsiveGrid
- sling:resourceType: aida-component-library/core/components/container/container
- cq:styleIds: ,,1640174374131,1643023979594,,
<div class="container responsivegrid cmp-container--autogap-vertical cmp-container--autogap-horizontal">
<div id="container-af617ed288" class="cmp-container">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<div class="image cmp-image--one-one aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85{.width}.jpeg/1682696661127/playing.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/playing.jpeg" id="image-1c3092b6ed" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.jpeg/1682696661127/playing.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.320.jpeg/1682696661127/playing.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.480.jpeg/1682696661127/playing.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.600.jpeg/1682696661127/playing.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.800.jpeg/1682696661127/playing.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1024.jpeg/1682696661127/playing.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1200.jpeg/1682696661127/playing.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1600.jpeg/1682696661127/playing.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2560" height="1707" alt="">
</div>
</div>
<div class="image cmp-image--one-one aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85{.width}.jpeg/1682696635985/restaurant.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/restaurant.jpeg" id="image-c48062e232" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.jpeg/1682696635985/restaurant.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.320.jpeg/1682696635985/restaurant.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.480.jpeg/1682696635985/restaurant.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.600.jpeg/1682696635985/restaurant.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.800.jpeg/1682696635985/restaurant.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1024.jpeg/1682696635985/restaurant.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1200.jpeg/1682696635985/restaurant.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1600.jpeg/1682696635985/restaurant.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1871" height="1243" alt="">
</div>
</div>
<div class="image cmp-image--one-one aem-GridColumn--default--none aem-GridColumn aem-GridColumn--offset--default--0 aem-GridColumn--default--4">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85{.width}.jpeg/1682696659124/room.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/image-gallery/room.jpeg" id="image-3bdff07a0f" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.jpeg/1682696659124/room.jpeg" srcset="/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.320.jpeg/1682696659124/room.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.480.jpeg/1682696659124/room.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.600.jpeg/1682696659124/room.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.800.jpeg/1682696659124/room.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1024.jpeg/1682696659124/room.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1200.jpeg/1682696659124/room.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1600.jpeg/1682696659124/room.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2043" height="1359" alt="">
</div>
</div>
</div>
</div>
</div>
{
"columnClassNames": {
"image_copy": "aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--offset--default--0 aem-GridColumn--default--none",
"image": "aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--offset--default--0 aem-GridColumn--default--none",
"image_copy_1770967367": "aem-GridColumn aem-GridColumn--default--4 aem-GridColumn--offset--default--0 aem-GridColumn--default--none"
},
"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
"columnCount": 12,
"appliedCssClassNames": "cmp-container--autogap-vertical cmp-container--autogap-horizontal",
":itemsOrder": [
"image",
"image_copy",
"image_copy_1770967367"
],
":items": {
"image": {
"id": "image-1c3092b6ed",
"componentData": {
"@type": "aida-component-library/core/components/content/image",
"image": {
"repo:id": "21de7dba-f6e6-4685-96ff-e2f37fa9529c",
"repo:modifyDate": "2023-04-28T15:44:21Z",
"@type": "image/jpeg",
"repo:path": "/content/dam/aida-component-library/demo/images/image-gallery/playing.jpeg"
}
},
"sizes": "",
"srcUriTemplate": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85{.width}.jpeg/1682696661127/playing.jpeg",
"lazyEnabled": true,
"lazyThreshold": 0,
"decorative": true,
"dmImage": false,
"srcset": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.320.jpeg/1682696661127/playing.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.480.jpeg/1682696661127/playing.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.600.jpeg/1682696661127/playing.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.800.jpeg/1682696661127/playing.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1024.jpeg/1682696661127/playing.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1200.jpeg/1682696661127/playing.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.85.1600.jpeg/1682696661127/playing.jpeg 1600w",
"src": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image.coreimg.jpeg/1682696661127/playing.jpeg",
"areas": [],
"widths": [
320,
480,
600,
800,
1024,
1200,
1600
],
"width": "2560",
"height": "1707",
":type": "aida-component-library/core/components/content/image",
"appliedCssClassNames": "cmp-image--one-one"
},
"image_copy": {
"id": "image-c48062e232",
"componentData": {
"@type": "aida-component-library/core/components/content/image",
"image": {
"repo:id": "0eb8e44c-eef5-4904-9cf8-b918f5252b8b",
"repo:modifyDate": "2023-04-28T15:43:55Z",
"@type": "image/jpeg",
"repo:path": "/content/dam/aida-component-library/demo/images/image-gallery/restaurant.jpeg"
}
},
"sizes": "",
"srcUriTemplate": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85{.width}.jpeg/1682696635985/restaurant.jpeg",
"lazyEnabled": true,
"lazyThreshold": 0,
"decorative": true,
"dmImage": false,
"srcset": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.320.jpeg/1682696635985/restaurant.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.480.jpeg/1682696635985/restaurant.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.600.jpeg/1682696635985/restaurant.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.800.jpeg/1682696635985/restaurant.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1024.jpeg/1682696635985/restaurant.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1200.jpeg/1682696635985/restaurant.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.85.1600.jpeg/1682696635985/restaurant.jpeg 1600w",
"src": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy.coreimg.jpeg/1682696635985/restaurant.jpeg",
"areas": [],
"widths": [
320,
480,
600,
800,
1024,
1200,
1600
],
"width": "1871",
"height": "1243",
":type": "aida-component-library/core/components/content/image",
"appliedCssClassNames": "cmp-image--one-one"
},
"image_copy_1770967367": {
"id": "image-3bdff07a0f",
"componentData": {
"@type": "aida-component-library/core/components/content/image",
"image": {
"repo:id": "124d1fb4-8954-4eb0-bf1c-9ede2fcebe2e",
"repo:modifyDate": "2023-04-28T15:44:19Z",
"@type": "image/jpeg",
"repo:path": "/content/dam/aida-component-library/demo/images/image-gallery/room.jpeg"
}
},
"sizes": "",
"srcUriTemplate": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85{.width}.jpeg/1682696659124/room.jpeg",
"lazyEnabled": true,
"lazyThreshold": 0,
"decorative": true,
"dmImage": false,
"srcset": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.320.jpeg/1682696659124/room.jpeg 320w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.480.jpeg/1682696659124/room.jpeg 480w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.600.jpeg/1682696659124/room.jpeg 600w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.800.jpeg/1682696659124/room.jpeg 800w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1024.jpeg/1682696659124/room.jpeg 1024w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1200.jpeg/1682696659124/room.jpeg 1200w,/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.85.1600.jpeg/1682696659124/room.jpeg 1600w",
"src": "/content/aida-component-library/library/page-authoring/AIDA-355-CP-Basic-Image/_jcr_content/root/responsivegrid/demo/component/container_copy_copy/image_copy_1770967367.coreimg.jpeg/1682696659124/room.jpeg",
"areas": [],
"widths": [
320,
480,
600,
800,
1024,
1200,
1600
],
"width": "2043",
"height": "1359",
":type": "aida-component-library/core/components/content/image",
"appliedCssClassNames": "cmp-image--one-one"
}
},
":type": "aida-component-library/core/components/container/container"
}
Built with Core Components 2.27.0opens in a new tab.