{"id":25,"date":"2015-02-09T07:41:00","date_gmt":"2015-02-09T07:41:00","guid":{"rendered":""},"modified":"2019-09-19T13:04:58","modified_gmt":"2019-09-19T13:04:58","slug":"image-not-visible-on-dialog-reopen-in-aem","status":"publish","type":"post","link":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/","title":{"rendered":"Image not visible on Dialog reopen in AEM"},"content":{"rendered":"
\n
In this post, I am going to sort out a very interesting problem which is occured when we use image component as a tab in out custom component.<\/span><\/div>\n
Most of time when we want to add a image tab into our component then we use these properties – <\/span><\/div>\n
                         path –  \/libs\/foundation\/components\/page\/tab_image.infinity.json<\/span><\/i><\/b><\/div>\n
                        xtype –  cqinclude<\/span><\/i><\/b><\/div>\n
Using this properties we are able to add a new tab that provides you a  drag & drop or upload a image functionality in your component. Some developers uses another approach to add a image tab in our component using <\/span>xtype smatimage. <\/i><\/span><\/b>
Both of these approaches works fine for us but some time we face an issue with these component dialogs. <\/span><\/div>\n

<\/b><\/span>Problem Statement – <\/b><\/span><\/div>\n
when we drop a image on this image tab & click on ok button, we are able to see this image as our component desired functionality, till now everything is working fine. Now when we reopen the dialog & open the image tab, image will not be displayed. i.e. when we reopen component dialog image tab it’s not displayed here.<\/i><\/span><\/div>\n
 <\/span><\/div>\n
How to resolve this issue – <\/b><\/span><\/div>\n
1). <\/b>Check <\/i>sling:resourceSuperType<\/b> property on your component, it must be present.<\/i><\/span><\/div>\n
2).<\/b> <\/i><\/span>sling:resourceSuperType<\/b> property value must be foundation\/components\/page<\/b>.<\/i> <\/i><\/span><\/div>\n
3). <\/b>Open your component’s .content.xml file<\/b> and check <jcr:root> tag, <\/b>here xmlns:sling must be present,<\/b> for example in my case it is – <\/i><\/span><\/div>\n
 <\/span><\/div>\n
<?xml version=”1.0″ encoding=”UTF-8″?><\/i><\/b><\/span><\/div>\n
<jcr:root <\/span><\/b><\/div>\n
    xmlns:sling=”http:\/\/sling.apache.org\/jcr\/sling\/1.0″ <\/span>   <\/span><\/i><\/b><\/div>\n
    xmlns:cq=”http:\/\/www.day.com\/jcr\/cq\/1.0″ <\/i><\/b><\/span><\/div>\n
    xmlns:jcr=”http:\/\/www.jcp.org\/jcr\/1.0″<\/i><\/b><\/span><\/div>\n
    jcr:description=”Jcr Description.”<\/i><\/b><\/span><\/div>\n
    jcr:primaryType=”cq:Component”<\/i><\/b><\/span><\/div>\n
    jcr:title=”Test Component”<\/i><\/b><\/span><\/div>\n
   <\/span> sling:resourceSuperType=”foundation\/components\/page”<\/span><\/i><\/b><\/div>\n
    allowedParents=”[*\/parsys]”<\/i><\/b><\/span><\/div>\n
    componentGroup=”Test”<\/i><\/b><\/span><\/div>\n
\/><\/b><\/span><\/div>\n
 <\/span><\/div>\n
The above schema work fine as both of these property are there. After defining these two highlighted properties, <\/span>test you component & I am damn sure, you component will start functioning properly. <\/span><\/div>\n<\/div>\n

 <\/p>\n

Happy Coding<\/strong>
Namah Shivay<\/strong><\/p>\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

In this post, I am going to sort out a very interesting problem which is occured when we use image […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87,83,86,85,84],"tags":[],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-dialog-image-not-visible-in-aem","category-dialog-image-not-visible-on-dialog-reopen-in-aem","category-dialog-image-tab-problem","category-image-not-displayed-on-dialog-reopen-in-aem","category-image-not-visible-on-dialog-reopen-in-cq5"],"yoast_head":"\nImage not visible on Dialog reopen in AEM - AEM Blog | Lhotse Technologies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image not visible on Dialog reopen in AEM - AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"og:description\" content=\"In this post, I am going to sort out a very interesting problem which is occured when we use image […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/\" \/>\n<meta property=\"og:site_name\" content=\"AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2015-02-09T07:41:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-19T13:04:58+00:00\" \/>\n<meta name=\"author\" content=\"Team Lhotse\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Team Lhotse\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/\"},\"author\":{\"name\":\"Team Lhotse\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d\"},\"headline\":\"Image not visible on Dialog reopen in AEM\",\"datePublished\":\"2015-02-09T07:41:00+00:00\",\"dateModified\":\"2019-09-19T13:04:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/\"},\"wordCount\":407,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"articleSection\":[\"Dialog image not visible in aem\",\"Dialog image not visible on dialog reopen in aem\",\"Dialog image tab problem\",\"Image not displayed on dialog reopen in aem\",\"image not visible on dialog reopen in cq5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/\",\"name\":\"Image not visible on Dialog reopen in AEM - AEM Blog | Lhotse Technologies\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\"},\"datePublished\":\"2015-02-09T07:41:00+00:00\",\"dateModified\":\"2019-09-19T13:04:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lhotsetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image not visible on Dialog reopen in AEM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"name\":\"AEM Blog | Lhotse Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\",\"name\":\"AEM Blog | Lhotse Technologies\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"contentUrl\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"width\":539,\"height\":172,\"caption\":\"AEM Blog | Lhotse Technologies\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d\",\"name\":\"Team Lhotse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Team Lhotse\"},\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/author\/team-lhotse\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image not visible on Dialog reopen in AEM - AEM Blog | Lhotse Technologies","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/","og_locale":"en_US","og_type":"article","og_title":"Image not visible on Dialog reopen in AEM - AEM Blog | Lhotse Technologies","og_description":"In this post, I am going to sort out a very interesting problem which is occured when we use image […]","og_url":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/","og_site_name":"AEM Blog | Lhotse Technologies","article_published_time":"2015-02-09T07:41:00+00:00","article_modified_time":"2019-09-19T13:04:58+00:00","author":"Team Lhotse","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Team Lhotse","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/#article","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/"},"author":{"name":"Team Lhotse","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d"},"headline":"Image not visible on Dialog reopen in AEM","datePublished":"2015-02-09T07:41:00+00:00","dateModified":"2019-09-19T13:04:58+00:00","mainEntityOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/"},"wordCount":407,"commentCount":0,"publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"articleSection":["Dialog image not visible in aem","Dialog image not visible on dialog reopen in aem","Dialog image tab problem","Image not displayed on dialog reopen in aem","image not visible on dialog reopen in cq5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/","url":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/","name":"Image not visible on Dialog reopen in AEM - AEM Blog | Lhotse Technologies","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#website"},"datePublished":"2015-02-09T07:41:00+00:00","dateModified":"2019-09-19T13:04:58+00:00","breadcrumb":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lhotsetechnologies.com\/blog\/image-not-visible-on-dialog-reopen-in-aem\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lhotsetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Image not visible on Dialog reopen in AEM"}]},{"@type":"WebSite","@id":"https:\/\/lhotsetechnologies.com\/blog\/#website","url":"https:\/\/lhotsetechnologies.com\/blog\/","name":"AEM Blog | Lhotse Technologies","description":"","publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization","name":"AEM Blog | Lhotse Technologies","url":"https:\/\/lhotsetechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","contentUrl":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","width":539,"height":172,"caption":"AEM Blog | Lhotse Technologies"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d","name":"Team Lhotse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Team Lhotse"},"url":"https:\/\/lhotsetechnologies.com\/blog\/author\/team-lhotse\/"}]}},"_links":{"self":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":2,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}