Blog Post Styling

Would it be possible to indicate somehow which photo on the page you wanted at the top.
A pair of tags like <big></big> something like <top></top>?

Thanks

1 Like

Unless I’m misunderstanding, it shouldn’t be necessary. If you follow this:

It will display the image above the topic. If you want to include the image again later in the post, that’s totally fine.

3 Likes

Hi Taylor

Thanks for the workaround.
If it could be implemented using something like <top></top>this would negate

  • the need to put the image first line.

  • the need for exact formatting with the blank line.

  • the need to duplicate the image

2 Likes

I just pushed a small fix to address some styling issues I noticed. They likely came up as a result of recent changes in core. Let me know if there are any issues!

7 Likes

Anybody else have this issue?

Using Material Design theme and it’s shifting the avatars over into the post in every category, not just the one I applied this component to.

1 Like

Unfortunately, I can’t guarantee this component will work out of the box for all custom themes. You may need to make minor CSS adjustments in a separate component.

The theme in your screenshot doesn’t appear to be the Material Design theme given the reply button on your topic timeline is not larger and rounded. In any case, I did try out the Material Design theme with the Blog Post Styling component and am not seeing the same result in your screenshot. The Blog Post Styling changes were only applied to the categories specified in the the component’s theme settings.

4 Likes

Discovered a small bug: If I click on a suggested topic at the bottom of a topic, the blog post image doesn’t change. Is there a fix for this? Thanks!

Edit: Apparently, the image doesn’t change for any link on a topic page to another topic.

2 Likes

hi ! is it possible to adjust the default width of the main body ?

2 Likes

Hi guys,

Quick question, am I the only one that has a different body width and color than the one defined by the theme?

The background of the blog post and further comments always look white and the text on the blog post itself is “cropped” a little on the first letters to the left. This happens using the “default dark theme”, so no custom stuff here. It’s noticeable with any theme that is not 100% white background, basically.

Updated to the latest commit and this happens with Discourse Latest (latest as in: today’s code) Didn’t experience it before this commit. But looking at it, at least within my limited understanding of CSS it shouldn’t cause that, right? Unless is a hierarchy/priority issue?

Thankfull for any help.

2 Likes

I’ll try to take a look at the width, color, and suggested topics issues this week. I suspect the width/color problems may be related to recent core changes. Thanks for the reports!

4 Likes

Ok, I’ve pushed an update to the component!

https://github.com/tshenry/discourse-blog-post-styling/commit/ec2683bd63d6bc6ad98bf648e3cbd92adadf6916

This should be fixed now. Let me know if there are any edge-case areas that slipped by.

I added a new experimental theme setting (default off) to increase the width to the full width of Discourse. If you don’t like it as is, you can always look at the SCSS code and make your own overrides in a separate component.

Thanks for reporting this! We did indeed have a core change that needed to be addressed in the component. It should be all fixed up now and look pretty on any color scheme.

Let me know if there are any other issues that turn up.

8 Likes

@tshenry Thanks so much for the effort!

2 Likes

Hi Taylor,

Thank you so much. We activated this mode right away and found it to be pleasant, see:

Keep up the spirit and with kind regards,
Andreas.

2 Likes

Hi Taylor,

thanks again for conceiving and maintaining this excellent addon to Discourse.

I would like to report on another (maybe only minor) issue: While [quote][/quote] blocks are rendered very nicely in general, they apparently do not honor newlines. The outcome can be inspected on TinyPICO - Hardware bazaar - Hiveeyes and looks like that:

image

Maybe you can also do something about it?

With kind regards,
Andreas.

2 Likes

Your welcome!

Sure, I’ll take a look when I have a moment and see what going on with that.

3 Likes

I love this theme component, it does 95% of what I want it to! Thank you for creating it. :slight_smile:

My main desire would be a way to exclude (or include) specific posts, rather than doing it on a full category basis. This would, I think, be a good solution:

I too would appreciate the greater flexibility of this approach.

I don’t need this, but it would definitely be cool! Not sure it’s possible in a theme component though. @tshenry ?

1 Like

I just got moved to Discourse 2.7 stable and played around with the new thumbnail feature, i.e. the ability to set the thumbnail of a topic using markdown. Apparently, doing this also sets the featured image here. Could this be separated, so that the blog post component still uses the first image of a topic? Then you could set the image that fits the thumbnail view best…

1 Like

I haven’t had a whole lot of extra time lately, but here’s where things stand:

I took a look at this and found it was part of the CSS styling I had taken from Simon’s original Blog Post plugin. If we take the CSS rule away it looks like this:

Personally, it feels a little weird having the quotation icon floating above everything else. I can certainly make some adjustments to make it look better, but I’m curious if you might have anything specific in mind?

I’m open to supporting tags. I’ll put it on the roadmap, but I can’t give any definitive ETA. As for the videos, I don’t see that happening any time soon in this component. It would need to use a completely different approach than the one we currently use for setting the image.

Wow this feature somehow slipped by me! That’s really cool :slight_smile:. Taking a quick look at the code, I don’t think there will be a good way to separate things. Ye old version of this component used a hacky way to pull the first image, now we rely on what’s computed on the server side. With the recent change, the computed thumbnail will be an image with the thumbnail designation in the markdown if it exists, otherwise it’s the first image in the post.

4 Likes