Viable Open Graph image URL

jaredigital · 2023-06-05 21:37:28

I’ve search around and found what appeared to be some solutions, or promising directions, but I haven’t been able to get them to work for me. This is how I’m constructing my image tag:

<meta property="og:image" content="<txp:image_url /><txp:article_image /></txp:image_url>">

The output is almost there — I just can’t figure out how to 1) get rid of the surrounding img src tag and get the image URL to format correctly (all the slashes are removed):

<meta property="og:image" content="img src=" https: www.jaredigital.com image my-article-image.jpg" alt>

Any ideas? I’ve tried tag escaping, trying o get variables to work, but nothing sticks. This seems like an inordinately difficult problem for what seems like a simple thing.

bici · 2023-06-06 02:49:59

Jared – sorry i cannot offer any help or solutions … i just want to say hello and let you know i love your website.

Pat64 · 2023-06-06 04:19:57

<meta property="og:image" content="<txp:image_url /><txp:article_image /></txp:image_url>">

Did you wrap your <txp:image_url /> around a <txp:images> tag?

<meta property="og:image" content="<txp:images><txp:image_url /><txp:article_image /></txp:image_url></txp:images>">

colak · 2023-06-06 04:57:20

This works for me.

<txp:variable name="imgmain"><txp:images break="" id='<txp:custom_field name="article_image" />'><txp:image_info type="id" /></txp:images></txp:variable>
<meta property="og:image" content="<txp:images break="" id='<txp:variable name="imgmain" />'><txp:image_url /></txp:images>">
<meta property="og:image:width" content="<txp:images break="" id='<txp:variable name="imgmain" />'><txp:image_info type="w" /></txp:images>">
<meta property="og:image:height" content="<txp:images break="" id='<txp:variable name="imgmain" />'><txp:image_info type="h" /></txp:images>">
<meta property="og:image:alt" content="<txp:images break="" id='<txp:variable name="imgmain" />'><txp:image_info type="alt" /></txp:images>">

jaredigital · 2023-06-06 13:55:31

I appreciate the responses!

Patrick — That’s an approach I hadn’t tried yet! Unfortunately, it resulted in the same malformed HTML output that I already have.

Yiannis — Interesting! I’ve seen others try to solve this issue with variables, but not as elegantly as this. But, for me, this is returning all empty content values in the HTML. It looks like I’d need to be using a custom field for my article image for this approach to work, though, which may explain why it’s coming up empty.

Bummer. :(

Last edited by jaredigital (2023-06-06 13:56:48)

Bloke · 2023-06-06 15:51:57

I haven’t delved into this explicitly but note that <txp:article_image /> outputs a full <img src=...> tag by default, so if all you’re after is the metadata from the image to construct the og tags, you’ll need to bypass article image and build the image content yourself, a bit like Yiannis suggests.

Bloke · 2023-06-06 16:04:53

Here’s a potentially more succinct version of what colak posted that also caters for the fact that you may not have an article image. By default <txp:images> will return every image if no article image is set, which is not usually something you want to happen on a production site:

<if::article_image>
    <txp:images>
        <meta property="og:image" content="<image::url />" />
        <meta property="og:image:width" content="<image::info type="w" />" />
        <meta property="og:image:height" content="<image::info type="h" />" />
        <meta property="og:image:alt" content="<image::info type="alt" />" />
    </txp:images>
</if::article_image>

EDIT: If you need to encode the slashes, you can mess around with the escape attribute; a global attribute applicable to all tags, so you can add it wherever needed, e.g. <image::url escape="html" />

Last edited by Bloke (2023-06-06 16:12:25)

jaredigital · 2023-06-06 20:06:23

Bloke wrote #335484:

Here’s a potentially more succinct version of what colak posted that also caters for the fact that you may not have an article image.

I thought for sure that was going to work, but it looks like TXP hits the <txp:images> tag, spits out an img src at the top of the <body> and proceeds to ignore everything else in that code block. 😭 Granted, the image URL is an actual, properly formed URL, so… progress?

Bloke · 2023-06-06 20:55:45

jaredigital wrote #335485:

it looks like TXP hits the <txp:images> tag, spits out an img src at the top of the <body> and proceeds to ignore everything else in that code block.

Weird, it works flawlessly for me on my test site. Spits out the meta tags in the right place and nothing extraneous. So there’s likely to be something else at play. A few avenues to explore:

Check your site in debugging mode to make sure there are no stray open/closing tag mismatches.
Make sure your template is doing what you expect and is using the right Page/Forms from the right theme. Is your default template, for example, outputting the img src via its own <txp:article_image /> tag?
Are you putting the above code in a Page/Form? If you’re putting it in an article, Textile will be mangling it. Similarly, if you’re outputting that block inside any container that has escape="textile" around it, then it’ll get mashed by the Textile processor and may spit out weird stuff.

Textpattern CMS

Textpattern CMS support forum

#1 2023-06-05 21:37:28