Hi experts,
I experience this annoying behavior every time I want to link a Community post on LinkedIn: the preview displays the avatar of the author instead of the cover image.
Do you know how to overcome this undesired behavior? Do I miss something?
Thanks for any hints,
Karolina
Solved! Go to Solution.
Hello @karolinalinda,
This is how we are dealing with it in our community:
<#assign images = (liql('SELECT large_href FROM images WHERE messages.id = "${page.context.message.uniqueId}"').data.items) />
<#if images?? && (images?size gt 0) >
<#assign img_url = images[0].large_href />
<#assign lengthOfDomain = page.context.message.webUi.url?index_of("/t5") />
<#assign communityDomain = page.context.message.webUi.url?substring(0,lengthOfDomain) />
<#assign message_img_url = communityDomain + img_url />
<meta property="og:image" content="${message_img_url}" />
<#else>
<meta property="og:image" content="${asset.get("/html/assets/<some default image>")}"/>
</#if>
The above code should be added to the head.ftl file.
Code Explanation: First we are pulling the image from the message body and check if any image exist, then use it otherwise use a default image from assets.
Let me know if that helps or we can connect sometime if you want me to replicate same on your community.
Regards,
Abhishek Gupta
Thank you, Abhishek - we'll test it! 🙂
Hello @stehrani71
Yes, that's in studio. Exact location is as follows:
Studio > Community Style > Wrapper
Here choose your community skin and on the right hand side you can see Page Head Bottom Content (head.ftl).
Hi Abhisek,
I tried to implement this script on our staging site, but i get an error:
InvalidReferenceException:The following has evaluated to null or missing: ==> page.context.message [in template "HeadBottomCustom" at line 5, column 79]
Do you have any idea what could go wrong?
Hello @nbalogh
Can you update the code with the following:
<#if page.context.message??>
<#assign images = (liql('SELECT large_href FROM images WHERE messages.id = "${page.context.message.uniqueId}"').data.items) />
<#if images?? && (images?size gt 0) >
<#assign img_url = images[0].large_href />
<#assign lengthOfDomain = page.context.message.webUi.url?index_of("/t5") />
<#assign communityDomain = page.context.message.webUi.url?substring(0,lengthOfDomain) />
<#assign message_img_url = communityDomain + img_url />
<meta property="og:image" content="${message_img_url}" />
<#else>
<meta property="og:image" content="${asset.get("/html/assets/<some default image>")}"/>
</#if>
</#if>
Or
you can add the below code for the specfic pages like ForumTopicPage, BlogArticlePage, ForumPageCategoryPage, ViewProfilePage, UserBadgesPage etc. where you have message object so that opengraph code will not execute over non-message page.
<#assign images = (liql('SELECT large_href FROM images WHERE messages.id = "${page.context.message.uniqueId}"').data.items) />
<#if images?? && (images?size gt 0) >
<#assign img_url = images[0].large_href />
<#assign lengthOfDomain = page.context.message.webUi.url?index_of("/t5") />
<#assign communityDomain = page.context.message.webUi.url?substring(0,lengthOfDomain) />
<#assign message_img_url = communityDomain + img_url />
<meta property="og:image" content="${message_img_url}" />
<#else>
<meta property="og:image" content="${asset.get("/html/assets/<some default image>")}"/>
</#if>
Regards,
Abhishek Gupta
Welcome to the Technology board!
Curious about our platform? Looking to connect on social technology? You've come to the right place!