Applying code-injection through internal tags do not appear in site

Developer help
1
  • What’s your URL? About
  • What version of Ghost are you using? Latest

And

  • How was Ghost installed and configured?
    Ubuntu Install on Debian

  • What Node version, database, OS & browser are you using?
    Node 16.16.0, MySQL, Debian, Chrome

  • What errors or information do you see in the console?
    None

  • What steps could someone else take to reproduce the issue you’re having?
    Create an internal tag with a header code injection:

<script>
    addEventListener('DOMContentLoaded', (e) => {
        document.querySelector("h1.gh-article-title").hidden = true;
        document.querySelector("main").style.paddingTop = 0;
        document.querySelector(".gh-content.gh-canvas").style.marginTop = 0;
    });
</script>

And being on the Journal theme this would remove the header completely and its padding and margins.

However in my case, the code injection is not applied and the header persist.

2

I just tried manually running document.querySelector("h1.gh-article-title").hidden = true; in my browser console, and the 'About" disappeared appropriately. So I suspect that your event listener isn’t firing. Can you add a console.log('triggered!') into the code injection, to get some more information about whether it’s firing?

The example I see online that looks like what you’re trying to do has this:…

window.addEventListener('DOMContentLoaded', (event) => {
# do stuff })

So if it isn’t firing, try attaching the event listener to the window?

2 Likes
3

It’s not that the event is not firing–and I’ve tried console.log and it doesn’t go through. It’s that the injection is not appearing in the tag at all for some reason although the tag is added and configured properly.

image
image1109×421 20.4 KB

image

4

Meaning you do or don’t see “triggered” in the console log?

5

This took me a second to understand, but here’s the story:

Those code injection fields are for the tag pages themselves, not for posts or pages that have those tags. That means that a code injection for a public tag will run on /tag/slug but not on a post with that slug. For this reason, your approach won’t work.

However, there are other approaches.

  1. Most themes will already include all tags as classes on a post using Ghost’s post class. For a private tag of test, it’ll output a class of hash-tag-test, which you can then target with CSS.

  2. Theme level: Edit your theme to conditionally apply classes based on the presence of the private/internal tag.

{{! post.hbs }}
<article class="card {{#has tag="#test"}}card-extra-styling{{/has}}> ...
2 Likes