Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

jaredigital
Member
From: Texas
Registered: 2004-10-26
Posts: 26
Website

Viable Open Graph image URL

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.

Offline

#2 2023-06-06 02:49:59

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,087
Website Mastodon

Re: Viable Open Graph image URL

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


…. texted postive

Offline

#3 2023-06-06 04:19:57

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,626
GitHub Twitter

Re: Viable Open Graph image URL

<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>">

Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

#4 2023-06-06 04:57:20

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,060
Website GitHub Mastodon Twitter

Re: Viable Open Graph image URL

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>">

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#5 2023-06-06 13:55:31

jaredigital
Member
From: Texas
Registered: 2004-10-26
Posts: 26
Website

Re: Viable Open Graph image URL

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)

Offline

#6 2023-06-06 15:51:57

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,408
Website GitHub

Re: Viable Open Graph image URL

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#7 2023-06-06 16:04:53

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,408
Website GitHub

Re: Viable Open Graph image URL

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#8 2023-06-06 20:06:23

jaredigital
Member
From: Texas
Registered: 2004-10-26
Posts: 26
Website

Re: Viable Open Graph image URL

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?

Offline

#9 2023-06-06 20:55:45

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,408
Website GitHub

Re: Viable Open Graph image URL

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:

  1. Check your site in debugging mode to make sure there are no stray open/closing tag mismatches.
  2. 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?
  3. 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.

The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

Board footer

Powered by FluxBB