Forum Discussion

Inactive User's avatar
Inactive User
6 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...
Inactive User's avatar
Inactive User

VarunGrazitti Thank you, however, there are a few important questions unanswered on that page.

1. What about a default OG image if the user doesn't add any images

2. How to make each page have a different image taken from the (say, first) image included?

VarunGrazitti's avatar
VarunGrazitti
Boss
6 years ago

Inactive User - Try this custom code here, may help. Another option is to get in touch with the support to get a definitive answer.

  • Inactive User's avatar
    Inactive User
    6 years ago

    Thanks VarunGrazitti 

    I've been working on a custom component myself but this is helpful too! 

    I'll post it when finished.

     

    • pepitaK's avatar
      pepitaK
      Adept
      5 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? 

      • Inactive User's avatar
        Inactive User
        5 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>