Add Partial inside of content

Hi all, i realized hardcoding my ad code into my posts is a pain when you need to make a change site-wide. If only there were a way to add reuseable HTML blocks inside of a post.

Would it be possible to add a partial reference inside an HTML block? Or is there another better way?

Thanks,

Have you seen the snippets feature?

That is exactly what i’m looking for…except i cant figure out how to save my HTML block as a snippet. When I select my HTML block no snippet icon comes up. Only the edit icon. Also when i select other blocks like image or text i don’t see any “snippet” icon. Is this a functionality i need to enable somehow and not standard for ghost?

@mlolm what version of Ghost are you on? The feature was added in 3.37.0

3.32 could be why. Will update and post back here.

Done! Now I have the feature.

However, how do i edit snippets after they are created?

@Kevin I"m not sure if snippets can do what I need here.

What i want to achieve is a piece of HTML inside of a post that I can update across the entire site in the many instances it is used. From what I can tell on the limited information on snippets, its more like a static piece of code that you can insert. If I wanted to go back and edit that snippet, i would have to go back to where i inserted it and change it there. But what I need is to be able to change it across all places it was inserted with one edit. Hope i’m explaining this well enough…

Ah, ok, then snippets won’t do what you want there. Ghost doesn’t have any functionality for doing things like that server-side because content is stored and rendered as static html.

It sounds like you’d be better off adding a placeholder to your content, eg a html block containing <div data-ad-placeholder="ads-1"></div> or similar and then in your code injection footer having something like this:

<script>
document.querySelectorAll('[data-ad-placeholder="ads-1"]').forEach((elem) => {
     elem.innerHtml = "... your ad html ...";
});
</script>

That way any time you wanted to update what your ad content is you can edit the code injection from the admin area.

3 Likes

Hi,
I created gaspr.io a service that allows you to create “reusable” dynamic snippets for your posts. With Gaspr you can create a template (or in your case snippet). You then add the one line HTML card for that snippet into your posts. Any updates to the snippet will updates all posts containing it allowing you to change once and see it everywhere. If you need any help with it let me know

1 Like

Thank you charles, i think this is a very useful tool you have created for ghost. I have signed up for a trial but have some questions. Can I reach you directly? Thanks.

1 Like

Yes you can reach me at charles@gaspr.io or on Twitter [at]celoubao

@Kevin - Am I missing something? I copy/pasted this (from your reply above) into my site footer injection:

<script>
document.querySelectorAll('[data-ad-placeholder="ads-1"]').forEach((elem) => {
     elem.innerHtml = "... your ad html ...";
});
</script>

and this into an HTML card on a page:

<div data-ad-placeholder="ads-1"></div>

. . . but nothing appears on the page . . .

Please advise?

I had this same problem the other day. I was told by someone knowledgeable in JS that elem.innerHtml should be elem.innerHTML, and to make sure any classes used within the "... your ad html ..." portion use single quotes, not double quotes. That all worked for me, so perhaps see if any of that works for you as well.

1 Like

So, to sum up . . .

1. Paste this into your site’s Footer Code Injection:

<script>
document.querySelectorAll('[data-ad-placeholder="ads-1"]').forEach((elem) => {
     elem.innerHTML = "... your ad html ...";
});
</script>

(making sure any classes used within the "... your ad html ..." portion use single quotes, not double quotes.)

and then . . .

2. Paste this into an HTML card on a page:

<div data-ad-placeholder="ads-1"></div>

That way any time you want to update your content for that snippet (to apply to every instance all across your site) you can edit that snippet once in the Site Footer Code Injection from the admin area.

Thank you, @Kevin and @Stromfeldt !!

3 Likes