ML - image height style and responsive templates

[Timbalu]

Our Media Library inserts an image like this, i.e.

Code: Select all

<!-- s9ymdb:48 --><img alt="" class="serendipity_image_left" src="/uploads/moon.png" style="height:280px; width:320px" />

In responsive templates the 'height' style is bad to have, if the image is bigger than content.

Is there any specific reason we need to keep this automatically inserted? Why didn' we have removed it by now, since it works well with the 'width' style only?

[bernd_d]

I already asked about removing of dimensions in this thread: http://board.s9y.org/viewtopic.php?f=10 ... p=10435218

I'm still thinkin we should remove this tags.

[Timbalu]

Ah yes, now I remember! But my request is to remove 'height' only, since then a responsive template (how it is commonly build these days) will size the image automatically and still has a quick read dimension for rendering purposes.

[yellowled]

But my request is to remove 'height' only, since then a responsive template (how it is commonly build these days) will size the image automatically and still has a quick read dimension for rendering purposes.

Why would we remove the height property if modern solutions (yes, even the CSS-only ones, which are not really “solutions” under specific circumstances) work just fine with both width and height property present? Can you give me an example of a case where the height attribute is “bad”?

And for the record, the reason why we emit the width and height attribute is to speed up page rendering in browsers which is faster if both attributes are present. I already explained this in the German thread on this topic.

YL

[Timbalu]

I wonder why you make a plea here. You can also take 2k11 for this to test.

To answer the question. Take an example image, where the width is bigger than content. ie

Code: Select all

<div class="serendipity_imageComment_left" style="width: 1120px">
<div class="serendipity_imageComment_img"><!-- s9ymdb:44 --><img alt="" class="serendipity_image_left" src="/uploads/image.jpg" style="height:825px; width:1120px" /></div>
<div class="serendipity_imageComment_txt">hihi</div>
</div>

This gets rendered to a width fitting to #content, but still lives with the given height, since there is enough space for the entry in the height, which is 1.120px × 825px (Skaliert zu 630px × 825px). If you take away the height style before saving, it scales right.

[yellowled]

I wonder why you make a plea here.

Because I have seen people use img elements with width/height attributes or without width/height attributes in responsive designs, but never with just one of both attributes. It just doesn't make any sense to me.

Take an example image, where the width is bigger than content.

http://s9y.netzgestaltung.net uses a standard 2k11, which – crunching the numbers a bit – means the maximum width of an article's content is 630 or 631 pixels (rounding errors in browsers can always happen in fluid width layouts). So my test image is 1280x720, which means the ratio is 16:9.

See http://s9y.netzgestaltung.net/archives/32-Scaling.html

Dimensions of the image in the article (desktop resolution, so max article width): 630x355, which indeed is not exactly 16:9, but it's off by (technically) half a pixel. That's close enough for me.

I have no idea how you would get an image in an article so that the width is scaled down, but the height is not. I just don't see how that would happen (which is why I asked for an example).

YL

[Timbalu]

Ah ok, see the difference.

Yours is using width="1280" height="720":

Code: Select all

<div class="serendipity_imageComment_left" style="width: 1280px">
<div class="serendipity_imageComment_img"><!-- s9ymdb:10 --><img class="serendipity_image_left" width="1280" height="720"  src="/uploads/test.jpg"  alt="Scaling" /></div>
<div class="serendipity_imageComment_txt">Hihi</div>
</div>

mine is using style="height:825px; width:1120px", which is the way it was dropped by ML. Since this is inline, it overwrites the scalar value, I assume. Since the responsive css template rule is based to the width style, isn't it?! In your case it comes as an img tag attribute, which might get a higher access level by browser in this case?

And yes, in the way you use it, it it is scaled down perfectly well.

So the question is: Who dropped that line like this?

EDIT:
That indeed was the right question. It is CKEDITOR. It changes tag attributes to styles. HOW BAD!

[yellowled]

Since the responsive css template rule is based to the width style, isn't it?!

The CSS for reponsive images is basically just

Code: Select all

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

In your case it comes as an img tag attribute, which might get a higher access level by browser in this case?

Techniaclly no, it's just because there are no inline styles on the img element if the image is inserted via the s9y media db, just image attributes. And those styles (above) “overwrite” them, which makes the whole thing work.

That indeed was the right question. It is CKEDITOR. It changes tag attributes to styles. HOW BAD!

Also, the Code which CK Editor emits (in my test, at least) does not really match the code emitted by the s9y media library in the non-wysiwyg editor:

Code: Select all

<div>
<div><!-- s9ymdb:10 --><img alt="Hihi" class="serendipity_image_left" src="/uploads/test.jpg" style="height:720px; width:1280px" /></div>

<div>Hihi</div>
</div>

The classes for the div containers are missing altogether (CKE 3.2.0 here).

YL

[Timbalu]

And those styles (above) “overwrite” them, which makes the whole thing work.

That is what I meant. I don't know why I wrote "higher access level"... it should have been "lower".

It seems you still rely on the old version, since this problem should already be solved (see changelog).
If you check the help button, it should emit: CKEditor 4.3.2. If not, you still use the cached version!

[yellowled]

CKEditor 4.3.2 (revision ba625e6)

However, that must have come up from the cache recently because, yes, this version now emits the proper markup (apart from the incorrect inline styles).

YL

[Timbalu]

Yes and that attribute to styles issue is quite old and makes a lot of frustrating headache to users. There is no real and simple solution without digging very deep into the code. I found some replacements by yet, but still have the issue that it isn't saved properly and does not work for the source-view-mode.
That is a very sad property of ACF - even if you turn it off, you will have the issue of a disappearing height atrribute.

BTW, would it work to use the responsive image css as !important?

[yellowled]

BTW, would it work to use the responsive image css as !important?

I don't think so. The inline style sets width and height, while the responsive images CSS sets max-width and height. Also, I'd like to avoid !important in 2k11 style.css as far as possible because it might influence use of the user.css for users.

Let's put it this way: if it is absolutely impossible to fix this in CKE at all, we can still test if this works, but I'd prefer a different solution.

YL

[Timbalu]

After all I found a solution which brings me back to the origin question... and solution.

I have a working sample, which removes the style {height} rule, when added by CKEDITOR.
I can not add the height back to an img attribute, since then the height will be automatically (re) added to style again.

The current pretty stable result is now: img alt class src style{width}. That is the only working state to get arround this issue in a relative simple way!

Remember: Turning ACF OFF, will leave code alone, theoretically, but still removes the height="" attribute! (Which is not exactly what I understand by declaring: "NO HOUSEKEEPING!")

EDIT: I even found a workaround for this last weird ACF OFF issue.

[yellowled]

I have no idea what ACF is, but I probably don't need to know.

There is two ways to make responsive images (CSS-only) work. Either

Code: Select all

<img class="WHATEVER" src="URL" alt="ALTTEXT" width="WIDTH" height="HEIGHT">

or

Code: Select all

<img class="WHATEVER" src="URL" alt="ALTTEXT">

Both work fine with the responsive CSS solution and scale properly. The first one is preferrable because of the page rendering perfomance improvement.

If I understand you correctly, all that is possible with CKE without hacking it too much is

Code: Select all

<img class="WHATEVER" src="URL" alt="ALTTEXT" style="width:WIDTH">

which is pretty bad.

That would mean we'd have to “overwrite” the width CSS attribute (not HTML attribute) with “auto”, which could have side effects, and would lose the better rendering due to the lack of width/height HTML attributes. Also, we'd have to find a selector which provides more specifity than the inline style, which most likely means !important.

Trying to think outside the box here – do we have to use the media library button in CKE or could we add our own media library button outside of CKE which still inserts code into CKE?

YL

[Timbalu]

Advanced Content Filter = ACF, which I call Housekeeper!

If I understand you correctly, all that is possible with CKE without hacking it too much is
<img class="WHATEVER" src="URL" alt="ALTTEXT" style="width:WIDTH">
which is pretty bad.

That would mean we'd have to “overwrite” the width CSS attribute (not HTML attribute) with “auto”, which could have side effects, and would lose the better rendering due to the lack of width/height HTML attributes. Also, we'd have to find a selector which provides more specifity than the inline style, which most likely means !important.

No! There is no change in CSS needed. It just works out of the box. I have tested it! I thought that was clear from the beginning. Try with 2k11.

Trying to think outside the box here – do we have to use the media library button in CKE or could we add our own media library button outside of CKE which still inserts code into CKE?

I don't think this is possible. Everything - whereever it comes from - dropped to the textarea is touched bei CKEDITOR routines. (And you still have to be able to switch the editor source/html modes multiple times.)