Proposal: New HTML/CSS for images from media db

[yellowled]

First of all: This is not necessarily a proposal for 1.4. It's probably a critical, sensible thing which needs extensive and careful testing, but I feel it's something we should address in the future - the HTML and CSS code for images inserted from our trusty media db.

So without further ado: I spent my Sunday afternoon setting up some test pages (static HTML, not s9y, but using s9y code) and examples along with code comparison and some notes for you guys to check out and test. Anything else you might want to know (hopefully) is on those test pages.

Start at http://yellowled.de/tmp/s9y-img/index.html

I have tested those in Firefox 3, Opera 9.5 and IE6. With critical stuff like this, browser compatibility is very important, so someone please check these out in other browser( version)s.

YL

[sonichouse]

I have tested those in Firefox 3, Opera 9.5 and IE6. With critical stuff like this, browser compatibility is very important, so someone please check these out in other browser( version)s.
YL

Great stuff, works in Firefox 2.0.0.20, Chrome 1.0.154.36 and IE 7.0.6001.18000.

[yellowled]

I have tested those in Firefox 3, Opera 9.5 and IE6.

Great stuff, works in Firefox 2.0.0.20, Chrome 1.0.154.36 and IE 7.0.6001.18000.

Thanks, Steve.

I actually don't think we have to check every minor version number

So that's FF2, FF3, Opera 9, IE6, IE7 and Chrome 1. Mac, anyone?

YL

[Don Chambers]

OK in Safari 3.1/windows, no surprise there. I would not expect any cross-broswer issues.

I recall a desire to change the padding to margins a long time ago... must have been like so many things that slipped between the cracks.

I am not a huge fan of inline styles, so I can appreciate removing them from the media library insertion code.

That being said, I do anticipate a problem. YOU know how to add those styles... so do I.... so do dozens of other people. Problem is, those who DO know how could be in the minority.... and once again, we have countless templates out there that would need to be modified to include something they did not previously require, and probably didn't add.

I am not saying that as a reason NOT to proceed... just pointing out what may already be obvious.

Great job for taking your sunday afternoon to work on this!!!

[yellowled]

I would not expect any cross-broswer issues.

I'm still not sure whether the floated images need some kind of clearing.

I am not a huge fan of inline styles, so I can appreciate removing them from the media library insertion code.

Neither am I, and I'd love to remove them altogether, but I think that's just impossible.

YOU know how to add those styles... so do I.... so do dozens of other people. Problem is, those who DO know how could be in the minority....

Erm ... if the basic styling, i.e. floats and margins, remain inline, what's the big deal? Anything else had to be done via the style.css before as well, and styling a dl like the divs before isn't really different?

and once again, we have countless templates out there that would need to be modified to include something they did not previously require, and probably didn't add.

Yes, but as you also noticed, we can't really avoid that if we're determined to improve the basic HTML code generated by our trusty blog system.

In fact, this is the one reason why I was initially suggesting to keep this in the drawer for 1.5 - it may be a better idea to take this one step at a time.

Garvin will have to make the final call on this aynway since the code is generated in serendipity_editor.js, and I'm not sure I can translate my HTML into JS

YL

[garvinhicking]

Hi!

This will definitely be part of 1.5, it will need much testing. I really enjoy your work on this, much appreciated!

Best regards,
Garvin

[Don Chambers]

@YL - I thought you were suggesting that all the styling be removed from the insertion code.... my misunderstanding. Looks like we will have plenty of time to thoroughly test.

[d_cee]

Hey YL

great job - and amazed you've got the time at yuletide

They look fine - and identical - in FF 2.0.0.20 and Safari 3.1.2 mac.

I too would like to see the removal of the inline code for images as I'm always either having to remove it myself or amend the image insertion code for sites where the client updates themselves. Bit of a bugger updating templates though I guess.

However...

Merry Christmas to all the Serendipity developers - and users

Dave

[yellowled]

First of all: Glad you all like the code

I too would like to see the removal of the inline code for images as I'm always either having to remove it myself or amend the image insertion code for sites where the client updates themselves. Bit of a bugger updating templates though I guess.

I think every template designer would like to see as much inline styles removed from any part of s9y as possible. That's because inline styles usually make our job harder.

But for the sake of our unexperienced users, we're gonna have to keep at least the very basic inline styles which provide the basic "functionality" of the various image classes: alignment/floating. However, they have been reduced to a minimum in this new code, so we'll not have to type "!important" that much in the future

YL

[judebert]

Wouldn't the inexperienced users tend to use the editor buttons for media insertion? And in that case, does it matter whether there's inline styles or not?

Or is it really a problem of compatibility with existing entries that already have inline styles?

[yellowled]

Wouldn't the inexperienced users tend to use the editor buttons for media insertion?

Yes, of course. I'd even say that experienced users also tend to use the editor buttons, simply because it's way simple to add media to entries than by adding the code manually.

Actually, the code presented on my demo pages is supposed to be inserted by serendipity_editor.js if somebody uses the editor buttons. It's not meant to be inserted into entries manually, just in case that wasn't obvious

And in that case, does it matter whether there's inline styles or not?

Imagine inserting the new code without any inline styles. What would be missing in the various cases?

Without captions/image comments:

* .serendipity_image_center: without "display: block; margin: 0 auto;", the image wouldn't be centered
* .serendipity_image_single: that one would be okay - it doesn't have any inline styles
* .serendipity_image_left: without "float: left; margin-right: 5px;", the image wouldn't be floated at all; the margin-right wouldn't be that bad, but it wouldn't look too well, either
* .serendipity_image_right: see .serendipity_image_left, just switch sides

Basically, without inline styles, every image would look just like .serendipity_image_single. No floats, no alignment.

Now, with captions/image comments, these would also apply. There would be neither floating nor horizontal alignment without inline styles. Plus, I'm using a definition list here, which would be styled according to browser default, which means the caption/image comment would be indented.

That's what I mean by "basic styling" and "functionality" - floating, horizontal alignment and margin are basic "functions" of the images which are also assigned to them in out media-db-insertion dialog (which would need to be altered also, the additional class needs to be added to it). Whenever $USER inserts an image, he/she also selects how to align it.

Now, if you're using a template which doesn't have any styling for images from the media db, choosing this alignment is pointless, which is why I vote for inline styles, although I don't like them. They're the best way to assure that images are at least aligned the way they're supposed to be aligned. All the other styling (borders, colors, text-size and font) are just eye-candy and should be added in the template's style.css.

Or is it really a problem of compatibility with existing entries that already have inline styles?

Uh. Jude, that's quite a bombshell - I hadn't even thought about that ... hmmm. Actually, I think with these changes, there is no backwards compatibility, and frankly, I don't think that can be done. Hohum. Let me check. (That might take a few days, I'm working over Xmas.)

Any chance we could provide some kind of script which alters the code for inserted images in the entries of a blog? Something like s/old code/new code/ for all entries in the database?

YL

[yellowled]

Uh. Jude, that's quite a bombshell - I hadn't even thought about that ... hmmm. Actually, I think with these changes, there is no backwards compatibility, and frankly, I don't think that can be done.

Erm. I'm a bit stupid today. Of course there would be backwards compatibility, because all the old images would still have the old inline styles, right? Silly me.

Then again, this might cause issues with themes which actually do have extra styles for media db images in style.css ... but I guess that would equal the alteration necessary to some templates for the new code in the core plugins shipped with 1.4 ... hell, this is really making me dizzy

YL

[seraphyn]

Opera 10 Beta, conkeror 0.9 (Webkit), hv3 on Debian Lenny/FreeBSD works fine too.
Did you need dillo 2.0? I could compile it for the two OS, too
Greetings

[yellowled]

I could compile it for the two OS, too

Nah, don't break a leg. Thanks for testing the other browsers, but this topic has been kind of on hold. Whenever we finally pick it up again, we're gonna have to re-test altogether.

YL

[seraphyn]

Okay, will be there.
Chris