When adding a new image, give it a specific width and height in the Image2 widget. Upon display of the content, the resized dimensions are ignored. Ideally, the display should honor the entered dimensions as the maximum size, but be smart enough to shrink the image if the browser window is too small to accommodate the size.

Comments

dmkelner created an issue. See original summary.

jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented

More background from dmkelner via email:

It appears that the ckeditor.css (align-left or align-right) sets the image width to auto. If I make the image smaller than the actual size in the image2 dimensions, the image 2 dimensions are being ignored. Any idea how to get the css to take the image2 dimensions into account?

In my testing, it looks like there is no way to unset width: auto with more css overrides… so the only option is to copy the ckeditor_image2.responsive.css and/or the ckeditor.css file into your theme and remove the line that sets width:auto, then register the overridden file in your theme’s info file.

This needs to be investigated further to see if the problem is with ckeditor.css (as mentioned by Dori) or if it is ckeditor_image2.responsive.css, and if we can remove the width:auto without any visual repercussions.

  • jwilson3 committed 885823c on 7.x-1.x 
    Issue #2620644 by dmkelner, jwilson3: Image resizing not honored
jwilson3’s picture

jwilson3
Primary language English
Location Ecuador
commented
Status: Active » Fixed

I've pushed a fix to 7.x-1.x branch for this.

dmkelner’s picture

dmkelner commented

Thanks, I was just asked about this, so great timing. I'll test it out this week. :)

dmkelner’s picture

dmkelner commented

This is working out of the box to retain the image size. However, it does not appear to honor align-left or align-right. My old code with the image showing at full size generated:

<img class="align-left" width="226" height="151" src="/sites/default/files/images/Lance%20Cooper2.png" alt="">

My new code generated:

<img width="180" height="120" src="/sites/default/files/images/Lance%20Cooper2.png" alt="">

You can see that it honored the resizing, but is ignoring the alignment. Tested this with right align as well and no luck.

I do obviously have align-left and align-right classes allowed in the text format.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.