Blog Post Styling

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
7 Likes

hi,

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!

5 Likes

Hi!

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.

3 Likes

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?

2 Likes

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.

5 Likes

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

Changes

  • 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:

5 Likes

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,
Andreas.

3 Likes

Hi @amotl! Thanks for reaching out :slightly_smiling_face:

The source of the issue comes from this limitation that’s outlined in the original post:

You can get around this by increasing width of those three images to be 692px wide in an image editor. I tried it out with your example images and it works, but keep in mind the quality will look fairly poor since you are blowing up a small image:

I can PM you the blown-up images if you want. Otherwise, if you can find larger versions of those images ( > 690px), that would be ideal.

3 Likes

Dear @tshenry,

thanks for your emphasizing the important parts of the documentation for us again – sorry for missing that lightboxing thing. Thanks also for your suggestions and for offering manually resized variants of these images. However, going to an image editor for that is not something we want to add to our workflow ;].

Observations

Nevertheless, we would like to share what we did and some observations we had when doing so: When trying to find larger alternatives of the images in question and uploading through copy & paste, it looks like Discourse is limiting them to 690x-wideness on purpose. Bummer!

However, after bumping the defined sizes manually just slightly in the markup, the headline-image-expansion (formerly called image-to-banner-expansion) works flawlessly. You can see that the images are actually large enough and we believe it will only work for images which are actually larger than being designated by Discourse.

We tried to outline it by showing what we did to the following two posts.

32 Bit Teensy 3.x boards - Hardware bazaar - Hiveeyes

  • Original image
    (800 x 228) https://www.pjrc.com/store/teensy36.jpg

  • Materialized after copy&paste as
    ![image|690x196](upload://c0ig9xClnX46LYfr9dsb3yIuFaf.jpeg)

  • Amended to
    ![image|692x197](upload://c0ig9xClnX46LYfr9dsb3yIuFaf.jpeg)

JeeLink - Hardware bazaar - Hiveeyes

Conclusion

Now, we just might accept what we are observing and will definitively be happy that it works when keeping these little rules in mind. However, may way humbly ask about how we could improve the situation wrt. to Discourse limiting the image size after upload? Do you observe the same behavior we are seeing here?

Thanks again for building and sharing this Blog Post Styling component which just adds so much style with so less effort.

With kind regards,
Andreas.

P.S.: We skipped the headline-image-expansion for the post about the Neoway LoRa modem altogether as we haven’t been able to finder larger images, let’s just forget about that guy.

1 Like

We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

after the respective image had been uploaded beforehand as

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

This is cute and makes us happy.


1 Like

if you use a table of content together with blog post styling, then the replies to the main topic will be misaligned. shown in the image below and accessible in this topic in our forum:

:wink:

Thanks for sending through the issue. I haven’t had time to look at compatibility with DiscoToc. It may be a while till I get to it, so you may want to seek out a solution on your own if it’s urgent. PR’s are always welcome.

4 Likes

content text are out of box

I can’t guarantee this component will work with all custom themes, unfortunately. With that said, I’ll take a look when I revisit this component to see if there is a better way to handle cases when a site adds contrast between the posts and the background. If you need a fix quickly, though, I recommend working out the necessary CSS adjustments on your own.

2 Likes

very much thxs though ,fyi this is the fakebook theme.
can you point which part of css code i should tweak. i am not that familiar with js and css but i will give it a try