Adjust image display size to frame in detail panel

[JuergeN]

As a user I want to see a picture (image) in the detail panel. The image display size sould be adjusted automaticly to the frame in the detail panel.

[Malte]

I accidentally stumped upon this and thought of a solution. So, let us keep in mind that the rendering of images (and thus this issue) currently happens in two cases:

• An image embedded into a HTML field with the help of the dm4-images plugin.
• An image file rendered by the dm4-files plugin.

I think we should solve this issue through providing a new standard CSS rule.

The case would be IF an image exceeds the current width of the Detail Panel, its widths-size is adjusted. The desired behaviour would be, images get just down-scaled (never up-scaled) when they appear in the so called "Page Panel".

Question to the dm4-webclient developer:
Would the following selector and definition cover both cases?

#page-content .box img {
    max-width: 100%;
}

If so, do we want to introduce this rule just for the dm4-files page renderer? or also for the dm4-images plugin. What do you think?

I think to not truncate images in the dm4-webclient page display makes sense in both cases.

I just introduced this rule into the upcoming dm47-deepamehta-images plugin and it seems to work as expected.

[jri]

Thank you, JuergeN and Malte, for valuable input!
In DM 4.8 the image size problem will be solved.
(The CROWD people have the same need.)

[Jörg Richter <jri@…>]

In 0f08b825f56c9e7469bd79a36421afb38937ba9c/deepamehta:

Webclient: auto-scale detail panel images (#876).

Images displayed in the detail panel never exceeds the panel width.
If the image is larger it is auto-scaled down to fit the detail panel.
This applies to all images, regardless if it originates from CKEditor or an image File topic.

The Webclient applies this rule:

#page-content img {
    max-width: 100%;
    height: auto;
}

height: auto avoids distortion in case the <img> element has the height attribute already set. This is the case when the image was inserted via CKEditor.

Note: the same rule is added to the CKEditor content stylesheet. That is the same auto-scaling is applied while in edit mode.

See #876.

[jri]

The same type of auto-scaling should be applied to videos (embedded via CKEditor) as well.

[Jörg Richter <jri@…>]

In d56fd380e37e72054b4c91ed5167205de4f66d4b/deepamehta:

Webclient: auto-scale videos (#876).

Videos displayed in the detail panel never exceed the panel width.
If the image is larger it is auto-scaled down to fit the detail panel.

The Webclient applies this rule:

#page-content .embeddedContent > iframe {
    max-width: 100%;
}

Note: the same rule is added to the CKEditor content stylesheet. That is the same auto-scaling is applied while in edit mode.

See #876.

[Jörg Richter <jri@…>]

In 4a87647ef8f795bc5fd38e43fa01217d5be32538/deepamehta:

Webclient: captioned images have no border (#876).

Captioned images are left/right aligned with the page content.
The caption itself is rendered in italic in order to distinguish it from following text.

See #876.