Blog Post Styling

Discourse · March 6, 2019, 11:10am


	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
	Repository	github.com/discourse/discourse-blog-post-styling
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

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: The category slug of the category that should use blog post styling. To add to more than one category, use a comma-separated list without spaces (e.g., blog,announcements). To find the slug:
- For categories, take the URL path after the /c/ — so for /c/blog/, the slug is blog.
- For subcategories, take the URL path after /c/ and replace any / with -. For example, a category at /c/blog/tutorials becomes blog-tutorials.
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:
- No image: Hide the featured image.
- Full width (default): Image spans the entire content area.
- Centered: Image maintains aspect ratio and is centered in the content area.
Image position: Decide where to show the image relative to the title:
- Above title (default): Show image above the topic title.
- Below title: Show image below the topic title. When selected, you can also include a summary that displays between the title and the image.Below, you can see what the image looks like when the image position setting is configured to above title and below title:

Dropcap enabled: When enabled, the first letter in the blog post will have enlarged styling, like so:

blog-post-styling-dropcap-enabled708×141 8.24 KB
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:

![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:

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

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.

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.