Piwigo.org

yoDan · 2005-06-07 14:11:09

Hello world,

I reworked PWG's main two pages, namely category.php (displaying thumbnails) and picture.php (displaying the picture and associated comments).
Here are the links:
http://yo.dan.free.fr/pwg/category.htm
http://yo.dan.free.fr/pwg/picture.htm

The most visible part is the thumbnail adapting to the viewport's width. Other improvements include
* proper markup (semantic markup, clean ids, ...)
* improved accessibility (font family, color and size, forms, links)
* flexible layout (for those of you using a capable browser (i.e. not IE), have a look at the alternative stylesheets)

What do you think? What is missing? The layout and colors are based on the "clear" template. Are there features you like better in the original "clear" template? (I will argue ;-)

Hope to hear from you soon. Feel free to discuss in English or in French.

-- Daniel
A note about alternate stylesheets.It is a way to use different CSS files for the same (x)html code. In Firefox, open the View menu, then "Page style". In Mozilla, it is in "View"->"Use style". In Opera, look in "View"->"Style". No support in IE. The default layout uses a left menu bar (just as in many PWG layout), a "right navBar" style is available, as well as a "top navBar" style (menus popup when hovered) and a "top navBar funky" (with rounded borders only visible in gecko-based browsers).

plg · 2005-06-08 00:11:46

This is terrific! Really a great improvement in XHTML+CSS construction. This will first make a great template and surely integrated in the official release :-)

I've some comment about your code like "why do I find (semanticaly invalid) tables in each item of the (semanticaly valid) list of thumbnails ?"... but I have to go to sleep now because I work tomorrow.

yoDan · 2005-06-08 11:16:09

Hi z0rglub, thanks for your feedback.

z0rglub wrote:
why do I find (semanticaly invalid) tables in each item of the (semanticaly valid) list of thumbnails ?

You are not going to like the answer, prepare to be surprised: that is because of Gecko.
As soon as gecko (Mozilla, Firefox and other browsers using gecko rendering code) supports "inline-block" or "inline-table" value for the "display" CSS property, or if we do not want to bother with Firefox support, I will drop the tables. You do want to support gecko, right? ;-) (so do I)
References: http://www.spartanicus.utvinternet.ie/c … ptions.htm and http://www.spartanicus.utvinternet.ie/g … tions.htm.

On top of my head, others changes I made and some explanations:
* using user's default font-size (i.e. 100% or greater, not micro-fonts like 12px or 10px)
* not using Verdana for anything but titles
* greater color contrast (avoid dark-gray over light-gray)
* structured forms, so that clicking on "Login" actually gives the focus to the login input field (same for the auto-login check-box)
* made links look like links (always colored and underlined, with feedback when hovered)
* avoided making links to current page

You see, mostly accessibility-related changes, nothing too drastic. Some references about (not) using Verdana on the web, and why I (and others) recommend using HTML instead of XHTML.

Cheers,
-- Daniel

plg · 2005-06-09 01:11:01

Hi yoDan,

yoDan wrote:
Are there features you like better in the original "clear" template?

In picture.php, I do prefer the way icons are presented in template "clear" release 2. (on the right you find navigation icons, I will soon add "go to first" and "go to last" icons).

yoDan wrote:
why I (and others) recommend using HTML instead of XHTML

Sorry for having forgotten to read your DOCTYPE :-/ I will deeply read the linked article, not sure to agree but why not.

yoDan wrote:
You do want to support gecko, right?

I do. Personnaly, support for MSIE has no kind of importance (on my personnal gallery). I now understand why you can't avoid using tables.

To continue (why am I the only one to give some feedback?), let's talk about the creation of a full template based on your work! You made 90%, what remains is the packaging and integration in *.tpl instead of *.html. Would you like to package the template or do you want me to take this action? (How do you wand to call your template?)

xaviounet · 2005-06-09 03:18:23

Hi,

What a very good improvement!
I like a lot what you did.
Just a little thing, on your picture page, there is a problem of display on the computer I use at work. The line at the beginning of the pink square behind the comments cuts sometimes the beginning of a comment.
I also prefer the arrows on the right but it is personnal.

Thank you!
And good work!

yoDan · 2005-06-09 19:21:07

To all:

Here is an easy way to contribute to PWG: go look at the two sample pages I posted earlier, see if it looks good, and report any display problem, misalignment, disappearing or overlapping text, or whatever. Please do it, the data you will report is precious to us.
Important information to include in your report are details about your browser (name, version, platform) and precise description of the problem (http link to a screenshot displaying the problem is perfect). Thanks!

xaviounet wrote:
Just a little thing, on your picture page, there is a problem of display on the computer I use at work. The line at the beginning of the pink square behind the comments cuts sometimes the beginning of a comment.

I don't see no pink square! :o)
I am suspecting you are using IE 5.5, but would really need more details. Does the problem disappear as you scroll the page?

Thanks for the feedback, I will respond to the other points tomorrow. Now is time to unplug. :-/
Bye,
-- Daniel

xaviounet · 2005-06-10 07:18:07

Sorry, I didn't explain very well
Here is a screenshot (made at a computer at my work place) of the problem that I can see each time I use IE version 6.00.29
http://ile.des.dieux.free.fr/pwg.htm
You can see the comments going little by little on the left, even the title of the comments...
but no problem with the other browsers...

Talk to you soon

Last edited by xaviounet (2005-06-10 07:20:24)

yoDan · 2005-06-15 12:55:02

Sorry for the delay, real-life work is keeping me busy these days...

xaviounet wrote:
Here is a screenshot (made at a computer at my work place) of the problem that I can see each time I use IE version 6.00.29

Thanks, that should be fixed now (setting a padding-bottom length to BLOCKQUOTEs caused IE to shift follow-up contents to the left! Oh dear)
I also reverted to the previous layout as far as navigation arrows are concerned (left, up, right).
Any other problem or suggestion?

z0rglub, I understand you might be frustrated to have to wait so long for my action. If you have some spare time, you are welcome to package the template. You could name it after the original "clear" template, possibly "clear2", I don't know. If you can wait until July, or if you are yourself busy, I will do it.

All the best,
-- Daniel

yoDan · 2005-06-28 15:59:44

Regarding:

z0rglub wrote:
I find (semanticaly invalid) tables in each item of the (semanticaly valid) list of thumbnails ?"

I have an update that may well fix the problem. What do you think of http://yo.dan.free.fr/pwg/category2.htm ?
Seems to work in Opera, FireFox (except that the margin is ignored: thumbnails are too close to each other), IE6 (except a minor border-bottom quirk). I haven't tested it in other browsers, so please let me know if there is any problem.

Sephi · 2005-06-30 11:25:09

A very good template I think. The code is very clean and well structured, very nice. ^^
There's just one thing I don't like : the pictures are underlined, like the links. I understand you want to underline all the links, but I think the thumbnails would look better without the underlining.

yoDan · 2005-06-30 15:13:04

Sephi wrote:
pictures are underlined, like the links. I understand you want to underline all the links, but I think the thumbnails would look better without the underlining.

I too dislike the underlining. It is even explicitely disabled:

Code:

.thumbnails SPAN A:first-child { border: none }

I guess you are viewing the page in IE or any ancient browser that does not understand the first-child pseudo-class selector. ;-)
In the final template, it will probably be worth adding a "class=no_underline" to the A element containing the IMG thumbnail.

Thanks for your impressions. Any other thought or browser testing?

-- Daniel

Sephi · 2005-06-30 15:41:32

yoDan wrote:
I guess you are viewing the page in IE or any ancient browser that does not understand the first-child pseudo-class selector. ;-)

I'm surprised, because I'm using Mozilla Firefox (I'm not mad enough to use IE)...
The version I use is the 1.0.4.

The pictures are not underlined in the "gallery" section (http://yo.dan.free.fr/pwg/category2.htm), but they are in the "picture" section (http://yo.dan.free.fr/pwg/picture.htm). Maybe we were not speaking about the same page. :)

yoDan · 2005-07-05 03:05:33

Indeed, Sephi, we were not talking of the same thing. :o)
I disabled the underlining in question.

Eric B · 2005-07-11 12:07:09

I like your template so much that I d like to use it! Can I?
Is there a link where I could download the files?

yoDan · 2005-07-12 01:05:06

Eric, all,

Turning these two sample pages into a template is a work in progress. Actually, I am stuck at a very early stage (still figuring out how to create a pwg gallery: I was not a PWG user), but I remain confident that I will come up with a template "shortly". ;-)
Seriously, thanks for caring, I will try and get something out real soon.

Piwigo.org

Announcement

#1 2005-06-07 14:11:09

Improved HTML and layout

#2 2005-06-08 00:11:46

Re: Improved HTML and layout

#3 2005-06-08 11:16:09

Re: Improved HTML and layout

z0rglub wrote:

#4 2005-06-09 01:11:01

Re: Improved HTML and layout

yoDan wrote:

yoDan wrote:

yoDan wrote:

#5 2005-06-09 03:18:23

Re: Improved HTML and layout

#6 2005-06-09 19:21:07

Re: Improved HTML and layout

xaviounet wrote:

#7 2005-06-10 07:18:07

Re: Improved HTML and layout

#8 2005-06-15 12:55:02

Re: Improved HTML and layout

xaviounet wrote:

#9 2005-06-28 15:59:44

Re: Improved HTML and layout

z0rglub wrote:

#10 2005-06-30 11:25:09

Re: Improved HTML and layout

#11 2005-06-30 15:13:04

Re: Improved HTML and layout

Sephi wrote:

Code:

#12 2005-06-30 15:41:32

Re: Improved HTML and layout

yoDan wrote:

#13 2005-07-05 03:05:33

Re: Improved HTML and layout

#14 2005-07-11 12:07:09

Re: Improved HTML and layout

#15 2005-07-12 01:05:06

Re: Improved HTML and layout

Board footer