Basic Image
Short Description:
The Basic Image is a simple image component with no text or other visual elements. It can be used responsively on our website.
Marketing purpose:
Inserting images for visual effects.
Image Aspect Ratio
The image component has the aspect-ratio functionality with which you can choose the different ratios according to the design specifications.
Grid
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.
Example
- Properties
- Markup
- JSON
- 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.