Understanding the Dynamic Content Blocks in Ghost
8 min read

Understanding the Dynamic Content Blocks in Ghost

Since moving Dandy Cat Design, all of its content, and pretty much everything having to do with the business’s website away from [Squarespace] and onto [Ghost] early in 2020, I’ve grown to love just about everything that platform has to offer.
Understanding the Dynamic Content Blocks in Ghost

Since moving Dandy Cat Design, all of its content, and pretty much everything having to do with the business’s website away from Squarespace and onto Ghost early in 2020, I’ve grown to love just about everything that platform has to offer.

Sure, making adjustments to any of its available templates can be far more of a hassle than it was on Squarespace, but I love a good challenge. A website service that’s slightly more difficult to use isn’t a reason to give up on it. In fact, I believe learning how to use something challenging is a good reason to love it even more!

Learning new things is a great way to grow as a person.

Moving to Ghost and learning how to use their unique blogging engine was indeed a challenge for me. As with anything new, you’re probably not going to intuitively understand how to use it from moment one. I’d be impressed if you could. However, I’m going to assume you’re a human being like me and not some sort of robot.

I want to help give you a leg up when it comes to using this new and powerful platform. Ghost is a wonderful service to use when it comes to blogging. When it comes to writing blog posts, you could easily make do with just putting words down on the screen, but what if you want to do more?

Let’s talk about all of the different content blocks that Ghost provides to help make the posts you publish more engaging and informative.

A screenshot of the dynamic content blocks chooser in a Ghost blog post.

First up are the image blocks, of which there are really two.

In the post editor screen, any new line without text content will display a large plus icon with a circle around it. As the plus sign suggests, this is what you will click on to add new content into your post. Clicking on it will present a small window with several different content options to choose from.

The first among these options is Image. Clicking this will place an image block at your selected line and immediately show a file chooser window. Navigating to your selected image and choosing it will place the image into the post.

A screenshot featuring an image block in the Ghost blog post window.

Look how shiny and engaging it is!

You’ll notice that, above the image, is a small pop-up menu with four separate icons to choose from, with the first being selected for you.

A screenshot of the image display options above the Ghost image block.

These allow you to choose how to present your image on the page:

  1. Regular: displays an image no wider than the rest of the content on the page.
  2. Wide: displays an image that stretches slightly beyond the bounds of the rest of the content.
  3. Full: displays an image that takes up the full width of the page.
  4. Replace image: allows you to replace the current image with another one.

Additionally, you can choose to type in a caption for the image in the text field below the block. Clicking the button that reads Alt will present another text field where the caption field is, allowing you to add alt text to your image. This is an important feature for screen readers and something you should do for all your images.

Screenshot of a cropped view of the caption field in a Ghost image.

Related to the image block, but different in a key way, is the Gallery Block. The gallery block allows you to add more than a single image (up to nine) at a specific place in the post. This collection will be presented in a dynamic, appealing way. It’ll adjust how the images are displayed together depending on how many there are and the dimensions of the individual images.

It’s a really simple and beautiful way to display your content.

A screenshot of the gallery block with a collection of images shown in the Ghost blog post editor.

As with the image block, there will be a small button at the top of the gallery block. Instead of allowing you to choose how the images are presented (because Ghost does it for you in this case), you have the option to add more images. Additionally, hovering over any image in the block will present a trash can icon, which allows you to remove that individual image.

A screenshot of the gallery image edit buttons highlighted in a Ghost gallery.

You also have the ability to include a caption for this gallery block by typing text into the field below the block. Any text here will be displayed along with the photos.

A screenshot of the gallery caption field being highlighted.

The Markdown block

If I write any more about how much I love Markdown, you might start thinking I’m being paid by John Gruber (but he wouldn’t do such a thing). I love Markdown, have written a post and a guide all about it, and encourage everyone to use it in their writing.

Is it any wonder then that I’m totally thrilled that Ghost offers a Markdown Block?

A screenshot of the Markdown block in the Ghost blog post editor.

They do and it’s as fully featured as you could want it to be. If you’re familiar with Markdown syntax, then writing in this block should feel as natural as breathing to you. If you’re a bit rusty with it, Ghost provides several formatting buttons at the bottom of the block to help with styling your text.

It’s an ingenious combination of Markdown and a WYSIWYG editor.

When you’re finished writing and styling your text, clicking outside of the block will show your perfectly formatted (and now essentially HTML) words.

A screenshot of the Markdown block with proper text and link formatting being shown.

For Markdown writers and those who want to extend the capabilities of the post editor, the Markdown block is a perfect solution.

The HTML block

Much like the Markdown block, the HTML Block allows for the entry of uniquely coded/styled text and outputs the results of what’s typed inside of it.

A screenshot of the HTML block shown with some code written in the block.

The use of the HTML block, along with separate CSS, JavaScript, or other code stored elsewhere, allows for some unique things that the plain post editor just isn’t capable of doing. This is, of course, by design, but having this functionality allows for some unique things.

As a quick example, I currently use the HTML block for all of the text I want to feature with a colorful background and border. I use this block to help set off text that I want readers to pay special attention to. Coupled with some CSS styling, the text that I place within a <div class="featured-text"></div> tag appears differently than the rest of my text.

A screenshot of a properly styled HTML block showing text with a purple background and a purple background.

The divider block

The Divider Block is one of those underappreciated tools that seems unimportant but can actually do a lot to help create an orderly and professional appearance for your posts.

A screenshot of the Ghost blog post editor showing a divider block separating two bits of text.

Like its name suggests, the divider block places a line, or horizontal rule, between sections in the post. This can be useful to help separate different topics within a single post, accentuate blocks of images, and in my case, provide a visual indication that the main content of my post is finished and I’m into the conclusion.

Don’t discount the divider block. It’s very powerful and can be useful.

The bookmark block

One of the more brilliant blocks available to you in the post editor is the Bookmark Block. As I’ll get to in a couple sections, Ghost allows you to place styled blocks of embedded content that are linked to other locations online, e.g. a YouTube video, an Instagram post, or a Spotify song.

However, Ghost isn’t able to provide custom tailored embedded content blocks for every bit of content on the entire internet. That would be impossible; there’s just too much stuff out there!

As a clever workaround, they’ve created a content block that allows you to place in it a URL from just about anywhere on the internet and display it in a beautiful way.

A screenshot of an empty bookmark block sitting in the middle of a Ghost blog post.

Pasting in the URL and hitting enter will make the editor parse the link for content and metadata it can use to fill in this block. What will appear is bookmark that displays the title of the linked site, a selection of its text, and an image. This new block is also a clickable link, allowing you to insert links to other places on the internet in the most appealing way possible.

An image of a styled bookmark card showing a link to another Dandy Cat Design post.

Like any of the other image blocks, this bookmark block also allows you to type in a caption by inputting text in the field attached to the block.

The email block

A new-ish addition to the editor, the Email Block gives you the ability to create and insert content into a post that will only be seen by the people who receive the post directly by email.

A screenshot of the email block in the Ghost editor showing optional text that'll only be shown to email recipients.

Think of it like hidden content that’s only accessible by the die-hard fans who have graced you with their email address. This content can be nearly anything, so long as it’s text, and will display along with the rest of the post in the emails they receive from you. This block will not be shown when viewing the post in a web browser.

I’ve been relying on ConvertKit for all my email communication and engagement these days, but if you want to make use of Ghost’s email newsletter feature, then this can be a powerful block for you.

The embed blocks

Like the bookmark card I mentioned earlier, these Embed Blocks allow you to paste in a URL from elsewhere on the internet and have it displayed in a custom-formatted and beautiful way. There are several different embedding options for you here, including:

  • YouTube
  • Twitter
  • Instagram
  • Unsplash
  • Vimeo
  • CodePen
  • Spotify
  • SoundCloud
  • Other..., which acts the exact same way as the bookmark block

For instance, if we paste a YouTube video link into the embed block text field and hit enter, we’ll be given a YouTube player window, complete with all the YouTube controls people are familiar with.

A screenshot of a YouTube player being shown in the Ghost editor, complete with proper player controls.

Pasting in an Instagram URL will show an Instagram post block, along with the image, caption, and additional engagement tools provided by Instagram. Using any of these embed blocks is a beautiful way to show off your content without having to know or type in any complex code.

A screenshot of an Instagram block showing a More Movies Please! post with proper Instagram styling.

Any new website creation platform is going to come with a learning curve and a unique set of challenges. I would call that one of those unavoidable facts of life that we all just have to live with.

However, that fact of life doesn’t have to create a bleak and complicated reality for us. Quite the opposite. Instead we can take advantage of the tools we’re given to craft and present our posts in a way that just screams US!

I love Ghost and all the tools it provides. I’ve never had a more enjoyable time creating and publishing posts for wonderful people like you. I encourage you to check Ghost out and play around with their dynamic content blocks. They’re a lot of fun.

Play with those blocks, cats.

On Pinterest? Be sure to pin these images.

Enjoying these posts? Subscribe for more.