CSS Feature request

Rog

Joined: 2004-10-27
Posts: 17
Posted: Thu, 2004-11-11 08:09

It looks like G2 will be pretty amazing, from what I have seen so far. I have just a few feature requests:
1. I can control the G2's layout very well with the CSS and templates, but can I apply a different (or additional) CSS to the photo view? Ideally, I want one CSS for the main album/thumbnail view, with left and top Nav, and a slightly different CSS for single photo pages (maybe no left nav, or no banner). If I have large images or panoramas, then I'd want to hide the left nav and banner, so that the entire image fits on one screen.
In my G1.4.4 setup, I managed to use CSS to take out the banner in the single image view, but I can't control the layout of large image pages separately. See http://www.bluepeak.net/gallery/ for an example of how I formatted G1.4.4; I'd like more control over different views in G2. So far I have just done some minor customization of a test G2 installation at http://www.bluepeak.net/gallery2.

2. I saw an example of displaying a summary of EXIF data with a link to details. Very cool. Could I do the same for all IPTC data? It would be great to initially only show, say, caption and have a link to open up detailed info.

3. Would it be possible to hide an album's thumnail from the main gallery page (for visitors who are not logged in that is), such that the only way to reach the album is through a direct link to that album from another page? That would allow me to post some personal albums, but not have them mixed in with my professional ones. I didn't see a way to do that so far.

4. It looks like I can apply a different CSS to the slideshow. Is that true? Can I also get rid of the various image sizes and delay drop downs in the slideshow? I'd like to keep them as simple as possible.

I am looking forward to seeing the final product!
Keep up the excellent work!

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Thu, 2004-11-11 15:41

1,4) not sure if these can be accomplished purely with CSS, but they can easily be done with *.tpl.local files.

2) IPTC module is on the way

3) hmm, you want it to be visible when logged in, not visible when not logged in, but browseable in either case by following a direct link? offhand I can't think of how that might be done. it is possible to have albums that are browseable via direct link (or via search) but don't show up in any parent album by making those albums have no parent.. currently only the root album has no parent, but technically you could have a module that allows you to create other albums with no parent.. that module could also have an admin view to help you find those albums with no parent, since otherwise if you forgot the direct link you'd have a hard time accessing them again!

 
lvthunder

Joined: 2003-09-12
Posts: 808
Posted: Thu, 2004-11-11 19:09
mindless wrote:
1,4) not sure if these can be accomplished purely with CSS, but they can easily be done with *.tpl.local files.

So you can have a different view for the full size picture then the sized. Which *.tpl.local file would that be.

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Thu, 2004-11-11 19:27

In your previous post I thought you meant album view vs single image view.. you can create albumBody.tpl.local and singleBody.tpl.local in layouts/matrix/templates to customize those views... for example, taking out the sidebar from singleBody would be quite easy. It would take a bit more tinkering with the template variables to determine if you're viewing the full size image, but it is possible.

 
Rog

Joined: 2004-10-27
Posts: 17
Posted: Thu, 2004-11-11 22:38
mindless wrote:
1,4) not sure if these can be accomplished purely with CSS, but they can easily be done with *.tpl.local files.

Actually, you *can* customize the layout totally with CSS, as long as all elements have an ID or a class attached (which they appear to have). For example, in thumbnail view, I want a top banner, but in single full image view i don't want to display the banner to save space. If I can attach a separate CSS to the full image view page, then I just set the height of the #gsHeader to 0px.
Similarly, if I want to turn off the left nav on a page with a full-size image, i just set #gsSidebar to display:none;
That way i don't have to tinker with the templates at all!
If one can display a separate CSS depending on a template variable (showing full-size image or not?), then you'd be set for a customized full-view page as well.

mindless wrote:
3) .. currently only the root album has no parent, but technically you could have a module that allows you to create other albums with no parent.. that module could also have an admin view to help you find those albums with no parent, since otherwise if you forgot the direct link you'd have a hard time accessing them again!

Exactly! I would be looking for 2 separate root albums. What if G2 could have 2 or more root albums? In admin view you would have a menu to set the "main" root album (the one that shows up in /gallery2/main.php), and set the address of other root albums. You would be able to navigate into each album separately. Each root album could have child albums. So it would be like having two separate G2 installations on your site. That of course is a work-around, but I have limited space on my server, so I'd rather not waste too much space on two installations of G2.

Talking of CSS, I noticed that the matrix layout has a lot of classes. You may be able to reduce a lot of them by using contextual selectors. For example, now I see
<div class="gbMenu">
<h3 class="giTitle">
Greetings, Guest!
</h3>
and also

<div class="gbMenu">
<h3 class="giTitle">Actions</h3>
....</div>
If instead the DIV for login had a class=gbLogin and the DIV for Actions a class=Actions, then I could define the formatting for greetings guest as:
.gbLogin h3{......}
and the actions menu as .gbActions h3{....}
That makes the CSS much cleaner, the HTML shorter, and you end up with way fewer classes to sort through. In fact, one could build much of the page with unique IDs and contextual selectors.
I guess this is all defined in the templates, so I could rewrite those, but it would be great if the templates were written with fewer classes in the first place :)

 
bharat
bharat's picture

Joined: 2002-05-21
Posts: 7994
Posted: Sat, 2004-11-13 10:09
Rog wrote:
Exactly! I would be looking for 2 separate root albums. What if G2 could have 2 or more root albums?

G2 is geared towards having a single root album. However, you can create the appearance of dual roots by creating two top level albums ("pro" and "personal") and then setting the root permission so that it's not visible to anybody. I believe that the root album will stop showing up in any of the listings and it will appear like you have dual root albums. As long as you set your permissions correctly, there won't be any way to get from one root to the other.

Rog wrote:
Talking of CSS, I noticed that the matrix layout has a lot of classes. You may be able to reduce a lot of them by using contextual selectors. For example, now I see
...
That makes the CSS much cleaner, the HTML shorter, and you end up with way fewer classes to sort through. In fact, one could build much of the page with unique IDs and contextual selectors.
I guess this is all defined in the templates, so I could rewrite those, but it would be great if the templates were written with fewer classes in the first place :)

The problem that we've struggled with is that we want to make a CSS structure that is easily reused when people add new functionality. Since you can add in new modules, and we expect the pages those modules generate to be themed, we had to come up with a CSS class structure that was independent of the actual functionality. That's why we have very generic CSS names (title, description, admin, etc) instead of function specific ones (login, add comment, etc). I'm willing to refactor the CSS more (especially if we can get some more knowledgeable people to help out, since my CSS skills are weak) I just don't know how to keep the flexibility.

 
Rog

Joined: 2004-10-27
Posts: 17
Posted: Tue, 2004-11-16 05:55
Quote:
That's why we have very generic CSS names (title, description, admin, etc) instead of function specific ones (login, add comment, etc).

Actually, the names of the classes/IDs don't matter. If each module is wrapped in a DIV or table with an appropriate class (for example gsSidebar if the module is to be displayed in the sidebar), and titles within the modules are formatted consistently (eg, <h3>), then with .gsSidebar h3 {..} you can automatically display the title of any module appropriately. If someone wants to move the module to the header, for example, all you need to do is change the class of the wrapper DIV/table, and all styles within the module are properly styled for the header.

Quote:
I'm willing to refactor the CSS more (especially if we can get some more knowledgeable people to help out, since my CSS skills are weak) I just don't know how to keep the flexibility.

Wish I had the time to help, but I already barely have the time to post my photos....
Once the final release is closer, I'll play some more with the CSS to create my own theme.