# Blog Post Styling

**URL:** https://meta.discourse.org/t/blog-post-styling/110841
**Category:** Theme component
**Tags:** official
**Created:** [March 6, 2019, 11:10am UTC](https://meta.discourse.org/t/blog-post-styling/110841 "2019-03-06T11:10:58Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [March 6, 2019, 11:10am UTC](https://meta.discourse.org/t/blog-post-styling/110841/1 "2019-03-06T11:10:58Z")

</div>

| | | |
| --- | --- | --- |
| :discourse: | **Summary** | **Blog Post Styling** lets you designate a blog category, which alters the look of topics within the category to look more like traditional blog posts. |
| 👓 | **Preview** | [Preview on theme-creator.discourse.org](https://discourse.theme-creator.io/t/a-quiet-desert-sunset/1115) |
| 🛠 | **Repository** | [github.com/discourse/discourse-blog-post-styling](https://github.com/discourse/discourse-blog-post-styling) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

The **Blog Post Styling** theme component transforms Discourse topics into a traditional blog-post layout. When applied to a category, the first image in each topic is promoted to a full-width hero above the title, and the content is styled with blog-appropriate typography and metadata display.

## Settings

Here are the various settings associated with this theme component:

- **Blog category:** Topics that belong to any of the selected categories will have blog post styling applied.

- **Blog tag:** Choose one or more tags that, when applied to a topic, will give it blog post styling.

- **Image size:** Decide how the featured hero image fills the header area:

- **Image position:** Decide where to show the image relative to the title:

 ![blog-post-styling-image-position-above-title](https://global.discourse-cdn.com/meta/original/4X/2/2/f/22f6655256ad2a0aab523cc111a8eb1a8ce3d069.jpeg)

 ![blog-post-styling-image-position-below-title](https://global.discourse-cdn.com/meta/original/4X/1/4/4/14404157d4f3f2553143ef5b42fe767c9fb6abf1.jpeg)

- **Dropcap enabled:** When enabled, the first letter in the blog post will have enlarged styling, like so:  
 ![blog-post-styling-dropcap-enabled](https://global.discourse-cdn.com/meta/original/4X/e/9/1/e910360e375ef0167a94140c2498e28b0a0fde6e.png)
- **Mobile enabled:** When enabled, blog post styling is applied when reading the topic on mobile devices.

## Writing a Blog Post

Once you have set up your blog category (or applied your blog post tag), there are a few special things to note about how the blog post topic will work.

### Featured image

Place the image you want as the hero image on the **very first line** of the post, followed by a blank line before your content starts:

```plaintext
![image description|1100x440](upload://your-image-hash.jpg)

Your post content begins here...

```

The component automatically positions this image based on the **image position** setting (see above). If any other content — including blank lines — appears before the image, it will not be promoted to the hero position.

After first publishing a post, **refresh the page** to see the image appear in the designated position. (This only affects the post author on initial publish; members accessing the post should see the image in the right place right away.)

#### Image sizing tips

The image container is **440px tall** and **100% wide**. For best results when the **image size** setting is set to `full width`:

- Use or crop images to **1100x400px** before uploading to avoid cropping, or
- Choose images with a centralized subject or non-specific content (landscapes, patterns) so cropping doesn’t remove important detail.

### Summaries

When the **image position** setting is set to `below title`, you can add an optional summary to your blog post, which will appear between the title and the featured image.

To do this, wrap the content that you want to appear in your summary as follows:

```plaintext
[summary] Here is the content that will be your summary. [/summary]

```

 ![blog-post-styling-summary](https://global.discourse-cdn.com/meta/original/4X/1/8/1/18112177016d6568752c1b6b39fc001316af2094.jpeg)

### Stylized blockquotes

When creating topics in a blog category, blockquotes get special styling. You can create blockquotes in the composer with the `>` symbol or using the “ composer toolbar button.

 ![blog-post-styling-blockquote](https://global.discourse-cdn.com/meta/original/4X/0/4/6/0469a3483720367987af4ba60552cbde878e3749.png)

## Recommended category setting

In the settings for your blog category, consider enabling the **Navigate to first post after topics are read** category setting. This sends returning readers directly to the blog post content rather than their last-read position.

## Blog Post Styling + Topic List Thumbnails

This component is compatible with [Topic List Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails/150602), which highlights the featured image of your blog post in the topic list:

 ![CleanShot 2026-03-11 at 10.54.05](https://global.discourse-cdn.com/meta/original/4X/7/7/2/7727235b095e7bd16fe2adbd8e8b0bbd2288d8f3.jpeg)

**Note:** The Topic List Thumbnails component is not compatible with the Horizon theme. The above screenshot is using the Foundation theme.

---

_[View the full topic](https://meta.discourse.org/t/blog-post-styling/110841)._