Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to use one component dialog fields in page component html files

Avatar

Level 2

Hi All,

 

we have 100 + information pages - for which we have created a information component which will have
thumbnail image , title and a brief description including like views and share button where
user can share this information content on WhatsApp, fb & email. If user share's this information on WhatsApp then in WhatsApp chat we need to show title description and image like below screenshot

(for example I have shared bit bucket URL which)

 

sams16001423_1-1613631736501.png

 

 

so currently if I share any information page on WhatsApp these above three properties are coming from page properties  section so I have customized and added new thumbnail property(PFB screenshot) where we can author an image I'm reading image property along with title & description in metadata.html which all above 3 are displaying after sharing information page on WhatsApp like exactly same as bit bucket sample Image.

sams16001423_2-1613632014366.png

 

metadata.html sample code

sams16001423_3-1613632387389.png

so instead of authoring one image in component and authoring another image in page properties section , I want to use only one Image which is authored on page in the information component and i want to use that in  metadata.html (here calling sling model of info component in metadata.html and calling image is not working)as a result it will be visible when we share information page on WhatsApp .

or

suggest if you have any better approach like use all these three from HTML and write logic in JS where share button functionality & WhatsApp API call code is written

Thanks in advance

 

Thanks,

Sam

1 Accepted Solution

Avatar

Correct answer by
Level 8

@sams16001423  I suggest you check this requirement with the business, authoring one image in the component and authoring another image in the page properties section because sometimes the business wants to author a separate image for the SEO purpose I mean here for social sharing. If that is the requirement then you need to give high priority to the image which is authored in the component. if the image is not authored in the component then get the image from the page properties.

I feel og:tags are sufficient to meet this requirement but, if you want to have greater control then you need to go with the js approach. on click of the share button, you need to get the image path, title, description, etc and pass it as a query parameter to the social share links.

If you want to author only one image then you can use OOTB thumbnail image functionality,

 

 

 

 

View solution in original post

2 Replies

Avatar

Community Advisor

So is it possible to use the page properties image as thumbnail image in your information component

Avatar

Correct answer by
Level 8

@sams16001423  I suggest you check this requirement with the business, authoring one image in the component and authoring another image in the page properties section because sometimes the business wants to author a separate image for the SEO purpose I mean here for social sharing. If that is the requirement then you need to give high priority to the image which is authored in the component. if the image is not authored in the component then get the image from the page properties.

I feel og:tags are sufficient to meet this requirement but, if you want to have greater control then you need to go with the js approach. on click of the share button, you need to get the image path, title, description, etc and pass it as a query parameter to the social share links.

If you want to author only one image then you can use OOTB thumbnail image functionality,