 |
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: 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:
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 toabove titleandbelow title:
- Dropcap enabled: When enabled, the first letter in the blog post will have enlarged styling, like so:
- 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:
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.
Blog Post Styling + Topic List Thumbnails
This component is compatible with Topic List Thumbnails, which highlights the featured image of your blog post in the topic list:
Note: The Topic List Thumbnails component is not compatible with the Horizon theme. The above screenshot is using the Foundation theme.
현재 모든 블로그 게시글 상단에 대표 이미지를 포함하고 있지 않다면, 이 내용은 여러분을 위한 것입니다!
업데이트로 두 가지 문제가 모두 해결되었음을 확인합니다 
그리고 다시 한번 정말 훌륭한 컴포넌트를 만들어 주셔서 감사합니다. 기능뿐만 아니라 영감까지 주었거든요 
현재 
