Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Keir 1 post 21 karma points
    Aug 07, 2012 @ 19:18
    Keir
    0

    How to populate image meta tag

    I am currently using umbraco:Items to populate meta tages in my template header.

    <umbraco:Item field="shareImage" textIfEmpty="&lt;meta
 property=&quot;og:image&quot; 
content=&quot;http://www.mysite.com/images/fb_like_logo.png&quot; 
/&gt;" insertTextBefore="&lt;meta property=&quot;og:image&quot; content=&quot;" insertTextAfter="&quot; /&gt;" convertLineBreaks="true" runat="server" />

    This uses a text page field to populate the tag. Is it possible to populate the tag using the URL from a Media Picker property? On inserting the page field I can only get the image id number.

     

    Copy Link
  • Dan 1288 posts 3942 karma points c-trib
    Aug 07, 2012 @ 20:52
    Dan
    1

    Hi Keir,

    It would be neater doing this with a macro I reckon.  Create a macro (here, I'm using XSLT) called 'metaImage' with a macro parameter with an alias of 'imageId' and type 'number'.  Then put something like this in your macro to render the path of the image in a meta tag:

    <xsl:variable name="domainName" select="concat('http://',umbraco.library:RequestServerVariables('HTTP_HOST'))"/>
    <xsl:variable name="imageId" select="number(/macro/imageId)"/>

    <xsl:template match="/">
      <xsl:if test="$imageId > 0">
        <xsl:variable name="mediaNode" select="umbraco.library:GetMedia($imageId, 0)" />
        <xsl:if test="$mediaNode/umbracoFile">
          <meta property="og:image" content="{concat($domainName,$mediaNode/umbracoFile)}"/>
        </xsl:if>
      </xsl:if>
    </xsl:template>

    Then just call this macro in your template using advanced macro parameter syntax to pass the media id to your macro like this:

      <umbraco:Macro imageId="[#yourImagePropertyAlias]" Alias="MetaImage" runat="server"></umbraco:Macro>

    Much cleaner than trying to get it formatted in the template directly, it should render something like this in the browser:

    <meta property="og:image" content="http://localhost:37715/media/83/test1.jpg" />
    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies