Formatting of titles (Solved -- new snippet!)

Using Ghost
1

I see this has been brought up before, but I think it’s worth bringing up again. :slight_smile:

There have been more than a few times that I have wanted or needed to do some sort of formatting in a post title. Since the output of the editor is HTML, I’m not sure why this is hard to add to the editor. Thoughts?

2

Bruce, titles are sort of ‘special’. They tend to show up on index pages, in the middle of cards, etc. What level of editing ability do you need? Is it just bold and italic, or are you wanting links and bullets and…?

Titles also show up in the API responses (including places that don’t take HTML), in the RSS feed, in social shares, and are used to generate the slug. There’s more going on under the hood that would need rethinking, I suspect…

Possible workaround (will need some tweaking of the theme):
Add some CSS that hides the ‘real’ title (but fill it in, minus styling, please!)
Start the page body with your nicely formatted title, as a heading.
But… the nice title will be an H2, which might confuse the googlebot.
But the Googlebot parses javascript, so consider using javascript to copy the ‘nicer’ title into the H1, and then you don’t need to hide it?

I dunno… thoughts.

3

Cathy – Some excellent thoughts, many of which I hadn’t considered. If this were Wordpress, I would assume there would be a plugin that would provide a text box for “Real Title” and one for “Visible Title” – or something like that.

As far as I know, there’s no way to change the variables in the sidebar. It might be possible to write some sort of code injection for those times when you need formatting in the title. I don’t need it often at all – but when I do, it’s frustrating not to be able to include it.

Thanks for the response.

4

What about just a little javascript that fixes the title, dropped in that post’s code injection? (Won’t fix it on the index page, however.)

let title = document.querySelector('h1.gh-title-or-what-your-site-calls-it')
if (title) { title.innerHTML = "Bruce wants <em>italics</em> for this title" }
5

Glad to report that with the inestimable help of Cathy “Ghost Goddess” Sarisky, this problem has been solved.

Here’s the code:

<script>
let mytitle = document.querySelector('.c-topper__headline');
if (mytitle) { mytitle.innerHTML = "Bruce wants <em>italics</em> for this title" };
</script>

Put that in code injection in the FOOTER (not header), and it should work just fine – as long as you change the selector for your theme’s title CSS and set the innerHTML to something else. :wink:

1 Like