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:

  • The image code of your featured image should be the first line of the post. The component will “move” that image above the topic title to produce the effect shown in the above example image.

  • 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.

  • You can apply the styling to multiple categories. This can be accomplished by comma separating the category slugs, making sure to omit any spaces before of after the commas. Sub-categories 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

  • 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.

Suggestions on how the component can be improved 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:

Current to-do/feature request list

  • Make sure the component plays nice with DiscoToC (especially with RTL)
  • Allow tags to be used as a way to apply the styling to a post
  • Allow videos to be used in addition to images

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

73 Likes

We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

after the respective image had been uploaded beforehand as

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

This is cute and makes us happy.


2 Likes

Hello, and thank you very much for dedicating the time to create this and release it for free.

I was just wondering if it would be at all possible to change this somehow to use a specific tag instead of a particular category?

I just setup a new discourse website but I’ve been writing a lot of “blog posts” but I would still like these to show up in the appropriate other categories in order to make it seem a little more integrated.

Currently I have been posting them in their own blog-posts category, which I limited to just me being able to post in there, but I just setup a tag group and made that only accessible to staff.

Thanks again!

1 Like

Thanks very much @tshenry. Your theme components have all been spot on.And to @sam and @codinghorror for sharing an incredible app!! Your generosity including the support in meta is heartfelt. Discourse is indeed made for the more caring internet of the future.

5 Likes

Is there a way to make this work with a video as the featured content rather than the image? I would delete my wordpress site if I could just post the YouTube/Vimeo etc. and have that be the top content. Any ideas?

3 Likes

Totally! Great suggestion @LoganRTW. It’s got my vote @tshenry. Can it be done?

3 Likes

Update :tada:

If you can believe it :sweat_smile:

I have started refactoring/cleaning up the component to use the plugin-style file structure and make use of the new topic thumbnails.

I’ve added a couple new features as well:

  • New settings
    • image_display_style - there are two options with this. The default should be the behavior the component has had all along. The alternative will ensure there is no cropping and the full image is displayed. It’s hard to say which one is “better” so you’ll want to do some experimentation and see what works best for your workflow and blog images.

    • mobile_enabled - this is a first pass on the mobile blog post style. I’m interested to hear any bug reports or ideas for improvements on this!

I still want to continue refactoring and cleaning up the code, but this should be a good start.


No plans at this point, I’m afraid!

12 Likes

Thank you for a really inspiring and nice component @tshenry :pray:

In my evaluation I have identified two issues;

  1. No blog image in sub categories - after quite extensive troubleshooting with different themes and enabling/disabling both plugins and other components, I think I can state with near certainty that blog images won’t render for sub categories. The first image/the intended blog image is however still hidden.

  2. First image not hidden inline with DiscoTOC - When Blog Post Styling is used together with DiscoTOC, the blog image get rendered above the title correctly - however, it is rendered twice as it is still rendered in its original position as well.

3 Likes

Thanks so much for the feedback @torstensson! Both points were indeed bugs and should now be fixed:

Please let me know if you continue to have any issues.


To everyone using this component:

:warning: If you are not currently including a featured image at the top of all blog posts, this is for you!

This component was created with the intention of having an image display above every blog post topic. With that said, it was possible to create a blog post without displaying a featured image by simply not including an image on the first line of the post. This behavior has changed.

The newer implementation greatly improves performance, but it uses a predefined value rather than looking at the post contents itself. The predefined value is generated from the first image found in the post. Unlike before, it is not necessarily limited to an image appearing as the first line of the post. This means if you create a post without an image on the first line, but you include a single image at the bottom of the post, that image at the bottom will now also be displayed above the topic.

I have included an all-or-nothing setting that can toggle on/off the “featured image,” allowing you to have all of the styling except for the featured image if that is your preference.

I am going to update the OP with all of the new considerations and recommendations, but the short of it is to make sure to include an image on the first line of the post (this positioning is still used to make sure the image is not repeated). You may find it is helpful to use a placeholder image in the category’s topic template that can be used as a default if no image is provided.

6 Likes

Awesome, thank you @tshenry :awthanks: I can gladly confirm that both issues have been resolved with the update :slightly_smiling_face: and again - thank you for a really great component, not only in function but inspiration as well :+1: :+1:

3 Likes

A recently announced feature may work as an alternative to this theme-component. Leaving it here for those interested.

2 Likes

@tshenry Thanks so much for this component! :heart: We are using it along side the Topic List Previews plugin to create an Articles section for students in the Dataquest Community.

I have a feature request for you to consider in future iterations of this component - Can you please add the ability to add Canonical URLs to the articles?

Search engines use canonical links to determine and prioritize the ultimate source of content, removing confusion when there are multiple copies of the same document in different locations.

Thanks!

2 Likes