Inject sentence in every post before body

Using Ghost
1

Hi everyone, how could one make the same sentence automatically show up in all posts (not on the homepage or pages) that would be center aligned and located below the featured image and above the first paragraph of the post?

2

Hello!
Yes, go to ghost admin then Advanced → Code injection → Site footer

Then use this simple javascript code:

  const quotes = [
    "Quote 1",
    "Quote 2",
    "Quote 3",
];

  function getRandomQuote() {
    return quotes[Math.floor(Math.random() * quotes.length)];
}

// Function to append a random quote after the specified HTML element
function appendRandomQuote() {
    // Get the figure element by class name
    const figureElement = document.querySelector('.gh-article-image');

    // Create a new paragraph element for the quote
    const quoteElement = document.createElement('p');

    // Set the text content of the paragraph to a random quote
    quoteElement.textContent = getRandomQuote();

    // Append the quote element after the figure element
    figureElement.insertAdjacentElement('afterend', quoteElement);
}

// Call the function to append a random quote
appendRandomQuote();
3

Thank you for providing this code.

4

No problem!
Have a good night ;)

5

When I copy and paste this code into the site footer via code injection, without changing the code, the code itself shows at the bottom of the website. What might I be doing wrong?

The sentence is aimed as a one-sentence text disclaimer with a hyperlinked text at the end of the sentence to show up only in posts (but not on the homepage or on pages).

6

You need to surround it with <script> and </script>

7

Thank you. Surrounding it with <script> and </script> results in nothing displaying. No code itself, no text from the quote, or anything else. What could be the reason?

8

I’ll guess there’s an error in the script. Is the site live somewhere that I can see it?

Or check the console log (F12 to open dev tools and then click the console tag) - there’s probably an informative error.

9

There are two errors, here they are:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

test/:225 Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentElement')
    at appendRandomQuote (test/:225:19)
    at test/:229:1
10

The reason for the errors is because there was no featured image in the test article.

11

Yep, the code looks to set figureElement, but if there isn’t one, it doesn’t work.

12

Yes, that’s true.

Like you say

that would be center aligned and located below the featured image and above the first paragraph of the post?

It’s injecting after featured image.

13

It works, thank you for helping me.