Piwigo.org

yoDan · 2005-08-24 00:53:18

I might have some good news. Please look at http://yo.dan.free.fr/tmp/gallerie.htm.
Gallery #1 comes straight from Spartanicus' page.
Gallery #2 is the same thing expect that I used LI instead of P. It doesn't seem to break anything, and IMVHO it is a more appropriate markup.
Looks good in "all" browsers, except in FF when a caption spans several lines: the thumbnails look better if they are top-aligned. However, I reckon the scenario is often different with PWG: images are of varying heights, but captions are of fixed height (exactly one, or two lines of text, depending on what the user selected). So bottom-alignment is actually preferable.
Gallery #3 is the same thing with bottom vertical alignment for IE.

I also tested it with a long, non-breakeable caption (as in "bla_bla_bla_bla_bla"). Gecko and IE expand the table-cell/inline-block, so that you can read the caption, but Opera honours the inline-block's fixed width and the caption overflows. The result is ugly in all three cases, but is fixable thanks to the overflow property. Gecko ignores it, Opera is buggy (found a quick workaround), and IE handles it flawlessly (wow).

You tell me if that fits the dominant situation in PWG (long or short captions, breakable or not, variable number of lines or not, etc).

plg · 2005-08-24 01:04:03

yoDan wrote:
As for Jimmac's gallery, not having a caption makes a world of a difference. He can use a simple <A ...><IMG ...></A>, make A a block of fixed height and width, and float it: he is done! Variable height is what causes us extra trouble.

OK, I understand. In my opinion, a beautiful gallery has all its thumbnails the same size portrait (75*100) or landscape (100*75). A gallery using thumbnails with several different dimensions becomes ugly...

For my personnal use, I will surely try to use the simple <p><a><img></a></p> "template". I've made some test, but I fail because the P seems to become display:inline (what I never asked :-/)

plg · 2005-08-24 01:11:50

yoDan wrote:
You tell me if that fits the dominant situation in PWG (long or short captions, breakable or not, variable number of lines or not, etc).

2 distinct cases :

- thumbnails linked to picture.php : short caption, if not, it's advised (by me) to switch the caption off with $conf['show_thumbnail_caption']. If the caption is long and $conf['show_thumbnail_caption'] still switched to "on", we can consider it's breakable (because it's real name and not file name).

- thumbnails linked to category.php (thumbnails representing sub-categories) : short or long captions on a variable number of lines. For example, the page listing the "new or recently update categories" shows a representative thumbnail for each category. The name of the category is in caption, one line by level, and categories tree can be 4 or 5 level deep (in my situation), so I have a caption with 4 or 5 lines in it.

chrisaga · 2005-08-24 11:07:41

yoDan wrote:
Gallery #2 is the same thing expect that I used LI instead of P. It doesn't seem to break anything, and IMVHO it is a more appropriate markup.

I agree.
I did several atempts yesterday too, but got nearly the same results as yours.

z0rglub wrote:
In my opinion, a beautiful gallery has all its thumbnails the same size portrait (75*100) or landscape (100*75). A gallery using thumbnails with several different dimensions becomes ugly...

After several tests, I agree with you. Maybe the thumbnails size could be a gallery option fixed by the admin and we could make a design which clips the thumbnail to this size (in real life the thumbnails are not the same size because pictures are not the same aspect ratio).
What I have in mind is a gallery looking a bit like a board of slides

Code:

+----------+ +----------+ +----------+ +----------+
|          | |          | |  +----+  | |          |
| |######| | | |######| | |  |####|  | | |######| |
| |######| | | |######| | |  |####|  | | |######| |
| |######| | | |######| | |  |####|  | | |######| |
|          | |          | |  +----+  | |          |
+----------+ +----------+ +----------+ +----------+
 beautiful    landscape2   portrait     landscape3
 landscape1   0 comments    of my gf    0 comments
 1 comments                0 comments

I think it could be achieved wrapping the image in a DIV with fixed size and clipping.
Would be better if the comments line be aligned but cannot figure out a simple way to do it.

It doesn't have to look like a board of frames. We just keep the idea. Maybe just a thin grey line would be ok. Plus it would be very customizable using the DIV's background, padding and border.

If it's too much work for 1.5 release, we can stay with what we have now (not so bad) and keep the idea for the next release.

plg · 2005-08-24 21:42:26

chrisaga wrote:
[...]Maybe the thumbnails size could be a gallery option [...] keep the idea for the next release

Right you are. This will be for next release or another non official template (because I'd like to use it before branch 1.6).

chrisaga wrote:
yoDan wrote:
Gallery #2 is the same thing expect that I used LI instead of P. It doesn't seem to break anything, and IMVHO it is a more appropriate markup.
I agree.

Good :-) (I agree with you experts). Chrisaga, I let you commit the agreed version of thumbnails display. Let's consider other part of the template now.

Can someone take a look at my "first unvalidated comment" problem ? (see below)

z0rglub wrote:
I've got a problem in the first comment to validate (so in screen [Administration > Pictures > Comments], you need to have at least one unvalidated comment, use database field comments.validated to create unvalidated comments) : my first comment has an enormous height, I don't understand which CSS rule is working here?

yoDan · 2005-08-25 00:27:41

z0rglub wrote:
I've got a problem in the first comment to validate (so in screen [Administration > Pictures > Comments], you need to have at least one unvalidated comment, use database field comments.validated to create unvalidated comments) : my first comment has an enormous height, I don't understand which CSS rule is working here?

The "faulty" rule is "clear: left" in cclear/content.css:145. The buttons are pushed... right below the navbar, which is floated on the left!

A simple fix is to change menubar.css:4 from "float: left" to "position: absolute". This way, you may float things on the left in #content, but you can no longer have the copyright span the whole page (because "position:absolute" takes the menubar out of the flow, so you have no way to tell if it is shorter or taller than #content). Fine: put the copyright notice inside DIV#content.

One alternative is to do just the opposite: keep the #menubar floating but absolute-position the A.illustration (and give a 150px-or-so left-margin to the P.commentheader and the BLOCKQUOTE beneath).

yoDan · 2005-08-25 00:38:22

Also, this page (admin.php?page=comments) is pretty broken in IE. Any reason why the ">" descendant selector is used in the CSS? (remember that IE ignores any rules whose selector contains a ">"). Simply removing those ">" seems to improve the rendering, at least in a recent IE.

plg · 2005-08-25 00:56:47

yoDan wrote:
The "faulty" rule is "clear: left" in cclear/content.css:145. The buttons are pushed... right below the navbar, which is floated on the left!

Now it seems obvious ! (I made a clear:left on DIV.comment UL.actions to avoid illustration going outside DIV.comment border)

yoDan wrote:
A simple fix is to change menubar.css:4 from "float: left" to "position: absolute".

This solution is the simplest, but as #menubar goes outside the flow, the top border is not aligned with #content top border anymore (which is quite ugly). You write about DIV.copyright that should be taken inside #content, but H1 should also be, shouldn't it?

yoDan wrote:
One alternative is to do just the opposite: keep the #menubar floating but absolute-position the A.illustration (and give a 150px-or-so left-margin to the P.commentheader and the BLOCKQUOTE beneath).

This solution avoids misalignement between #menubar and #content top borders but brings another bug : if the comment is too short (or if the illustration is too tall), the illustration goes outside DIV.comment bottom border :-/

Between the 3 solutions :

#1 = clear:left making first UL.actions going under #menubar bottom border
#2 = changing #menubar from float:left to position:absolute
#3 = changing DIV.comment A.illustration from float:left to position:absolute

Considering the problems with the 3 methods, my favorites are #1 and #3 :-/ (since this screen is seldom used) Unless you have obvious correction for methods #2 (which has much more impact than #3)

yoDan wrote:
(remember that IE ignores any rules whose selector contains a ">")

I had no idea about that :-/ I'll take them off!

plg · 2005-08-25 19:53:56

About forms...

I've seen DIV.formbox and DL/DT/DD used to manage forms on page like identication.tpl, register.tpl (I'm currently modifying it), profile.tpl. I must admit I don't really like the layout. Something like what Fred Cavazza does would be more appropriate : Des formulaire plus simples (fr), I stopped to step 10 before controls.

I'll very soon create "contextual help" so that help notices for a page (like profile.tpl) will be moved to a dedicated "popup" displayed when clicking on the appropriate icon.

I've made a test using FORM.filter (the HTML code is so simple, I like to use this class)

HTML code

Code:

<form method="post" action="{F_ACTION}" class="filter">
  <fieldset>
    <legend>{lang:Enter your personnal informations}</legend>

    <label>* {lang:Username}<input type="text" name="login" value="{F_LOGIN}"></label>
    <label>* {lang:Password}<input type="password" name="password"></label>
    <label>* {lang:Confirm Password}<input type="password" name="password_conf"></label>
    <label>{lang:Mail address}<input type="text" name="mail_address" value="{F_EMAIL}"></label>
  </fieldset>

  <p class="bottomButtons">
    <input type="submit" name="submit" value="{lang:Register}">
  </p>

</form>

... but I think Fred Cavazza forms are better for forms like registration or user properties.

Your opinions ?

yoDan · 2005-08-26 01:20:24

chrisaga wrote:
What I have in mind is a gallery looking a bit like a board of slides
[snip ASCII-art of the layout]
I think it could be achieved wrapping the image in a DIV with fixed size and clipping.

One thing I overlooked in Jimmac's gallery is that he had to use "manual" positioning (via a "portrait" class) to center both horizontally and vertically each thumbnail inside its frame. As you suggested, chrisaga, I wrapped the image in a DIV and fixed its width and height. I purposedly used inline style to position each IMG (see style="top: 16px") because it is something that could be part of the template (here, 16 = (132 (max dimension) - 99 (img width)) / 2). It is the fourth attempt at http://yo.dan.free.fr/tmp/gallerie.htm. Thumbnails are aligned as in your ASCII art in Opera and IE, but the vertical-alignment issue with captions of varying lengths persists with Gecko (sad world).

chrisaga wrote:
Would be better if the comments line be aligned

This is impossible.

z0rglub wrote:
#1 = clear:left making first UL.actions going under #menubar bottom border
#2 = changing #menubar from float:left to position:absolute
#3 = changing DIV.comment A.illustration from float:left to position:absolute

#1 is not an option to me. I still think the H1 should span the whole page, so with #2, a quick and dirty fix would be to use padding instead of margin and write "padding: 1ex 0 2ex 0; margin: 0;" at default-layout.css:36. Then, give a min-height to DIV.comment. #3 is okay too, but requires the min-height bit as well.

chrisaga · 2005-08-26 20:42:16

yoDan wrote:
It is the fourth attempt at http://yo.dan.free.fr/tmp/gallerie.htm. Thumbnails are aligned as in your ASCII art in Opera and IE, but the vertical-alignment issue with captions of varying lengths persists with Gecko (sad world).

OK it looks good. Can you put that in the CVS ?
And yes, it's a sad world, but hollydays are comming soon my friend ;-)

yoDan wrote:
z0rglub wrote:
#1 = clear:left making first UL.actions going under #menubar bottom border
#2 = changing #menubar from float:left to position:absolute
#3 = changing DIV.comment A.illustration from float:left to position:absolute
#1 is not an option to me.

For me neither.

yoDan wrote:
I still think the H1 should span the whole page,

I do too

I played with option #2 myself and found 2 issues :
a) the copyright line can be above of the #menubar bottom if the category is small.
It can be fixed either with fixed or absolute position but the layout will not remain the same.
b) In the same circumstances, the height of the frame visible in the default template is smaller than the one of the #menubar.
I like this frame, so I am for option #3

z0rglub wrote:
I've seen DIV.formbox and DL/DT/DD used to manage forms on page like identication.tpl, register.tpl (I'm currently modifying it), profile.tpl. I must admit I don't really like the layout

This was an attempt to get rid of the table without changing the layout too much while keeping a logical structure.
Clearly your new layout is better.
Fred Cavazza's forms looks good too (I'm not very fond of his <br/>). As far as Ican see, the difference remains in css so we can imagine there'll be horizontal and vertical layouts depending on the template designers preferences.

z0rglub wrote:
yoDan wrote:
(remember that IE ignores any rules whose selector contains a ">")
I had no idea about that :-/ I'll take them off!

It's very usefull to hide some rules from IE

plg · 2005-08-27 02:39:36

yoDan wrote:
chrisaga wrote:
What I have in mind is a gallery looking a bit like a board of slides
[snip ASCII-art of the layout]
I think it could be achieved wrapping the image in a DIV with fixed size and clipping.
One thing I overlooked in Jimmac's gallery is that he had to use "manual" positioning (via a "portrait" class) to center both horizontally and vertically each thumbnail inside its frame. As you suggested, chrisaga, I wrapped the image in a DIV and fixed its width and height. I purposedly used inline style to position each IMG (see style="top: 16px") because it is something that could be part of the template (here, 16 = (132 (max dimension) - 99 (img width)) / 2).

(You meant height I suppose) OK, the result is very beautiful. Concerning PHP, it means giving 3 more informations :

1. top: calculated with your formulae
2. width: displayed thumbnail width
3. height: displayed thumbnail height

I have to introduce 2 new configuration parameters : max_displayed_thumbnail_height and max_displayed_thumbnail_width. The two parameters don't have to share the same value, do they? The width/height ratio is not always constant so that the thumbnail won't always be displayed with its original dimensions.

It also means PHP code have to performe get_imagesize on each thumbnail :-/... unless thumbnails dimensions are cached in the database.

yoDan wrote:
#3 is okay too, but requires the min-height bit as well.

Commited. I also agree with this solution, as for width, I've set height to 150px.

chrisaga wrote:
Clearly your new layout is better.
Fred Cavazza's forms looks good too (I'm not very fond of his <br/>).

Commited. I've created FORM.properties class but I had to complexify HTML tags to make it works. I didn't find the solution to have the same HTML tags for FORM.filter and FORM.properties.

chrisaga · 2005-08-27 15:37:05

z0rglub wrote:
yoDan wrote:
chrisaga wrote:
What I have in mind is a gallery looking a bit like a board of slides
[snip ASCII-art of the layout]
I think it could be achieved wrapping the image in a DIV with fixed size and clipping.
One thing I overlooked in Jimmac's gallery is that he had to use "manual" positioning (via a "portrait" class) to center both horizontally and vertically each thumbnail inside its frame. As you suggested, chrisaga, I wrapped the image in a DIV and fixed its width and height. I purposedly used inline style to position each IMG (see style="top: 16px") because it is something that could be part of the template (here, 16 = (132 (max dimension) - 99 (img width)) / 2).
(You meant height I suppose) OK, the result is very beautiful. Concerning PHP, it means giving 3 more informations :

1. top: calculated with your formulae
2. width: displayed thumbnail width
3. height: displayed thumbnail height

I have to introduce 2 new configuration parameters : max_displayed_thumbnail_height and max_displayed_thumbnail_width. The two parameters don't have to share the same value, do they? The width/height ratio is not always constant so that the thumbnail won't always be displayed with its original dimensions.

It also means PHP code have to performe get_imagesize on each thumbnail :-/... unless thumbnails dimensions are cached in the database.

Take a look at http://www.cepatre.net/tmp/girafe/gallerie.htm
I have reworked yoDan last gallery.

The good news are : I managed not to use the thumbnails width and height and got a simpler code (html, and so will be php)
The bad ones are 2 small display issues :
* Geko expands the thumbnail frame when the thumbnail is wider than thespecified width
* Opera 7 sims to have a 1px bias which makes the thumbnail overlay the frame a little.

Mabe there are some solutions !!! Getting rid of dealing with sumbnails dimensions is worth searching a little bit, don't you think so ? But i need some help there. Any idea ?

chrisaga · 2005-08-28 12:47:09

chrisaga wrote:
The good news are : I managed not to use the thumbnails width and height and got a simpler code (html, and so will be php)
The bad ones are 2 small display issues :
* Geko expands the thumbnail frame when the thumbnail is wider than thespecified width
* Opera 7 sims to have a 1px bias which makes the thumbnail overlay the frame a little.

Mabe there are some solutions !!! Getting rid of dealing with sumbnails dimensions is worth searching a little bit, don't you think so ? But i need some help there. Any idea ?

Well I worked on it this morning and solved the Geko and Opera 7 issues !

Everything is good-looking in IE6 and Opera 7. Geko still have the vertical-align:top problem.
The use of fixed dimensions is minimal.

I used specific rules for IE ('* html' hack) and Geko/Opera ('>' hack). We could put common rules back together to get less code.
We can get that in the template as soon Z0rglub provide max_displayed_thumbnail_height and max_displayed_thumbnail_width.
One last thing : what do we do about the border width around the thumbnail ? It takes part in the calculation of the first span width.

volcom · 2005-08-28 13:08:43

hi,
very good job! congratulations yoDan & chrisaga.
I have tested the last CVS code and I'm very impressed. I just want to know : what's about underlining in menus & thumbnails ? I saw you said you disabled it but ?

Piwigo.org

Announcement

#46 2005-08-24 00:53:18

Re: Improved HTML and layout

#47 2005-08-24 01:04:03

Re: Improved HTML and layout

yoDan wrote:

#48 2005-08-24 01:11:50

Re: Improved HTML and layout

yoDan wrote:

#49 2005-08-24 11:07:41

Re: Improved HTML and layout

yoDan wrote:

z0rglub wrote:

Code:

#50 2005-08-24 21:42:26

Re: Improved HTML and layout

chrisaga wrote:

chrisaga wrote:

yoDan wrote:

z0rglub wrote:

#51 2005-08-25 00:27:41

Re: Improved HTML and layout

z0rglub wrote:

#52 2005-08-25 00:38:22

Re: Improved HTML and layout

#53 2005-08-25 00:56:47

Re: Improved HTML and layout

yoDan wrote:

yoDan wrote:

yoDan wrote:

yoDan wrote:

#54 2005-08-25 19:53:56

Re: Improved HTML and layout

Code:

#55 2005-08-26 01:20:24

Re: Improved HTML and layout

chrisaga wrote:

chrisaga wrote:

z0rglub wrote:

#56 2005-08-26 20:42:16

Re: Improved HTML and layout

yoDan wrote:

yoDan wrote:

z0rglub wrote:

yoDan wrote:

z0rglub wrote:

z0rglub wrote:

yoDan wrote:

#57 2005-08-27 02:39:36

Re: Improved HTML and layout

yoDan wrote:

chrisaga wrote:

yoDan wrote:

chrisaga wrote:

#58 2005-08-27 15:37:05

Re: Improved HTML and layout

z0rglub wrote:

yoDan wrote:

chrisaga wrote:

#59 2005-08-28 12:47:09

Re: Improved HTML and layout

chrisaga wrote:

#60 2005-08-28 13:08:43

Re: Improved HTML and layout

Board footer