Blog Post Styling

Thanks a lot for your reply! I realized that our images don’t get lightboxed at all at the moment, so there might be some issues with Sidekiq, as far as I understand it. Our admin will look into this…

1 Like

Dear Taylor,

thanks for conceiving and maintaining this theme component.

While trying to install it on, we haven’t been able to make it work on nested categories. For example, the component has not been activated on category slugs like usage/handbooks. Does that make sense to you or did we make any configuration error?

With kind regards,

1 Like

No problem!

Ah yes, it’s a little different with subcategories. Here’s what you would need to do, using your forum as an example:

  1. Get the link to the subcategory and isolate the part after /c/
  2. Replace the / with a - so that you get usage-handbooks

  3. Add the result to the theme setting

I hadn’t gotten around to testing subcategories. I expected there might be something more I had to tweak to get it to work, but it looks like it’s working fine. With that said please make sure to report any issues you run across.

  1. Strangely the first paragraph of the post is hidden after I activate the style. it’s because of line 207 of the code.

> p:first-child { display: none; }

Should it be like that? I mean should one add a hidden first paragraph to all the blog posts?

  1. with this style of the first image, what are the best size or best aspect ratio for an image of the post in this style?

  1. the position of the signup-CTA is miss-aligned in this theme due to the change in the width and position of the first post:

here is an snapshot when the two theme are used together, more or less a mess at least for rtl:

I put the snapshot at the end of the first post, so that one can see both the positioning of the TOC relative to the first post, and the reply styles.

See this post. The component expects an image as the first part of the post. When the post is cooked, the image is wrapped in a paragraph tag. It’s hidden since we want to display the image above the post rather than within it. Since the <p> tag comes with margins that will throw off the styling, targeting the image element alone doesn’t work. There may end up be a better way to handle it, but for right now this is the way it works.

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.

Thanks for pointing this one out! I also need to fix the alignment of post actions.

That certainly is a mess. I had not tested the DiscoTOC CSS against rtl, but I can look into it a bit more when I get a chance.



may you add something similar to this line to the first post, in the usage tips section:

  • add an image (less than 440 px in height recommended ) as the first paragraph of the post.

Sure, there are a few things worth adding to the original post. I’ll update it in the next day or so.


1 Like

Alright, I just pushed a few quick fixes for now:

  • Fixed emoji
  • Fixed alignment on CTA, post-actions, etc

Still to do:

  • Look into the issues with DiscoToc when site is rtl
  • Update this topic’s first post with new information


I just notices that for some of our posts, in this style, images different from the first image are considered as the main image! no idea what’s different in these posts, but I guess it’s related to the number of images of the post.

do you have any idea what’s going on?

a sample post here. there is another image in the first paragraph of this post which is not shown at all in the post nor in its header:

The component uses the first lightboxed image it finds. The picture with the jerseys and the field is not big enough to be lightboxed as it is 640px wide.

More information I need to add to the original post!



That’s really cool :slight_smile: Would it be possible also in mobile somehow?

1 Like

Hi! Thanks for the interest :slight_smile:

Mobile was brought up a while back. I do intend to revisit this component with mobile in mind, but I don’t have any immediate plans just yet. I’ll @mention you whenever I do get around to adding some special styling for mobile.


Hi @tshenry thanks a lot! it would be awesome!

1 Like

Hi! I attempted to not have an image, adding . then a line break, but the picture I added at the very end of the topic still shows up as the header image. Could you take a look at First time here? Welcome! 👋🏽 - Announcements - #NYCEDU?


I just noticed another issue. In our About the category topic, the text doesn’t render at all. See About the Announcements category - Announcements - #NYCEDU.

1 Like

Hi @debryc! Looks like you found a couple of untested scenarios. Looking at the code, I can see why both are happening.

I think I have a fix for this, but I want to do a little more testing to make sure it doesn’t break anything else.

This is a tricky one. You can’t add a . + line break since the dot would become the category description. But, if you don’t, the text will be hidden due to way the blog post styling behaves. I looked into one solution where the blog post styling just isn’t applied to “About” topics, but that was proving to be challenging. I’m going see if I can come up with a better solution so the . + line break isn’t needed at all. In the mean time, I would just unlist the current “About” topic if it’s not a huge issue. It will still function as the source of your category’s description even though it’s unlisted.

I’ll try to put some time into this next week.


:warning: Please read below if you are currently using this component. You may need to adjust a couple things after updating


  • You no longer need to include a . or - as the first line of the post when creating a blog post without a blog image.

  • If you want to have an image display above the post, it must be the first line of the post.

Still to do

  • Mobile styling
  • Look into the issues with DiscoToc when site is rtl

Please continue to report any issues you run across!

@debryc these changes should fix all of the issues you brought up :slightly_smiling_face:


Dear @tshenry,

hello again. After we revisited this topic again after we experienced some woes regarding subcategory-assignment the other day

we want to tell you it works like a charm now. For your reference, we’ve picked some highlights of topics which are beautiful fine prints now after adjusting some of them slightly. We specifically like the feature to expand any imaged referenced in the first line of the respective post into a banner above the article.

However, it looks like the image-to-banner-expansion feature does not work properly on a few topics and we haven’t been able to figure out why.

Do you have any idea why this might happen to us?

Thanks again and with kind regards,