HTML export to use cropped, centered images

[kensanata]

As discussed here: https://github.com/kensanata/mastodon-archive/pull/100

[lightnin]

Is this also where we should describe the need to handle the various configs of 1,2, and 3 images in a way that's similar to how Mastodon handles multi-image toots? Here's how mine stand currently.

[kensanata]

Yeah. I want something like this:

 +-------------------------+
 |                         |
 |                         |
 |                         |
 |                         |
 |                         |
 +-------------------------+
 +------------+------------+
 |            |            |
 |            |            |
 |            |            |
 |            |            |
 |            |            |
 +------------+------------+
 +------------+------------+ +--------+--------+--------+
 |            |            | |        |        |        |
 |            |            | |        |        |        |
 |            +------------+ |        |        |        |
 |            |            | |        |        |        |
 |            |            | |        |        |        |
 +------------+------------+ +--------+--------+--------+
 +------------+------------+
 |            |            |
 |            |            |
 +------------+------------+
 |            |            |
 |            |            |
 +------------+------------+
 +------------+------------+
 |            |            |
 |            |            |
 +------------+------------+
 |            |            |
 |            |            |
 +------------+------------+
 |            |            |
 |            |            |
 +------------+------------+

Not sure about how to layout 5. :)

[lightnin]

That looks great to me. Seems like it should be possible to find and copy whatever code does this in the mastodon source? I've never sniffed around and won't have time to now (still got a few chapters to write)... but theoretically it's there.....

[kensanata]

I think the core code change is in html.py. Currently we only differentiate between "one" media attachment and "more". The code passes "one" or "more" to the media_template which uses it as a CSS class. Everything else, ideally, would happen in CSS.

        media = media_template % (
                'more' if len(attachments) > 1 else 'one',
                ''.join(previews))

I think the solution would be to change the code to use classes "one", "two", "three", "four" and "more", and then just write more CSS.

Currently, there's this:

.more a {
        max-width: 50%%;
        max-height: 50%%;
        display: block;
}

If you have one, height and width should be 100%. If you have two, height should be 100%. If you have three, the first one should have height 100%. And so on. At least that's my naive approach.