Hacking away at the default skin and Landscpae vs. Portrait

mr10

Joined: 2006-01-02
Posts: 1
Posted: Sat, 2009-09-05 11:46

Hi all,

Wanted to share my take on a gallery: I've been hacking in the the default theme, of course my gallery theme thingy is a work in progress.

I've been paying attention on how people browse image galleries these days, and they tend to browse pages with thumbnails, instead of browsing full size photo's. Normally I'd have square thumbnails, and not too big, but I wanted to accomodate page-browsers more, and do the photo's more justice, which resulted in this layout:
My testsite >>

Must say that finding the specific elements I want to change with the CSS being all over the place (the menu, overides on the menu, the overlay JS css, the UI elements css) as it is now, is a big pain; I'll be eagerly awaiting the skeleton theme. IMHO there's also quite a few loose ends that still need fixing in the default theme and the YUI stuff doesn't really make for clean CSS/HTML. Sorry for that ramble; overall the new Gallery is quite nice!

Personally I'm not a fan of the overly large titles/UI, for one because of the rough aliased edges big fonts tend to get, so I've been reducing the size of the UI stuff and whitespaces. My gallery is a tool, so I need it to be there, but not inruding on the pictures too much. I've not yet touched the title/comment section on the photo pages, but these are still to big for my taste.

My big picture on the front page is hardcoded at the moment; is there a way to get the 'highlight'/'cover' off an album, and then get to the fullsize version of that? I'm kinda missing the good old Image Block! There's a 'Frontpage' album, hidden for guests, that does let guests show full sizes, if you get the idea. If someone knows how to get to the 'Highlight' image, I'm quite keen to know!

I only want to show the big picture on the 'home': an is_root() or is_home() would be nice to have (back) :)
I now did this by checking the length of the parents array.

I'm still tinkering with how to place portrait images vs landscape images. I wanted to try a different way of doing placing thumbnails. Nnormally I'd use Option 1 in the pic below, but it's not an easthetically nice option; it's a bit too chaotic. The option of square thumbnail is not the way to go, because I want as little of the pics cropped as possible keeping the photographers crop, not the auto-gallery-crop.

Currently on thumbnail pages with all landscapes, I think the effect is quite nice, but when there's portrait thumbnails, it's not ideal yet.
Too me, not an option is to enlarge the portrait thumbnails a bit more so they fill the whole width, the result of that would make half the picture disappear, and you would not know there was a portrait photo behind it. It would also not crop nicely most of the time.

Options might be to save portrait images in the display loop untill i have 2 (or 3) and then arrange them like this:
[img]http://www.mr10.nl/stuff/PL.png[/img]
But that would mess up the arrangement of pictures a bit, which might not be well suited for pics sorted by date. Anyone any thoughts on thumbnail page design?

Anyhow; I've scrapped the sidebar, 'cos I don't need it myself, but was thinking to add a larger footer area for the Sidebar blocks. I might wait for the skeleton theme though.

Cheers,
Maarten

 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Sat, 2009-09-05 14:43

Thanks for the feedback, I've passed this thread along to the devs to make sure they see it.

If you're using Firefox with Firebug it can make finding stuff much easier. Also if you view the combined CSS and JS files you'll see the path to each CSS and JS file that ws combined right before that section.

You can override any module's html block by copying it into your theme. Example:
copy /modules/search/views/search.html.php into /themes/MyTheme/views/

Now Gallery will load that from your theme. The same can be done with JavaScript and I presume CSS (haven't tested that one myself)

Creating your own theme to start hacking on is easy: http://codex.gallery2.org/Gallery3:Tutorials:Themes I'd suggest doing that so your changes to the default them are not overwritten on an upgrade.

We are actively working on documentation for developers (theme and module) so hopefully this stuff gets easier. :)

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Sat, 2009-09-05 17:18
Quote:
Anyone any thoughts on thumbnail page design?

I think that option 1 would be the easiest to implement.
Option 2 and 3 would be very complex in the code to implement and possibly case performance issues. Not to mention that some items added to an album might not have the same aspect ratio.
Option 3 forces the user to have 2:3 ratio of landscape to portrait, what if the user has 3 landscape and 1 portrait item? Makes for almost infinite possibilities for the theme to handle.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Wed, 2009-09-09 15:57

Square thumbs should be default module for the G3. :)
Or if we are to go a little bit further... be able specify target thumb size, regardless of orientation of the photo

 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Wed, 2009-09-09 16:05

Serge D, I've only seen a hack for creating square thumbs, have you seen or made a module for that yet?

I'm not sure I understand "be able specify target thumb size, regardless of orientation of the photo"

In my understanding you can do that now, Admin > Settings > Advanced and set the thumbnail size. This behaves the same as in G2, the longest dimension will be that size.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Wed, 2009-09-09 16:58

I was hoping for jasonh to finish his mod.

Current implementation for longest dimension does not do the trick since it does not control height of the row which has mixed oriented photos.
Controlled thumb size is needed when look-and-feel of the theme depend on exact thumb sizes. It was optional but popular G2 module in the past and it would be nice to have one for G3 and probably as one of the default modules.

 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Wed, 2009-09-09 17:16

I can tell you it's probably not going to be a default module. Lean and mean is what we're shooting for. If it turns out that the majority of people use it, which they don't as I can attest to from the 1000s of G2 installs I've looked at then maybe it would become a default module. Yes, a lot of people do use it, but not the majority by far. I know I use it, I like the look, makes everything look nice and uniform. However, if I was a professional photographer selling my stuff I'd probably still use it. But if I was a professional shooting client stuff, I'd probably not use it because people want to how it's going to look. I know if I was going to my wedding photographer's site I'd want to see my thumbs as they should appear in portrait or landscape without having to click on them first.

We've answered plenty of "why are my thumbnails square" questions from the crappy point-n-click installs for G2 (fantastico, plesk, etc) to know this too :)

We're striving for and working on making good, easy to use docs. So it will hopefully be easy for people to follow to add additional modules. And the system will improve and get even easier over time. :)
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Wed, 2009-09-09 17:38

Good point. And then rest is for custom modules.

I would however argue that API could have a flexibility of defining the rules which would allow desired thumb generation. As discussed here. Core should support and understand basic rules applicable to the images.
Then, yes, individual themes/modules can enhance on top of that and define how thumbs are to look like.
Last time I checked rule #2 defined in the example above would not work.

a) I value the desire to make core lean
b) I looking for complete set of the functionality allowing simple and lean integration with third-party environment (API) and supporting basic image manipulations from inside the theme.
May be even be able to define rules applicable to individual page on the fly/configuration section of the page

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Wed, 2009-09-09 23:59
Serge D wrote:
Square thumbs should be default module for the G3. :)

nivekiam wrote:
We've answered plenty of "why are my thumbnails square" questions from the crappy point-n-click installs for G2 (fantastico, plesk, etc) to know this too :)

Glad you said that. If we ship with square thumbs I will need more than a few beers to make my anger subside.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2009-09-10 00:11

@floriandave: why so much beer needed? :) support the rule in the library and we will do the rest
jasonh started the core modification, for you to know inside out of the code would be easy to adopt the idea... :) much easier then for the rest of us

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Thu, 2009-09-10 00:25

I am "the rest of us"...I know just as much as you do. I will wait for you to write the library in your git repository and ask the team to review it.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2009-09-10 00:38

Hm, ok. why the anger then?
I am working on the theming within the time I can allocate. That would be as much as it would go. If goal is to write everything by hand outside of the core, then ... will do...
as far as "ask the team"... I think tracker would work as good...

 
nivekiam
nivekiam's picture

Joined: 2002-12-10
Posts: 16504
Posted: Thu, 2009-09-10 01:36

Anger at supporting hosts who don't install, test and verify the software they make available to their customers actually works on their servers :)

I'm sure Fantastico and Plesk are fine solutions, it's a large majority of businesses who use the software to manage their servers who don't do thorough testing with the software on their servers with all the options that are customer facing that I have issue with :)

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2009-09-10 02:06

Ha! Great and common story :) my condolences

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Thu, 2009-09-10 02:26
Quote:
I am working on the theming within the time I can allocate.

I (We) are trying to support a free product in our spare time for free. I hope you understand that all of this is for fee from volunteers. We are not paid to do this at all. So just like you we are trying to help an open source project.

Quote:
as far as "ask the team"... I think tracker would work as good...

We are not stopping you from submitting tickets. I have the same access to creating tickets as you do.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2009-09-10 02:39

no prob. I am just trying to make product easier to use by providing feedback I have. Feedback which may or may not follow main line at the moment :) but there is no problem with that :)

 
thumb
thumb's picture

Joined: 2004-05-26
Posts: 238
Posted: Thu, 2009-09-10 05:30

@mr10 That's the great thing about theme-able web apps, if you don't like what's available you can make the way you want. The next beta release will not display item title's and other metadata until mouseover which will provides more focus on the thumbnails.

I love neat and tidy grids, however, most users aren't as concerned about this as visual designers :) Options 2 and 3 require a good deal of work to get right, and when you're dealing with varying album lengths and the need to sort images by aspect ratios, it's just too much effort for too small a group.

I do hope, however, that a square thumbnail module's developed soon. I use square thumbs in my personal G2 install.

Also know that we're working on a major refactor of the default and admin_default's CSS.

Changes will include:

- Replace camel case with hyphenated class and id names, ex. .gItem will become .g-item
- Re-usable and shared css declarations will be moved to lib/gallery.common.css
- Many lower-level module-defined ids and classes will be replaced with re-usable classes. We'll keep upper-level block and box ids so high-level components are defined.

Support the Gallery project with a donation
--
2tbsp.com