Thoughts from the markup bunker

Paul · 2008-05-15 01:54:12

Nobody ever really seemed to have got the handle on using images for status icons either in 1.2 or it seems 1.3. No doubt my fault for not writing a decent set of instructions, it isn't actually difficult. I'm very tempted to add a status column to the table and then come up with an easier way of swapping out images.
Tabs. They look cute and people understand them but they have a drawback, specifically extensibility or the lack thereof. The tab menus, particularly in admin where absolute positioning is used are fragile. If extensions start adding items its possiible to end up in an unholy mess. Vertical menus have the advantage that they can be added to without any problems. The downside is they take up horizontal width which is always at a premium. Any thoughts?
Large image handling. This has been a permanent headache. The conclusion I reached sometime ago is the only slick way to deal with it is javascript. Nothing complex like lightbox but js does have the advantage that its aware of the image dimensions. There would have course have to be a fallback but at least the majority of users would have a decent experience.

NB: Connor, lists are working nicely.

StevenBullen · 2008-05-15 02:04:25

1. Im with what you decide paul as your the CSS master...
If people having problems with updating status icons then maybe a little improvement on documentation is required for that.

2. Tabs is great on profile. But admin I agree needs to be changed.
I was thinking along the same lines as you paul. With lots of extensions installed its going to become a mess, at least with going vertical you could install a 100 extensions (lets hope not ).

If you do go vertical for number 2. Could we make it possible so that added extensions will not be in the same list as the main admin options. Simliar to 1.2 really.

EDIT: You added 3. whilst I was replying to the other 2.
3. Sorry in what sense do you mean 'Image handling'? The loading of images or just massive images in smaller space?

Last edited by StevenBullen (2008-05-15 02:06:19)

Paul · 2008-05-15 02:13:12

3. I meant massive images in small space. There are several solutions all of which have drawbacks

Crop images but turn them all into links so they can be popped up easily.
Use css to shrink image and also make them links. Problem is it doesn't work in IE6 and the quality is badly degraded.
Scroll. Really difficult to do because images are inline and you have to make them block level to scroll. That means small images will no longer line up next to each other. The only way this would work is to use simple js just to ascertain if the image is too wide and then asign it a class.
Scroll the whole post. It sorts of works but is ugly particularly if you have scrollng code boxes in the same post.
Use javascript.

StevenBullen · 2008-05-15 02:18:18

Well for sure it would be E with degradation as A.
My opnion.

Last edited by StevenBullen (2008-05-15 02:18:51)

kpdesign · 2008-05-15 04:11:06

Paul wrote:

Tabs. They look cute and people understand them but they have a drawback, specifically extensibility or the lack thereof. The tab menus, particularly in admin where absolute positioning is used are fragile. If extensions start adding items its possiible to end up in an unholy mess. Vertical menus have the advantage that they can be added to without any problems. The downside is they take up horizontal width which is always at a premium. Any thoughts?

I like the tabs, but I do understand your concerns with regard to listing links to the installed extensions.

Would it be possible to keep the tabs, adding one for Extension Settings, and, on that page, include a vertical menu (left or right) with the links to the installed extensions so that people could access them to change settings, etc.? The current extension install/uninstall section is fine as is, but maybe my suggestion would be a compromise to achieve the best of both?

Just a thought....

Edit: There could also be a link called Extensions included in the Settings tab with the same vertical menu idea as above. Just another variation on my original idea.

Last edited by kpdesign (2008-05-15 04:15:48)

Jérémie · 2008-05-15 06:59:56

Paul wrote:

Nobody ever really seemed to have got the handle on using images for status icons either in 1.2 or it seems 1.3. No doubt my fault for not writing a decent set of instructions, it isn't actually difficult. I'm very tempted to add a status column to the table and then come up with an easier way of swapping out images.

I don't understand the issue... the image is in the HTML source (in the template therefore), what could be simpler?

Tabs. They look cute and people understand them but they have a drawback, specifically extensibility or the lack thereof. The tab menus, particularly in admin where absolute positioning is used are fragile. If extensions start adding items its possiible to end up in an unholy mess. Vertical menus have the advantage that they can be added to without any problems. The downside is they take up horizontal width which is always at a premium. Any thoughts?

Can the tabs be done without real absolute positioning? If that's so, the worst case scenario would be to have Tabs on several lines. A few graphics tweaks on them to make it readable, and it should be good to go.

Also, maybe include in the Extension Writing Guidelines that extension need to be able to install themselves both in their own tab, or under a specific tab.

Large image handling. This has been a permanent headache. The conclusion I reached sometime ago is the only slick way to deal with it is javascript. Nothing complex like lightbox but js does have the advantage that its aware of the image dimensions. There would have course have to be a fallback but at least the majority of users would have a decent experience.

Javascript has the big advantage of being able to resize images for the best user experience possible for each user. It can compute the width of the real, current, post column, add the appropriate margin, whatever, and resize to that.

But won't that be resource hungry? If a pocket computer, or one of the new lower Atom or Via tabletop cheap thing, has to display a thread full of quite large images and resize them all, could it handle it? (it's not rhetorical, it's a real question ).

And degrade as cropping with a link to the full image.

Paul · 2008-05-15 10:37:29

Jeremie: the problem with two level tabs is to get the right semantic structure a nested list is used for the submenu. That requires absolute positioning. Once the menu is absolutely positioned wrapping the content onto two lines ceases to work i.e. the second line would just overlap the content below.

There is an alternative which is robust and that is to put the submenu in an entirely seperate list. This, I think, is what wordpress does. The problem with that is the end user is then stuck with tabs. They would have difficulity in restyling it as a vertical menu because the vertical menu can only be done properly wth a nested list.

kpdesign: Worth considering certainly.

fmimoso · 2008-05-15 11:17:24

1. Add the instructions, nothing else, I think it works perfectly as it does. Well, I've been adding a background image to the CSS class, that's the right way to do it, right?

2. I like the Vanilla or the Wordpress solution: one tab menu with the main functions, then sub-menus arranged vertically or horizontally, you choose it, in this case one Extensions tab, and then one sub-menu for each extension.

3. Crop/resize (is it possible to leave it to user/admin preference?) -> link -> real size.

P.S. "There would have course have"? Is it a typo, did you mean "of course"?

Paul · 2008-05-15 11:20:41

1. Yes thats the right way. Maybe I should start a css tutorial section in the wiki.

StevenBullen · 2008-05-18 13:28:30

Paul wrote:

1. Yes thats the right way. Maybe I should start a css tutorial section in the wiki.

Sounds good to me.

The profile menu could go down the same route as the admin menu. I added quite a few tabs and it dont look great.

orlandu63 · 2008-05-25 12:24:25

For number 3, did you try #entry-content img { max-width: 100% } ?

Smartys · 2008-05-25 12:29:06

Paul wrote:

3. I meant massive images in small space. There are several solutions all of which have drawbacks
Crop images but turn them all into links so they can be popped up easily.
Use css to shrink image and also make them links. Problem is it doesn't work in IE6 and the quality is badly degraded.
Scroll. Really difficult to do because images are inline and you have to make them block level to scroll. That means small images will no longer line up next to each other. The only way this would work is to use simple js just to ascertain if the image is too wide and then asign it a class.
Scroll the whole post. It sorts of works but is ugly particularly if you have scrollng code boxes in the same post.
Use javascript.

Yes, he did

Paul · 2008-05-25 12:34:38

orlandu63. That was included in option B.

orlandu63 · 2008-05-25 12:59:46

Oops, my apoligies. Anyway, the simplest solution is to make sure users don't directly link huge images. It's either that, CSS or JS. Keep in mind that only a small percentage of people have JS disabled, so users will have less incentive to properly link the image and instead rely on the JS to "fix" it for them, but in turn the users with JS disabled will suffer. I'd use a mix of user intervention and CSS: once the user realizes "oh crap, this image looks terrible," he'll properly link it.

Mindflyer · 2008-05-25 13:17:51

Paul wrote:

Large image handling. This has been a permanent headache. The conclusion I reached sometime ago is the only slick way to deal with it is javascript. Nothing complex like lightbox but js does have the advantage that its aware of the image dimensions. There would have course have to be a fallback but at least the majority of users would have a decent experience.

What about using GD libraries to create thumbnails?

Smartys · 2008-05-25 13:20:23

These images aren't uploaded, so you have a lot of potential issues there.

Rich Pedley · 2008-05-25 13:29:25

My thoughts:
1. Adding status icon images

I did get a handle on it. Can't see what the problem is

Ok it wasn't easy to start with. What about creating some default image styles that can be added to a theme. It could include adding images to the brd-navlinks as well as online/offline etc. The famfam (IIRC) icons can be freely used and I'd suggest using those as a default set.

It fits in quite nicely because I was thinking of doing it anyway - releasing a default logo CSS with images. I think for punBB we ended up with about 26 small images, but fluxBB may need a few more.

2. Tabs

Wordpress 2.5 handles it quite well, and the various menus wrap quite nicely.
But I moved over to Horizontal for top level, and Vertical for submenu's for some projects when I realised that the menu's had grown too large.

You've mentioned the admin side, but don't forget the users profile section as well.

Providing Forms are laid out well, with good CSS it shouldn't be too much of a problem. (I thinking of setting width sizes in em or %).

3. Large image handling.

Lightbox, or one of the derivatives, is OK to use as an enhancement. I quite like them, and if correctly implemented can be accessible as well. But that is just fro viewing the image, and is easily added to a link. Surely the main concern is what actually appears, and for that a max img width should be settable by the forum admin (I don't use images that much on forums).

Then the lightbox enhancement would be ideal as an extension.

Rich Pedley · 2008-05-25 13:30:39

Smartys wrote:

These images aren't uploaded, so you have a lot of potential issues there.

aha - ok in that case, the image should have a max width set. Yes the image won't look great, but if it is a link to the full size one it shouldn't be a problem.

Forums

#1 2008-05-15 01:54:12

Thoughts from the markup bunker

#2 2008-05-15 02:04:25

Re: Thoughts from the markup bunker

#3 2008-05-15 02:13:12

Re: Thoughts from the markup bunker

#4 2008-05-15 02:18:18

Re: Thoughts from the markup bunker

#5 2008-05-15 04:11:06

Re: Thoughts from the markup bunker

#6 2008-05-15 06:59:56

Re: Thoughts from the markup bunker

#7 2008-05-15 10:37:29

Re: Thoughts from the markup bunker

#8 2008-05-15 11:17:24

Re: Thoughts from the markup bunker

#9 2008-05-15 11:20:41

Re: Thoughts from the markup bunker

#10 2008-05-18 13:28:30

Re: Thoughts from the markup bunker

#11 2008-05-25 12:24:25

Re: Thoughts from the markup bunker

#12 2008-05-25 12:29:06

Re: Thoughts from the markup bunker

#13 2008-05-25 12:34:38

Re: Thoughts from the markup bunker

#14 2008-05-25 12:59:46

Re: Thoughts from the markup bunker

#15 2008-05-25 13:17:51

Re: Thoughts from the markup bunker

#16 2008-05-25 13:20:23

Re: Thoughts from the markup bunker

#17 2008-05-25 13:29:25

Re: Thoughts from the markup bunker

#18 2008-05-25 13:30:39

Re: Thoughts from the markup bunker

Board footer