Using Post Tags to Change Post Title Size

Themes
1

Hi,

I’ve seen the use of the Tags box in Post Settings to assign different header sizes for the post:
Screenshot 2024-02-06 at 17.49.58
Can someone explain how this is being used to alter the CSS, or point to documentation on using tags in this way?

Many thanks!
Josh

2

There are a few concepts that come together to achieve something like that.

In a Ghost theme, every post is displayed using the “post context”. This context holds all the information that is stored on a post (or technically, the one that is publicly available).

Within this post context, you can then use the #has-helper to ask Ghost whether a certain Tag is applied.

If that is the case, you can then apply a CSS class to the title.

Something like this:

{{#post}}
  <h1 class="title {{#has tag="#title-large"}}title-large{{/has}}">
    This is a large title, if the #title-large tag is applied
  </h1>
  ...
{{/post}}

Using helpers you can build some pretty complex conditional designs.

Edit: just remembered that the Casper theme also has a pretty interesting conditional CSS class for typography, using the #match helper:

1 Like
3

Many themes include the tags as classes on an outer element. If that’s the case, you might not even need to edit your theme, but could just add a style that applies to h1s if your post has that tag.

<style>
 .tag-hash-big-title h1 { font-size: 100px }
</style>
1 Like
4

Thanks Jannis, this is really useful.