Blog Post Styling

[geoff777]

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

[tshenry (Taylor)]

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

@tshenry

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. Please be sure to include a blank line between the image code of the featured image and the subsequent content.

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

[geoff777]

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

[tshenry (Taylor)]

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!

[Hessikin (J.V.)]

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.

[tshenry (Taylor)]

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.

[Krischan]

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.

[edgarriba]

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

[Iceman]

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.

[tshenry (Taylor)]

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!

[tshenry (Taylor)]

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

SCSS variable fix, suggested topic fix, and new full-width option

@Krischan

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

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

@edgarriba

is it possible to adjust the default width of the main body

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.

@Iceman

different body width and color than the one defined by the theme

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.

[edgarriba]

@tshenry

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.

@tshenry Thanks so much for the effort!

[amotl (Andreas Motl)]

Hi Taylor,

@tshenry

I added a new experimental theme setting (default off) to increase the width to the full width of Discourse.

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

• Raspberry RP2 microcontroller family - Hardware bazaar - Hiveeyes
• Raspberry Pi Pico - Hardware bazaar - Hiveeyes
• Doppler 1.0 - Hardware bazaar - Hiveeyes
• EnviroDIY Mayfly Data Logger - Hardware bazaar - Hiveeyes

Keep up the spirit and with kind regards,
Andreas.

[amotl (Andreas Motl)]

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:

Maybe you can also do something about it?

With kind regards,
Andreas.

[tshenry (Taylor)]

Your welcome!

@amotl

While [quote][/quote] blocks are rendered very nicely in general, they apparently do not honor newlines.

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

[oshyan (Oshyan Greene)]

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

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:

@ohellno

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 too would appreciate the greater flexibility of this approach.

@LoganRTW

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?

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

[Krischan]

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…

[tshenry (Taylor)]

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

@amotl

While [quote][/quote] blocks are rendered very nicely in general, they apparently do not honor newlines.

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?

@oshyan

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

@Krischan

he new thumbnail feature

Wow this feature somehow slipped by me! That’s really cool . 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.

[Drew-ART (Drew)]

This is beautiful. Is there a reason you chose to confine it to one category?

I love the idea of our users creating beautiful and appealing pages wherever they want by clicking a toggle, or something like that. It would be perfect for things like new project proposals, events, announcements, newsletters (by auto subscribing users to a category), or featured projects.

[tshenry (Taylor)]

@Drew-ART

I love the idea of our users creating beautiful and appealing pages wherever they want

This should be possible when tag support is added There was no specific reason to limit it to categories (you can have multiple as noted in the theme setting by the way). It made sense at the time from an organizational standpoint, but I can see how having more granular control through a tag might make sense for some communities.