magπ

A crafty, nommy, occassionally geeky blog-thing.

Modding Gallery

A client has asked me to fit Gallery, into a very teeny, very specific layout. Asked me, because Gallery is a pesky beastie— not exactly what you would call skinnable. While there are a lot of things that they get right, from a UI perspective, under the hood the code is something of a mess. Specifically, no effort has been made to separate function from presentation.

Bleah.

So, following is a summary of all of the various files that I edited, and to what effect, in order to achieve something like this.

Over and above just fitting the gallery inside a custom header and footer, the following changes need to be made to the gallery template:

  1. use a non-standard image size on the view_photo page
  2. hide thumbnail captions
  3. hide the footer
  4. hide gallery and album titles
  5. hide border outlines around the navigational elements
  6. hide the :logged in” message
  7. hide the “images in album” count>/li>
  8. change the navigational links for individual photos
  9. hide the breadcrumbs
  10. hide the navigational links for individual photos above the photo
  11. change the navigational links for album pages
  12. hide paging links at the top of album view
  13. change spacing of thumbnails in album view

Since I was largely just trying to suppress unnecessary elements, as much as possible, I relied upon the display: none CSS directive in a lot of cases. While it means that all of the extraneous HTML is still sent to the browser, it has the advantage of being easy to undo in the future (if the client decides he wants any of those elements back), and leaves most of the original code intact.

The gallery itself is broken into 3 main “views” or templates. The gallery index (which provides a thumbnail list of all of the different albums), the album index (which provides a thumbnail list of all of the images in a given album), and the photo view (which provides a full-size view of the selected image). Each of these views comes with its own navigational elements, including a full breadcrumb in the case of album index and photo view. All views share the same CSS file called, unintuitively enough, css/embedded_style.css.default.

Global Elements

The footer is contained inside the .modfooter class. Adding display:none; to its definition will suppress it.

Gallery and album titles are contained inside the .mod_headliner class. This can also be suppressed with display: none;

The ugly border around all of the nav and admin elements (top and bottom of every page) is made up of the following classes: ..navtableborderbegin, .navtableborderend, .bordertop, .borderright, and .borderleft. These don’t actually require the display:none; instead they can be blanked out just by emptying the class. I.e., .borderleft {}

The “logged in” message is contained inside the .bread class, along with the breadcrumb links. They can be supressed with display: none;

Gallery Index

I was able to ignore all together, because this gallery only contains one album, which will be linked to directly. I beleive that the file albums.php contains much of this template, however.

Album Index

The album index page uses view_albums.php (contains the core logic, and some presentation code) and layout/navigator.inc (contains the logic and presentation code used for the navigational bars)

Photo View