Using the Admin API (html not lexical) I update a post with the following:
<html content>
<img src="https://domain.ghost.io/content/images/2024/09/sample-image.jpg"
data-pin-url="https://test.curtisduggan.com"
data-pin-media="https://domain.ghost.io/content/images/2024/09/sample-image.jpg"
data-pin-description="Test Curtis Duggan"/>
Matching the format explained in this integration documentation:
However when I then go and inspect the element it has been stripped of the pin info:
<img src="https://domain.ghost.io/content/images/2024/09/sample-image.jpg" class="kg-image" alt="" loading="lazy">
Am I missing something about adding the img tag html (with pinnacle attributes) via the Admin API in a way where Ghost will not strip away the things I was trying to add?
Is my assumption that Ghost is stripping something away correct or am I missing some other reason I am not getting my desired output?
I think your problem is that you’re loading the post content into the API as HTML, which Ghost interprets in a lossy way.
Instead, I’d try putting the image into an HTML card, which should coerce Ghost to leave it alone.
I’m uploading (updating) from a Mac App, via Admin API.
I’m a little confused about the syntax.
Right now I am hoping to just upload HTML.
Is there HTML syntax for an “HTML Card”.
how does one signify “card begins here, card ends here” via the API?
Is there Lexical syntax? (which would at least be a solution but would cause me to have completely rethink this function)
Raki
September 11, 2024, 6:50pm
5
According to Ghost doc , you can insert HTML card like this:
1 Like
I’ve ensured this as the data uploaded:
<!--kg-card-begin: html-->
<img src="https://example.com/images/content/example-image.jpg"
data-pin-url="https://yourblog.com/your-post"
data-pin-media="https://example.com/example-image.jpg"
data-pin-description="Your Pinterest image description goes here"/>
<!--kg-card-end: html-->
and when I check what makes it into the post,
It’s this:
<!--kg-card-begin: html-->
<img src="https://example.com/images/content/example-image.jpg">
<!--kg-card-end: html-->
It’s crazy how hostile the API seems to be towards its own stated Ghost-Pinterest Integration syntax in the docs…
Giving up on this for now.
Raki
September 11, 2024, 8:47pm
7
img. Try the following code and ensure you include source=html query at the end of the API request. It works for me.
<!--kg-card-begin: html--><img src='https://example.com/images/content/example-image.jpg' data-pin-url='https://yourblog.com/your-post' data-pin-media='https://example.com/example-image.jpg' data-pin-description='Your Pinterest image description goes here' alt='test'/><!--kg-card-end: html-->
1 Like
Thanks!
I actually got it solved with your help.
However, I am wondering if the actual integration is broken.
Meaning the Pinterest image is there with all the metadata — I got that through!
But the Pinterest Chrome extension only seems to pick up some of the data when you save the pin.
So here is the final hurdle:
the test page
The html:
notice data-pin-url is a test url: https://curtisduggan.com
I finally got the full syntax to populate through losslessly! Thanks everyone.
But:
When I pin the image.
Expected behaviour (I thought) was that the URL would be https://curtisduggan.com , that’s the point of data-pin-url — to set the URL of the pin, right?
But it defaults to app-store-connect.ghost.io , just the top level domain of the blog.
So either
My HTML syntax is still somehow not right
The Chrome pin extension is not working
I am misunderstanding the functionality and expecting something I shouldn’t
And yes, I do have the code injection in header enabled to make this work:
Expected Behaviour reference:
Raki
September 12, 2024, 6:43pm
9
I don’t have much clue about this, but the code you are injecting is right according to the doc. It seems that Pinterest doesn’t work this way.
A good debugging step might be to create as an html card in the ghost editor, just to verify that the behavior is broken in ghost, not an api side effect.
Don’t be frustrated. Welcome to the world of code, even missing a comma can break everything.
