Blog Post Styling

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

Installation

Repository Link
https://github.com/tshenry/discourse-blog-post-styling

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:

  • For an image to display above the post, the image code must be the first line of the post.

  • 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. You may need to edit your photo for it to display the way you’d like.

    Additional details

    The height of the blog image container is 440px and the width is 100% of the main container. The image is centered within the available space, so if your image has 500px height, 30px will be cropped from the top, and 30px from the bottom. Horizontal cropping starts at 1100px (the max-width of the main content on a Discourse site) and will increase as the window narrows. The ideal scenario is to use an image that either has a centralized subject, or one that has a generalized subject such as a pattern or a nature shot like the one I show in my example.

  • There is support for multiple categories. This can be accomplished by comma separating the category slugs, making sure to omit any spaces before of after the commas. Subcategories can be added by following these steps:

    1. Get the link to the subcategory and isolate the part after /c/

      https://meta.discourse.org/c/support/wordpress

    2. Replace the / with a - so that you get support-wordpress

    3. Add the result to the theme setting

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

  • 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. By default, an image must be over 690px wide to trigger lightboxing.

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.

50 Likes

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?

2 Likes

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:

7 Likes

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!

3 Likes

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.

3 Likes

something not right …


images not coming…

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.

4 Likes

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

1 Like

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?

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.

5 Likes

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

2 Likes

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.
1 Like

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.

7 Likes

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.

1 Like

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!

6 Likes

@Krischan @awlogan @YTPMania_Forums

This component now supports multiple categories! :tada:

Still left to look at:

  • subcategory support
  • something for mobile
9 Likes

Great support! Thanks so much!

1 Like

You’re a real MVP! Thanks for doing the work; plugin and theme devs like you really rock Discourse customization. :clap:

4 Likes

Somehow my blog images have vanished, the <div class="blog-image-container"> is empty, even though the pictures are big enough. Any ideas? Thanks!

Hmm, I’m not seeing any issue with my test blog posts. Here are a few things to try:

  • Make sure you have updated the component
  • Make sure you don’t have any spaces after commas if using multiple categories
  • Check for any errors in your browser console
  • Rebuild the HTML of the blog post by clicking on the button and then the admin post button (wrench icon)

If you still have issues after all that, then it might be easiest to send me one of the images you are trying to use so I can see if there’s any way I can reproduce it.

2 Likes