gr36
March 28, 2021, 3:10pm
1
I’ve been struggling with the Opengraph information shared with the mb plugin .
I’m either going mad or the only way it works if for the image to be in an <img>
tag but doesnt work if the post is in markdown using ![](url)
My head meta data is as follows:
<!-- Open Graph -->
<meta name="twitter:card" content="summary" />
<!-- Titles -->
{{ with .Site.Params.title }}
<meta property="og:site_name" content="{{ . }}" />
{{ end }}
{{ with .Title }}
<meta name="twitter:title" content="{{ . }}" />
<meta property="og:title" content="{{ . }}" />
{{ else }}
<meta name="twitter:title" content="{{ .Site.Title }}" />
<meta property="og:title" content="{{ .Site.Title }}" />
{{ end }}
<meta name="twitter:description" content="{{ .Summary }}" />
<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
<meta property="og:type" content="{{ with .Title }}article{{ else }}website{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />
<!-- Images -->
{{ with .Params.images }}
{{ range first 6 . }}
<meta property="og:image" content="{{ . | absURL }}" />
<meta name="twitter:image" content="{{ . }}" />
{{ end }}
{{ else }}
<meta property="og:image" content="https://www.gr36.com/uploads/2021/a2b5ba7293.png" />
<meta name="twitter:image" content="https://www.gr36.com/uploads/2021/a2b5ba7293.png" />
{{ end }}
{{ with .Params.audio }}
<meta property="og:audio" content="{{ . }}" />
{{ end }}
<!-- Video -->
{{ with .Params.videos }}
{{ range first 1 . }}
<meta property="og:video" content="{{ . | absURL }}" />
{{ end }}
{{ end }}
Is there a way to make this work, or am I missing something?
gr36
March 28, 2021, 7:22pm
3
At least I’m not going crazy!
1 Like
Just to flesh this out, a parameter dump from a post with an image wrapped in a light box shortcode:
<!--
$.Params = {
categories: [Stream of Consciousness Personal Favorites Artsy Fartsy]
date: 2021-03-27 19:33:00 -0700 -0700
draft: false
guid: http://Moondeer.micro.blog/2021/03/27/hashtag-still-the.html
iscjklanguage: false
lastmod: 2021-03-27 19:33:00 -0700 -0700
layout: post
microblog: true
publishdate: 2021-03-27 19:33:00 -0700 -0700
type: post
url: /2021/03/27/hashtag-still-the.html
}
-->
versus a parameter dump from a post with an img
tag:
<!--
$.Params = {
categories: [Programming]
date: 2021-03-28 18:46:47 -0700 -0700
draft: false
guid: http://Moondeer.micro.blog/2021/03/28/i-see-what.html
images: [https://moondeer.blog/uploads/2021/fde86aaee6.jpg]
iscjklanguage: false
lastmod: 2021-03-28 18:46:47 -0700 -0700
layout: post
microblog: true
photos: [https://moondeer.blog/uploads/2021/fde86aaee6.jpg]
publishdate: 2021-03-28 18:46:47 -0700 -0700
type: post
url: /2021/03/28/i-see-what.html
}
-->
versus a parameter dump from a post with a markdown image:
<!--
$.Params = {
date: 2021-03-29 08:34:57 -0700 -0700
draft: false
guid: http://Moondeer.micro.blog/2021/03/29/this-post-will.html
iscjklanguage: false
lastmod: 2021-03-29 08:34:57 -0700 -0700
layout: post
microblog: true
publishdate: 2021-03-29 08:34:57 -0700 -0700
type: post
url: /2021/03/29/this-post-will.html
}
-->
So as it stands an img
tag is required for front matter pickup (I remember back when I was still using Twitter I was dropping an img
tag near the top of the post that I wanted the cards to pick up and hiding it on my page via CSS).
gr36
March 29, 2021, 6:22pm
5
I wouldn’t mind so much but publishing from Ulysses does so in markdown with no way to change it.
I thought the tag would be pulled from the HTML published page?
The tag, when pulling from Params, is happening at the same time the HTML is being generated. So the <img>
does not exist when the template is being processed.
This is all just another vote for some kind of frontmatter access on custom themes, at least.
1 Like
That is what I assumed to be happening.
This kinda thing (as well as shortcodes and HTML) is why the Ulysses support is cool … but doesn’t effect my workflow.
kumar
August 4, 2021, 9:07am
9
Has this problem been fixed of the og plugin with the Markdown og code?
And can we use tag also while writing in Markdown to make sure the image goes in the og tag via this plugin without such errors?