To cluster images in social posts / comments #237

New Issue

freakoverse · 2025-03-01T23:49:39Z

freakoverse commented

2025-03-01 23:49:39 +00:00

Let's assume there's a post with the following:

This is a text
img1.png
img2.png img 3.png
img4.png
This is another text
img5.png img6.png
img7.png
This is yet another text
img8.png

The post will render as is, however, for a better viewing experience, instead of rendering each image as

and so on, let's do it like this / where the result/render for the above would be:

This is a text

<div class="IBMSMSMBSSCL_CBImgGroup" style="grid-template-columns: 1fr 1fr 1fr;">
  <img>
  <img>
  <img>
  <img>
</div>

This is another text

<div class="IBMSMSMBSSCL_CBImgGroup" style="grid-template-columns: 1fr 1fr;">
  <img>
  <img>
  <img>
</div>

This is yet another text

<div class="IBMSMSMBSSCL_CBImgGroup" style="">
  <img>
</div>

With this, I'd be able to cluster groups of images if they're more than one, and control how they're presented (in a nice condensed way).
If there's one image, then no styling (just the class), if there's two then class + style of 1fr 1fr, and if there are three images or more then class + styling of 1fr 1fr 1fr.

I've attached an end result example (and i've also add the css)

Let's assume there's a post with the following: This is a text img1.png img2.png img 3.png img4.png This is another text img5.png img6.png img7.png This is yet another text img8.png The post will render as is, however, for a better viewing experience, instead of rendering each image as <img> <img> and so on, let's do it like this / where the result/render for the above would be: This is a text ``` <div class="IBMSMSMBSSCL_CBImgGroup" style="grid-template-columns: 1fr 1fr 1fr;"> <img> <img> <img> <img> </div> ``` This is another text ``` <div class="IBMSMSMBSSCL_CBImgGroup" style="grid-template-columns: 1fr 1fr;"> <img> <img> <img> </div> ``` This is yet another text ``` <div class="IBMSMSMBSSCL_CBImgGroup" style=""> <img> </div> ``` With this, I'd be able to cluster groups of images if they're more than one, and control how they're presented (in a nice condensed way). If there's one image, then no styling (just the class), if there's two then class + style of 1fr 1fr, and if there are three images or more then class + styling of 1fr 1fr 1fr. I've attached an end result example (and i've also add the css)

Screenshot_212.jpg

190 KiB

freakoverse added the

Kind/Enhancement

Priority

Low

labels 2025-03-01 23:49:39 +00:00

freakoverse added this to the Extra Features project 2025-03-01 23:49:39 +00:00

Sign in to join this conversation.