Blog Post Styling

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.

1 Like