Blog Post Styling


(Taylor) #1

This theme component will allow you to designate a blog category and will alter the look and feel of all topics within that category to appear more like a traditional blog post. This is essentially a theme component adaptation of the Blog post plugin.

Preview at Discourse Theme Creator (Once you activate the theme, find the topic titled “A Quiet Desert Sunset” in the blog category)


Repository Link

If you are unfamiliar with theme components and how to install them, check out the theme installation guide . And if you’d like to learn more about Discourse themes, take a look at this guide .

Usage tips:

  • You can use <big></big> tags around the first letter of a word to create an initial effect
  • You may wish to enable the category setting Navigate to first post after topics are read to always highlight the blog post when first entering a topic.
  • The main image is centered within the available space. This is the same method used in user profile backgrounds. You may need to edit your photo for it to display the way you’d like.

There are currently a few limitations. Hopefully these can be overcome in future updates, but for now, these are the important things to note:

  • Blog posts are limited to one category. This category is specified in a theme setting using the category’s slug
  • Desktop view only for now
  • When you first create the blog post topic, you will need to refresh the page to see the main image appear above the content. This only happens right after it is posted and only for the author of the topic.
  • The main image must be large enough to lightbox and should be added to the very beginning of the topic.

Suggestions on how the component can improve are welcome. I can’t promise I’ll be able to add the feature, or make the change, but it will certainly be considered :slight_smile:

Special thanks to @Simon_Cossar and @awesomerobot for the heavy inspiration their prior work provided in creating this.

Educate users to write well-structured posts
(Krischan) #11

Great component! :sparkler: Thanks so much! Would be very nice to have it in more categories and on mobile as well. Any plans for that?

(Taylor) #12

Thanks for the nice feedback!

I’m open to adding the ability to set more categories to use the style. This was something I was considering early on, but wasn’t sure that users would need multiple blog categories.

Mobile is also something I can look into. There are obviously space constraints with mobile, so I’d have to put some thought into how a blog post would be best represented in that setting.

In any case, I’ll let you know when I have updates :slight_smile:

(Andy Logan) #13

I can certainly see a use for multiple categories. We put this in place as soon as it was available as you know, and for the most part our community is a typical forum. What we’re trying to do is have more technical posting by our employees, and our traditional blog isn’t the right place. Having these kinds of delivery mechanisms on Discourse helps drive people to engage in the other parts of our community as well.

Mobile doesn’t look too bad right now in the app, but if we can get that styling fixed it’s a bonus. Thanks again for your work on this!

(david) #14

This looks really good! Can it be made to work in sub-categories, though? Not a huge deal if not, I can make it work otherwise. I sort of wanted a blogging sub-category under a parent “general discussion” category.

Also chiming in as another user who would like to use them in multiple categories.

Thanks for making this. The depth of potential some theme-components have blows my mind sometimes.

(Mindaugas Bartusevičius) #15

something not right …

images not coming…

(Taylor) #16

Make sure you have factored in both of the above points. By default, an image must be over 690px wide to trigger lightboxing.

Please let me know if you still experience an issue.

(Krischan) #17

Having it working in sub-categories would be great indeed. Thanks again for your work @tshenry!

(Den C Hornyy) #18

The first post is displayed as needed, but all subsequent ones I have only a title. The text of the post is not. What could be the problem?

(Taylor) #19

Ok, I’m fairly confident I know what’s going on.

The component assumes that you will always use an image as the first part of your blog post. If you want to work around that expectation and only include text, you can add a single line of text, a line break, and then the rest of your post’s content. For example:

No image

This is my blog post content

You will not see the “No image” text once you’ve submitted the post, but the rest of the content will display normally.

I can look into a cleaner way of allowing text-only blog posts at some point, but for now, the workaround outlined above should be sufficient.

(Den C Hornyy) #20

It worked!
Thank you so much! :slight_smile:
It is strange that the first message in the news section is initially displayed normally.

(Pad Pors) #21

very nice theme, thanks :blush:

two simple issues:

  • emojis are also put in the center, like images. while they’d better not. (simple css)
  • it doesn’t work great with the disco Toc theme. while a TOC for a blog post would be great.
    the TOC in this theme, has a large font and is positioned badly.

(Taylor) #22

I pushed some CSS rules that will be applied if both DiscoTOC and Blog Post Styling are in use, so that should be in a better place now. Let me know if there are any issues with the layout after you update the component.

Can you post a screen shot. I’m not quite sure what this is referring to. I tried using emoji within the post and everything seemed fine.

To everyone else - I haven’t forgotten the multiple categories feature. Hoping to get it implemented sometime this week :crossed_fingers:

Edit: I didn’t have as much time this week to work on this. With that said, I think I’ve got a decent solution for multiple categories working. I need to do a little more more testing, and clean up the code after trying many different approaches, but it’s looking like it should be ready early next week.

(c0ry) #23

This is the issue I’m getting with Vincent’s skin

adding “No image” doesn’t work either.

I’m sure it’s with the CSS, but not to good with the CSS yet.

(Taylor) #24

Ah yeah, I haven’t tested this against any #theme-full themes. For now, I’m focusing on the default theme of Discourse. Different color schemes should work fine, too.

I’m not sure if/when that will change, so if you do happen to fork this component and get it working with Vincent, please share!