Embedding a calendar in tag-generated page

Using Ghost
1

Dear All,

I’m quite new to Ghost, and I am hosting a website using Ghost starter plan. I generate this page

using posts and tags. We also maintain Google calendar for the seminars, which currently is embedded in a separate page

The two should, ideally, be on the same page. Do you know if I can embed a the calendar in the automatically generated page somehow, while staying in the starter plan?

Best

2

Hi there!

The best way to implement this would be to make edits to your tags.hbs template file. However, customizing your theme isn’t possible on the Starter plan (as you mentioned).

Another option, then, would be to add JavaScript to the tag’s page. This will require a bit of code to insert the embed on the page.

CleanShot 2023-10-02 at 09.54.40
CleanShot 2023-10-02 at 09.54.401036×1319 57.7 KB

1 Like
3

Thanks @RyanF. I guess what I don’t understand is how to do code injection specifically on the pages that have a specific tag–I would not want to see the calendar in all pages. Do you have any ideas about that? Note that I know no JS at all, so perhaps this is why I don’t get it.

4

Yep, so you can limit the code injection to a specific tag. If I understand your structure, you have a tag page, Seminars, where you want to embed the calendar.

If you go to Tags → Seminars, you’ll see a Code Injection field that will only apply to the page in question. That’s what I tried to highlight in the screenshot.

In particular, you could put something like this in the footer:

<script>
    const main = document.querySelector('main');
    main.insertAdjacentHTML("afterend", `<iframe src="https://calendar.google.com/calendar/embed?src=818e0b6480fde0f2b3bda13602df56d31c922c8ce3bef9cf269a77f0ced54488%40group.calendar.google.com&amp;ctz=Europe%2FAmsterdam" style="border: 0" width="800" height="600" frameborder="0" scrolling="no" style="padding: 40px; margin-inline: auto;"></iframe>`);
</script>

CleanShot 2023-10-02 at 10.48.46
CleanShot 2023-10-02 at 10.48.461041×1105 69.2 KB

5

whoops, I completely missed that you were in a tag page. Thank you, this works great!

6

Hi @RyanF it seems that in this way I am unable to control the width of the calendar, which is occupying the whole width of the page. Also, playing with the “width” field of the google code does not help a lot. Would you know a quick way to fix that?

7

And also playing with the “width” field of iframe does not help.

8

You can update the style tag to change the width of the calendar:

style="border: 0; padding-inline: 3.6rem; max-width: 1200px; margin-inline: auto;"
  • border: 0 is part of the original tag
  • padding-inline: 3.6rem sets the padding (spacing on the left and right)
  • max-width: 1200px limits the calendar to being 1200px
  • margin-inline: auto centers the calendar on the page
9

Thank you this is perfect now.

1 Like