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.
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
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.
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.
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 !!
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.
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 ā³
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}}
Yes, Iāve yet to try it out myself, but I described how to do so here:
