Gallery working in editor, won't show up in preview/post

[stormgrass]

Hello!

I’m running into a weird issue that’s left me stumped.

I’m automatically creating image posts by importing posts from my Pixelfed account, using n8n. It works fine with single image posts, but I’ve now tried to do the same with multiple image posts as well.

I’ve replicated the gallery card as described in the docs (Ghost Theme Features: The Editor - Documentation), and even though the post shows up fine in the editor after running the n8n script, when I go to either preview or post, the whole gallery, including the caption is gone.

To visiualize, here’s one of those posts as it shows up in the editor (above) and the way it looks in preview or when posted:

The text that does show up is part of the import, but below the </figure> tag.
So, basically, the entire gallery just disappears.

I’ve checked over and over whether I might’ve forgotten a closing tag, but to no avail.

Ghost version is 5.33.6, my theme is Alto 1.0.0

[Cathy_Sarisky]

Bit of a long shot, but any chance you’re running on Windows? There’s a bug that causes Windows not to correctly generate the css and js needed for the ‘cards’, likely including the gallery.

[stormgrass]

Thank you for the reply! Unfortunately (or fortunately, rather), not running on Windows. It’s a Ubuntu box within Cloudron.

[RyanF]

Are you able to share the page where this is happening? It sounds like the CSS/JS for the gallery isn’t being pulled in on the published site.

[stormgrass]

Yes! I’ve published the above page now: #photolog: February 05 2023

[RyanF]

Thanks for sharing! It doesn’t look like there’s any markup being rendered at all, which usually points to it being malformed.

If you create a gallery by hand, does it render correctly?

[stormgrass]

Thanks for having a look!
I’ve created galleries manually, and they always show up. Maybe it helps if I show you what I fed the Ghost node in n8n:

<figure class="kg-card kg-gallery-card kg-width-wide">
    <div class="kg-gallery-container">
        <div class="kg-gallery-row">    
            <div class="kg-gallery-image">
<img src="{{ $json["media_attachments"][0]["url"] }}" alt="{{ $json["media_attachments"][0]["description"] }}" loading="lazy" sizes="(min-width: 720px) 720px">
            </div>
            <div class="kg-gallery-image">
<img src="{{ $json["media_attachments"][1]["url"] }}" alt="{{ $json["media_attachments"][1]["description"] }}" loading="lazy" sizes="(min-width: 720px) 720px">
            </div>
        </div>
        <div class="kg-gallery-row">
            <div class="kg-gallery-image">
<img src="{{ $json["media_attachments"][2]["url"] }}" alt="{{ $json["media_attachments"][2]["description"] }}" loading="lazy" sizes="(min-width: 720px) 720px">
            </div>
            <div class="kg-gallery-image">
<img src="{{ $json["media_attachments"][3]["url"] }}" alt="{{ $json["media_attachments"][3]["description"] }}" loading="lazy" sizes="(min-width: 720px) 720px">
            </div>
        </div>
    </div>
        <figcaption>{{ $json["content"] }}</figcaption>
</figure>
<br />
<br />
---
<br />
<i>This image was pulled in from my <a href="{{ $json["uri"] }}">Pixelfed</a> to populate what I call the <a href="https://stormgrass.com/tag/photolog">Photolog</a>.</i>

[RyanF]

I don’t know how n8n works, but I’m guessing it’s using the Admin API, which is stripping out your HTML.

What if you wrap everything like this:

<!--kg-card-begin: html-->

your code 

<!--kg-card-end: html-->

Ghost Admin API Documentation

[stormgrass]

Wow, that did it! Thank you so much! I suspected something might have been stripped, but since it worked flawlessly with the single-post items, I thought it might have been something I missed.

[RyanF]

Dope. I like when it’s easy