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?

1 Like

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

5 Likes

For anybody thinking about implementing the very useful code/functionality that Kevin described above, you might want to make a minor change to the usage of data-ad-placeholder. Reason being, I noticed the other day that the block being called with <div data-ad-placeholder="xxx"> had stopped appearing, and my first guess as to why was correct – uBlock Origin. Likewise, my guess as to what specifically was the culprit was correct as well – the data-ad portion. I renamed both instances of data-ad-placeholder to placeholder-insertion (and had already not been using the name ads-1), resulting in the block reappearing.

3 Likes

Thanks y’all! This worked great, I just started adding a global CTA to the bottom of all my articles and this trick lets me keep that timely and edit the CTA easily in the code injection settings, as suggested. Stop Selling Time ⏳

2 Likes

This is awesome!! Thanks everyone involved.

Is there a way to show this content for specific member types? Eg. If you wanted to show ads to ‘free members’ and hide for ‘paid members’

Is it something like this

‘{{#if @member “free”}}
html content
{{else}}


{{/if}}`

Yes, I’ve yet to try it out myself, but I described how to do so here:

1 Like