Blog Post Styling

[denvergeeks]

@oshyan what a lovely site! I especially like your Categories drop-down!

[tshenry (Taylor)]

@oshyan

Blog Post Styling and DiscoTOC are fundamentally incompatible

This is actively on my list to try to get working. I just finished some fixes and updates to another component, so I’ll see what I can do with this one as soon as possible. There’s lots on my plate right now, so it might be a little bit. If for some reason you haven’t heard anything in a month, please poke me

[oshyan (Oshyan Greene)]

poke poke My writing is frequently long-form and I make perhaps more use of headers than the average person. But I also really like the Blog Post Styling! Hope they can be made to coexist in peace.

[Rootzilla]

How can I reduce the text size? I don’t want to use it as 1.25em. I tried to reduce it to 1em with CSS tricks, but it didn’t work.

[jordan-violet]

@tshenry I noticed a few bugs in the blog post styling (also present in the theme preview):

1. Comment backgrounds are all messed up, and have a weird grey-ish background:
   

   

2. Zooming in on the page, the blog post starts to overtake the sidebar:
   

   

3. User profile pictures and badges seem far too close to their title, date posted, etc. (see above image)

[Canapin (Coin-coin le Canapin)]

Hi Rootzilla,

Sorry for the late reply. You can change the font size using this CSS:

.category-blog .topic-post:first-child {
    font-size: 1em;
}

[Drew-ART (Drew)]

I’m having an odd bug with just one topic. Others are working fine. The top image doesn’t show up and any image i put there just goes missing. I can’t see what’s going on at all.

Its this one: Take A Smile - Approved Activities List - Public Happiness

I’ve turned off blog styling so the image shows now. If i turn it on again that image disappears.

The only clue i have is that the thumb image in the subcategory also won’t show for this thread and this thread only.

[tpetrov (Toni Petrov)]

Is it just me or after a recent core update headings became smaller on topics that use the blog styles:

[Quentin_B]

Same here - a lot of bugs appearing since Discourse 3 (and before with experimental features), is this component still updated?

[jordan-violet]

Trying this out in a new community, and noticing some styling issues on a mostly (I think, in this regard) vanilla community.

Is this component still supported?

[Andrew_Rowe]

Not sure if it is officially still supported but I use this theme component and it works as advertised in self hosted up to date install. example

[fbpbdmin (deepblue)]

@tshenry

thanks for this nice component. 2 suggestions

when open a topic to display as blog (in the category or with the tag)

• possible to have the sidebar menu auto-hidden ? this will make it looks more like a blog page.
  find Don’s component: Can I default to a hidden sidebar? - #4 by Don
  could do that and add it as a setting for default ux (hidden or show) …
• possible to have it stay in the first post of the topic (the blog), instead of jumping to the last read reply (the built-in experience). not sure which way is better for a blog page tho.

thanks

[tshenry (Taylor)]

@jordan-violet

Is this component still supported?

I had started to do some work on a fix and polish update ages ago, but haven’t been able to carve out enough space to wrap it up. I know there were some rough edges starting to show following core changes, and I think there have been some longstanding challenges as far as compatibility with DiscoTOC.

Let me see if I can get some thoughts from the team on what the future of this component should look like. At the moment it’s still technically an unofficial, personally managed component.

[Andrew_Rowe]

@tshenry

At the moment it’s still technically an unofficial, personally managed component.

I think some kind of official ‘blog’ styling with little fuss fits an awful lot of folks needs/desires but your component @tshenry is a wonderful contribution and it works for me and thank you

[tknospdr (David Muszynski)]

I hope you have some time to update this component. I really like it but it’s throwing up this warning now:

[Admin Notice] One of your themes or plugins needs updating for compatibility with upcoming Discourse core changes. (id:component-template-resolving)

And I have these notices in my console:

[Warning] DEPRECATION: Components with separately resolved templates are deprecated. Migrate to either co-located js/ts + hbs files or to gjs/gts. Tried to lookup 'template:components/blog-image'. [deprecation id: component-template-resolving] This will be removed in ember-source 6.0.0. See https://deprecations.emberjs.com/id/component-template-resolving for more details. (chunk.3d3a2777cc56b0f68f02.d41d8cd9.js, line 377)
[Warning] DEPRECATION: [THEME 13 'Blog Post Styling'] The `isBlogTopic` property path was used in the `discourse/theme-13/discourse/templates/components/blog-image` template without using `this`. This fallback behavior has been deprecated, all properties must be looked up on `this` when used in the template: {{this.isBlogTopic}} [deprecation id: ember-this-fallback.this-property-fallback] This will be removed in ember-this-fallback n/a. See https://meta.discourse.org/t/337276 for more details. (chunk.3d3a2777cc56b0f68f02.d41d8cd9.js, line 377)
[Warning] DEPRECATION: [THEME 13 'Blog Post Styling'] The `imageURL` property path was used in the `discourse/theme-13/discourse/templates/components/blog-image` template without using `this`. This fallback behavior has been deprecated, all properties must be looked up on `this` when used in the template: {{this.imageURL}} [deprecation id: ember-this-fallback.this-property-fallback] This will be removed in ember-this-fallback n/a. See https://meta.discourse.org/t/337276 for more details. (chunk.3d3a2777cc56b0f68f02.d41d8cd9.js, line 377)
[Warning] DEPRECATION: [THEME 13 'Blog Post Styling'] The `model` property path was used in the `discourse/theme-13/discourse/templates/connectors/topic-above-post-stream/blog-post-styling` template without using `this`. This fallback behavior has been deprecated, all properties must be looked up on `this` when used in the template: {{this.model}} [deprecation id: ember-this-fallback.this-property-fallback] This will be removed in ember-this-fallback n/a. See https://meta.discourse.org/t/337276 for more details. (chunk.3d3a2777cc56b0f68f02.d41d8cd9.js, line 377)

[sonny.mendoza (Sonny)]

I’m having the same issue. Hopefully an update of this component fixes this issue @tshenry.

[tshenry (Taylor)]

Thanks for the reports. I will try to fix the warnings this week. This component could really use a general update, but time is unfortunately limited these days!

[tshenry (Taylor)]

Alright, I have addressed all of the deprecation warnings and managed to squeeze in what I feel were fairly critical updates. There’s more that can be done to improve compatibility with other customizations, but I’ve done what I can for now.

REFACTOR: modernization and fixes

Thanks for your patience everyone. Let me know if there are any problems with the update.

[Thierry_Trégaro]

I guess it’s linked to this last update, but how can I remove this “Comments”

no change with

.comments_heading {
    display: none !important;
}

or if I leave the config field blank

(I had to cheat with a “space” but…)

[tshenry (Taylor)]

Thanks @Thierry_Trégaro! That “Comments” heading is new and intended to make replies feel a bit more like the comments section of a blog post.

It should not have been displaying in a normal topic like the one you shared in your screenshot. I have made a fix for that (and fixed a few other minor styling issues at the same time).

Please go ahead and update the component.

If after updating you want to hide the “Comments” heading for actual blog posts too, go ahead and add the following to a separate component:

.comments-heading {
  display: none !important;
}