Forum Discussion

Anonymous's avatar
Anonymous
7 years ago

How does social media select which image to preview as the OG image?

My understanding is that  In DISCUSSSIONS, and BLOGS the user must upload an image into the input area. The first one will be the OG image in Social media.   In BLOGS, you can also add the image t...
pepitaK's avatar
pepitaK
Adept
6 years ago

Inactive User 

Hello! I'm also trying to get cover photos to show up as og:images and ran into this discussion. How is the component going along? 

Anonymous's avatar
Anonymous
6 years ago

pepitaK Here's the component. It's a bit more complex than you might need but I've created it to give different OG defaults in different places. Hope this helps.

 

<#-- OPEN GRAPH -->
<#assign dam = 'https://www.jmp.com/content/dam/jmp/images/jmp-community/'/>
<#assign hasRun = false />
<#assign titleSubject = ""/>
<#function imgType imgPath >
    <#assign contentType = 'image/png'/>
    <#if imgPath?keep_after_last('.') == 'jpg' || imgPath?keep_after_last('.') == 'jpeg' >
        <#assign contentType = 'image/jpeg'/>
    </#if>
    <#if imgPath?keep_after_last('.') == 'svg'>
        <#assign contentType = 'image/svg'/>
    </#if>
    <#return contentType/>
</#function>

<#macro setOGProps type>
    <#if hasRun == true>
        <#return />
    </#if>
    <#assign hasRun = true />
<!-- set OGProps type ${type} -->
    <#if type == 'topic'>
        <#assign myId = "${page.context.thread.topicMessage.uniqueId}">
        <#assign titleSubject = page.context.thread.topicMessage.subject />
    </#if>
    <#if type == 'message'>
        <#assign myId = "${page.context.message.uniqueId}">
        <#assign titleSubject = page.context.message.subject />
    </#if>

    <!-- MyId ${myId} -->
    <#assign msgQuery = "SELECT * FROM messages WHERE id='${myId}'"/>
    <#assign msgs =  rest("2.0", "/search?q=" + msgQuery?url + "&restapi.response_style=view").data.items![] />

    <#if msgs?? && msgs[0]?? && msgs[0].cover_image??>
        <!-- msgs cover image OK -->
        <#assign ogImgUrl=msgs[0].cover_image.large_href />
    <#else>
        <#assign imgQuery = "SELECT * FROM images WHERE messages.id='${myId}'"/>
        <#assign images = rest("2.0", "/search?q=" + imgQuery?url + "&restapi.response_style=view").data.items![] />
        <#if images??>
            <!-- images exist? ${images???c} -->
            <#if images?size gt 0>
                <!-- images size ${images?size} -->
                <#if images[0]??>
                    <#if images[0].large_href??>
                        <!-- image large_href -->
                        <#assign ogImgUrl=images[0].large_href />
                    <#else>
                        <!-- image original_href -->
                        <#assign ogImgUrl=images[0].original_href />
                    </#if>
                </#if>
            <#else>
                <#assign ogImgUrl="https://www.jmp.com/content/dam/jmp/media/JMP-Open-Graph-Default.jpg"/>
            </#if>
        </#if>
    </#if>

    <!-- PAGE / THREAD OPEN GRAPH CONTENT -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@JMP_software" />
    <meta property = "og:title" content = "${titleSubject}"/>
    <meta property = "og:image" content = "${ogImgUrl}"/>
    <meta property = "og:image:type" content = "${imgType(ogImgUrl)}"/>
    <meta property = "og:url" content = "${msgs[0].view_href}"/>
    <meta property = "og:description" content = "${msgs[0].subject}"/>
    <meta property = ”og:type” content = ”website”/>
    <meta property = "og:image:width" content = "1200"/>
    <meta property = "og:image:height" content = "630"/>
</#macro>

<#macro setOGMisfits>
    <!-- CATEGORY OPEN GRAPH CONTENT -->
    <#assign hasRun = true />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@JMP_software" />
    <meta property = "og:title" content = "${page.content.body.title}"/>
    <meta property = "og:url" content = "${coreNode.webUi.url}"/>
    <meta property = "og:description" content = "${coreNode.description}"/>
    <meta property = ”og:type” content = ”website”/>
    <meta property = "og:image:width" content = "1200"/>
    <meta property = "og:image:height" content = "630"/>
</#macro>

<#if env.context.message??>
    <!-- env.context.message -->
    <@setOGProps type='message'></@setOGProps>

</#if>

<#if page.context.message??>
    <!-- page context message -->
    <@setOGProps type='message'></@setOGProps>
</#if>

<#if page.context.thread??>
    <!-- page context thread message -->
    <@setOGProps type='topic'></@setOGProps>
</#if>

<#if env.context.thread??>
    <!-- env context thread message -->
    <@setOGProps type='topic'></@setOGProps>
</#if>

<#if page.name == 'CommunityPage'>
    <@setOGMisfits ></@setOGMisfits>
    <meta property = "og:image" content = "https://community.jmp.com/t5/html/assets/jmp-community-social.png"/>
    <meta property="og:image:type" content="image/png" />
</#if>

<!-- CORENODE ID ${coreNode.id} -->

<#if coreNode.id  == 'add-ins'>
    <!-- add-ins -->
    <@setOGMisfits ></@setOGMisfits>
    <meta property = "og:image" content = "https://community.jmp.com/t5/html/assets/banner_green_add-ins.png"/>
    <meta property="og:image:type" content="image/png" />
</#if>
<#if coreNode.id  == 'scripts'>
    <!-- scripts -->
    <@setOGMisfits ></@setOGMisfits>
    <meta property = "og:image" content = "https://community.jmp.com/t5/html/assets/banner_purple_scripts.png"/>
    <meta property="og:image:type" content="image/png" />
</#if>
<#if coreNode.id  == 'sample-data'>
    <!-- sample data -->
    <@setOGMisfits></@setOGMisfits>
    <meta property = "og:image" content = "https://community.jmp.com/t5/html/assets/banner_red_sample_data.png"/>
    <meta property="og:image:type" content="image/png" />
    <meta property = "og:image:width" content = "1200"/>
    <meta property = "og:image:height" content = "630"/>
</#if>



<#if hasRun == false && page.name =="CategoryPage" || page.name == "BlogPage"  || page.name="ForumPage" || page.name="TkbPage">
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@JMP_software" />
    <meta property = "og:title" content = "JMP ${page.content.body.title}"/>
    <meta property = "og:url" content = "${coreNode.webUi.url}"/>
    <meta property = ”og:type” content = ”website”/>
    <meta property = "og:description" content = "${coreNode.description}"/>
    <#assign ogImgUrl=dam+"jmp-og-${coreNode.id}.jpg"/>
    <#if coreNode.id == 'discussions'>
        <#assign ogImgUrl=dam+"jmp-og-discussions.jpg"/>
    <#elseif coreNode.id == 'FileExchange'>
        <#assign ogImgUrl=dam+"jmp-og-filexchange.jpg"/>
    <#elseif coreNode.id  == 'jsl-cookbook-tkb'>
        <#assign ogImgUrl=dam+"jmp-og-cookbook.jpg"/>
    <#elseif coreNode.id  == 'jmp-wish-list'>
        <#assign ogImgUrl=dam+"jmp-og-wishlist.jpg"/>
    <#elseif coreNode.id  == 'Blogs'>
        <#assign ogImgUrl=dam+"jmp-og-blogs.jpg"/>
    <#elseif coreNode.id  == 'discovery'>
        <#assign ogImgUrl=dam+"ds-social-us.jpg"/>
    <#elseif coreNode.id  == 'JMP_Academic'>
        <#assign ogImgUrl=dam+"jmp-og-academic.jpg"/>
    <#elseif page.name  == 'GroupPage'>
        <#assign ogImgUrl=dam+"jmp-og-groups.jpg"/>
        <#elseif page.name = "TkbPage">
        <#assign ogImgUrl = dam+"JMP-Open-Graph-Default.jpg"/>
    <#else>
        <#assign ogImgUrl=dam+"jmp-og-${coreNode.id}.jpg"/>
    </#if>

    <meta property = "og:image" content = "${ogImgUrl}"/>
    <meta property = "og:image:type" content = "${imgType(ogImgUrl)}"/>
    <meta property = "og:image:width" content = "1200"/>
    <meta property = "og:image:height" content = "630"/>


</#if>