#3769 - Reconsider how media images are handled

This is a spacer post for a website comment topic. The content this topic relates to: #3769 - Reconsider how media images are handled
It would need to be...

[itemprop="articleBody"] img:not([width]):not([height]) {
max-width: 100%;
height: auto;
}

Otherwise if you explicitly scale with a height (expecting the width to be automatically kept in proportion), it'll get skewed.

We already do this if the 'attachment' CSS class is present, which is the case for attachments that are set with 'framed'.

We can consider doing it more broadly. In such a case though, it shouldn't just be considered for news, it should be considered as a general rule.

Adding a link to make the full image open in an overlay would be thorny. The presence of such a link would depend on screen size, so JavaScript would need to be involved. And then, we don't necessarily want to assume it, so it would need to be a media setting (some people will just want images to be 'responsive', i.e. scaled with the pixels available but not caring about the image being expandable). But if we make it a media setting, we have to take into account media settings are not available by default for images in WYSIWYG because they are immediately set to 'WYSIWYG editable' and with no media setting dialog (for simplicity). At least OTTOMH that's what happens.

Really to approach this well we should consider the full set of use cases for how people might use images, and how to make those properly configurable without adding too much cognitive overhead to the settings.
(This tracker issue is now being used to hold any ways that attachment/media images should be improved)

A forum topic relating to attachment images, the need for padding:
https://compo.sr/forum/topicview/browse/developing/imgages-in-forums.htm?post_id=6818&redirected=1#post_6818
Working on this...

1) I think we can universalise the "max-width: 100%; height: auto;" on all images (without width/height specified). I can't think of any situation where people would want an image to overflow, it's just a legacy behaviour of browsers we can override.

2) If images are set with automatic settings, they will be made clickable as requested. People can remove the <a> in the WYSIWYG if they do not want that.
Improved image float handling in CKEditor also.
0 guests and 0 members have recently viewed this.