Blog Post Styling

(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!

1 Like

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

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

1 Like

(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!


(Taylor) #25

@Krischan @awlogan @YTPMania_Forums

This component now supports multiple categories! :tada:

Still left to look at:

  • subcategory support
  • something for mobile

(Krischan) #26

Great support! Thanks so much!

1 Like

(david) #27

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


(Krischan) #28

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


(Taylor) #29

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.

1 Like

(Krischan) #30

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

(Andreas Motl) #31

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

(Taylor) #32

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.


(Pad Pors) #33
  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:


(Pad Pors) #34

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.


(Taylor) #35

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.