{"id":9420,"date":"2024-07-16T09:09:16","date_gmt":"2024-07-16T09:09:16","guid":{"rendered":"https:\/\/axamit.com\/?post_type=glossary-article&#038;p=9420"},"modified":"2024-07-16T09:12:03","modified_gmt":"2024-07-16T09:12:03","slug":"create-image-component","status":"publish","type":"glossary-article","link":"https:\/\/axamit.com\/en\/glossary\/aem\/create-image-component\/","title":{"rendered":"How to Create Image Component in Adobe Experience Manager (AEM): A Comprehensive Guide"},"content":{"rendered":"<div class=\"custom-toc\"><ul><\/ul><\/div>\n<p class=\"wp-block-paragraph\">In\u00a0Adobe Experience Manager\u00a0(AEM), components are the primary elements that content authors use to build pages. One of the most frequently used components is the Image Component, which allows authors to add and manage images within their content. This guide will walk you through the process of creating an image component in AEM.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>An image component in AEM allows content authors to add and manipulate images on a page.<\/li>\n\n\n\n<li>The process of creating an image component involves accessing and using AEM\u2019s CRXDE Lite.<\/li>\n\n\n\n<li>A custom image component requires a specific structure, including nodes for the component, dialog, and image rendition.<\/li>\n\n\n\n<li>Validation and testing of the created component are crucial to ensure correct functionality.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding the Image Component<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">An image component in AEM is a\u00a0reusable\u00a0piece of content that allows content authors to add an image to the page, define its size, alignment, alternate text, and other properties. It provides authors with flexibility and control over how images display on their pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing CRXDE Lite<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To create a custom image component, you\u2019ll need to access CRXDE Lite, which is AEM\u2019s built-in development environment.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps to Access CRXDE Lite<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open your web browser and navigate to <strong>http:\/\/[your_AEM_server]:[port]\/crx\/de<\/strong>.<\/li>\n\n\n\n<li>Log in with your AEM credentials.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Creating the Component Structure<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After accessing CRXDE Lite, you\u2019ll need to create the structure for your image component.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps to Create the Component Structure<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the left-hand side panel, navigate to <strong>\/apps\/your_project\/components<\/strong>.<\/li>\n\n\n\n<li>Right-click on the\u00a0<strong>components<\/strong> node and select <strong>Create -> Create\u00a0Node<\/strong>.<\/li>\n\n\n\n<li>Name the node after your component (e.g., \u2018myImage\u2019) and set the <strong>jcr:primaryType<\/strong>\u00a0property to <strong>cq:Component<\/strong>.<\/li>\n\n\n\n<li>Create a <strong>cq:dialog<\/strong>\u00a0node under your component node and set its <strong>jcr:primaryType<\/strong>\u00a0property to <strong>nt:unstructured<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Defining the Dialog<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The dialog is where content authors will configure the image properties. You need to define this in your component structure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps to Define the Dialog<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Under the <strong>cq:dialog<\/strong>\u00a0node, create a <strong>content<\/strong> node with <strong>jcr:primaryType<\/strong>\u00a0set to <strong>nt:unstructured<\/strong>.<\/li>\n\n\n\n<li>Under the content\u00a0node, create an <strong>items<\/strong>\u00a0node, also with <strong>jcr:primaryType<\/strong>\u00a0set to <strong>nt:unstructured<\/strong>.<\/li>\n\n\n\n<li>Under the\u00a0<strong>items<\/strong> node, create a node for each property you want the image to have (e.g., \u2018file\u2019, \u2018alt\u2019, \u2018title\u2019, etc.). Set their jcr:primaryType\u00a0to nt:unstructured\u00a0and define their properties as needed.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Image Rendition<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The image rendition defines how the image will be displayed on the page. It\u2019s defined in the component\u2019s <strong>html.jsp<\/strong>\u00a0file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps to Add Image Rendition<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Under your component node, create a file named <strong>html.jsp<\/strong>.<\/li>\n\n\n\n<li>In this file, write the JSP code that will render the image using the properties defined in the dialog.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Saving Your Changes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After defining the dialog and adding the image rendition, you need to save your changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps to Save Changes<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>Save All<\/strong> button at the top of the CRXDE Lite interface.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Validating the Component<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The final step is to validate that your component works as expected.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps to Validate the Component<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to a page in the AEM authoring interface.<\/li>\n\n\n\n<li>Open the component side panel and find your image component.<\/li>\n\n\n\n<li>Drag the component to the page, configure it using the dialog, and verify that it displays correctly.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Creating a custom image component in AEM gives content authors more control over how images are displayed on their pages. By understanding the process of creating an image component in AEM, you can extend the functionality of your AEM site and provide a richer\u00a0content authoring\u00a0experience.<\/p>\n","protected":false},"author":12,"featured_media":5015,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"glossary-category":[43],"class_list":["post-9420","glossary-article","type-glossary-article","status-publish","has-post-thumbnail","hentry","glossary-category-aem"],"acf":{"post_title":"Create Image Component"},"_links":{"self":[{"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/glossary-article\/9420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/glossary-article"}],"about":[{"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/types\/glossary-article"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":3,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/glossary-article\/9420\/revisions"}],"predecessor-version":[{"id":9424,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/glossary-article\/9420\/revisions\/9424"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/media?parent=9420"}],"wp:term":[{"taxonomy":"glossary-category","embeddable":true,"href":"https:\/\/axamit.com\/en\/wp-json\/wp\/v2\/glossary-category?post=9420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}