Ticket #876 (closed Defect: fixed)

Opened 5 years ago

Last modified 5 years ago

Adjust image display size to frame in detail panel

Reported by: JuergeN Owned by: jri
Priority: Major Milestone: Release 4.8
Component: DeepaMehta Standard Distribution Version: 4.7
Keywords: Cc:
Complexity: 3 Area: GUI / Usability
Module:

Description

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.

Change History

comment:1 Changed 5 years ago by 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.

comment:2 Changed 5 years ago by 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.)

comment:3 Changed 5 years ago by 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.

comment:4 Changed 5 years ago by jri

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

comment:5 Changed 5 years ago by 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.

comment:6 Changed 5 years ago by jri

  • Status changed from new to accepted

comment:7 Changed 5 years ago by 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.

comment:8 Changed 5 years ago by jri

  • Status changed from accepted to closed
  • Resolution set to fixed
Note: See TracTickets for help on using tickets.