Images that show correctly on the editor are not scaled appropriately on the actual post.

[vrthra]

It seems that the images are not scaled correctly in the timeline.

What it looks like when pasting the image in the editor.

What it looks like when viewing in the time line.

What it looks at a mastodon timeline

It would be great if the image width is similar to how it was shown when editing.

[toddsundsted]

i'm not super enthusiastic about how the presentation looks on either ktistec or mastodon—in the feed, the image window is a fixed size and long or wide posts end up clipped in unattractive ways. maybe the thing to do here is a server setting that controls this—though there will always be pathological cases that are just going to look bad (10000x 100 pixels).

[JayVii]

The semantic UI sets the CSS for the images in the timeline as:

.ui.feed > .event img.extra.image {
  width: 100%;
}

which results in the clipping of images with too much height. Regarding images that are too wide, semantic UI sets this:

.ui.feed img.extra.image, .ui.feed video.extra.video {
  height: 375px;
}

It looks a lot better if this was used instead:

.ui.feed > .event img.extra.image, .ui.feed > .event img.extra.video {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.ui.feed img.extra.image, .ui.feed video.extra.video {
  height: auto;
}

Although there probably should be some width and height limit, particularly for smaller screens unless you want edge-cases that are really awkward to navigate or overflow.

It seems as if sometimes images are zokmed-in/clipped both horizontally as well as vertically. To the very least the best fit of height or width should be used, I suppose. There is likely no perfect option and there will always be some clipping involved. Maybe the UI should make it more obvious that the image is only a preview (mastodon does this with a broder-frame around the image)

[JayVii]

I did some CSS dabbling and come up with this:

/* Try to avoid image and video clipping in feed */
.ui.feed > .event img.extra.image,
.ui.feed > .event video.extra.video
{
    width: 100%;
    height: auto;
    max-height: 800px;
}

This will prevent clipping in most cases, unless the posted image is very tall.

Additionally, if images have the same background as the ktistec ui (for example screenshots), it can be hard to realize where the image ends and the post starts. for this, i added some borders around image and video attachments:

/* Add Image and Video Borders */
img.ui.extra.attachment.image,
.extra.media img.ui.attachment.image,
video.ui.extra.attachment.video,
.extra.media video.ui.attachment.video
{
    border-style: solid;
    border-width: 1px;
    border-color: #808080;
}

I am not sure, whether there should be subjective changes like this in ktistec directly? After all, it is easy enough to hack them into it afterwards.

[toddsundsted]

are there some posts out there that i can take a look at (both on my instance and maybe via my mastodon account) that exhibit this clipping (i definitely see plenty of clipping but i'd rather focus on something specific)? i'd like to see what they look like before/after applying CSS like that.

alternatively, i looks like mastodon is now more flexible in it's presentation. how do you feel about it? i could try to adopt/adapt what they've done.

[vrthra]

Same post, this is what I have

This is what I see in Mastodon:

(The images does not load in Mastodon, which is probably a separate issue)

[JayVii]

alternatively, i looks like mastodon is now more flexible in it's presentation. how do you feel about it? i could try to adopt/adapt what they've done.

@toddsundsted what exactly do you mean by flexible?

Generally speaking, I do like ktistec's presentation a lot. Arguably the mastodon screenshot that @vrthra posted above looks more modern, but that's subjective