For those new to Piwigo, Piwigo is an open-source web photo gallery system. It was originally called the ‘PHP web gallery’ (pwg) since it is based on the php scripting language. Here are some links: piwigo.org, Wikipedia
My goal in posting a demonstration of this theme was to allow users to see it live and give users a chance to provide feedback. A few features of this theme are in beta. Here is a list of some of the features incorporated into this theme:
- Fluid layout – content will expand to fill available browser. Nothing major here, but an important part of this theme. for Melissa.
- Search, feeds and login in fixed position element ‘pinned’ to top of browser.
- Customizable header – Logo, gallery title / description and a custom block are available for customization. Custom block presently has Google Adsense in it. If you adjust this, just be aware and check layout at browser min width condition to ensure content doesn’t overflow or break-flow.
- Menu layout has vertical tabs with fly-out menus on mouse hover – Goal here was to achieve a cleaner look by using tabs and flyout. One challenge is how to make multi-lingual as tabs are images. Maybe someone has some suggestions? I guess theme could substitute language specific images based on language setting?
- When in single picture view and using thumbnail previews, the thumb previews (on narrower browser window) will partially hide behind the main picture. A simple mouse hover of the thumb will bring it to the foreground. Depending on main picture size and thumbnail size, a small adjustment in min-width for fluid layout might be needed to ensure thumbs don’t completely hide behind image. try it, kinda nice!
- Theme has it’s own plugin (installed separately) which provided a few enhancements:
- provides ‘spinning’ timer during piwigo HTML slideshow
- formats the photo number with “of” not “/“ ie: 3 of 41 versus 3 / 41
- changes ‘Home’ breadcrumb to ‘Gallery Home’, but can be set any string.
- Image watermark on single picture (including HTML slideshow) view. Defaults to small piwigo watermark distributed with theme as example. Create your own .png file and you can display your watermark.
- Improved single picture navigation, consolidated into navbar below image. need to finish help button yet.
- Improved metadata and comments layout. I tested expanding/collapsing these blocks by clicking header and what default behavior should be (open or closed?). You can click header to expand collapse, but default is expanded for both metadata and comments.
- This theme also demonstrates a few plug-ins I recently created for piwigo. The plugins add functionality, but are not tied to the theme and can be used in other themes.
- pwgSlideShow plugin:
This plugin delivers a full-screen flash slideshow. Click on the Flash ‘f’ icon in the toolbar displayed on the thumbnails or the single picture view in piwigo. This plugin is in beta and am working to refine it a bit more. Here are some of the features of pwgSlideShow:
- Fit all or Fill all for image display. Fit all will not clip, fill all may clip but maximizes screen fill (note: images are never upscaled).
- thumbnails displayed in ‘pages’ on foot of screen (quantity displayed is dependent on screen width). If you hover of thumb, you get a larger preview and can jump to that image with a click.
- navigation bar hiding: the navigation bar will hide itself when you ‘rollOut’ of the navigation bar with your mouse (so, move your mouse over the navigation bar and the move above it and it will fade in a few seconds). Just move your mouse to the bottom of your screen to un-hide the navigation bar. If you want the navigation bar to remain visible, just keep you mouse in that area.
- View tracking is maintained when viewing images with this method. View tracking can be disabled if you wish. Views are only counted once even if you view an image multiple times in the full screen slideshow (until the web page is refreshed).
- Images are preload one-ahead at a time, so not to consume excess bandwith preloading everything in playlist (like some other players do!). Preload indicated is red / green dot in upper right corner (flashing red means next image is loading, solid green means next image ready).
- Slideshow ‘spinning’ timer to indicate time ticks for slideshow period. Slideshow refresh time (or period) utilizes piwigo $conf value for timer value.
- Context menu with link to piwigo.org
- Keyboard navigation (try it! an awesome way to view images).
- left & right arrow keys for previous / next image
- up & down arrow keys for previous / next thumbs page
- spacebar to toggle play/pause mode; escape return to web page
- When returning to single picture view, refresh to image exited upon if different than entry. This behavior has a parameter is you want to disable.
- Can also be configured for autostart upon fullscreen entry.
- Shows alternate content if flash not available
- pAnchor plugin:
this plugin adds an HTML page anchor to picture and slideshow pages and navigation urls to improve web browsing. You can see the anchor # added to the urls in your address bar. It has an experimental feature that eases your browser to that anchor to scroll nice down to the image.
- pGravatar plugin:
this plugin adds a Gravatar image for comment author or displays a default image if user e-mail not registered with gravatar.com
I hope you like the new theme named ‘pBrain’. This theme does require a few ‘hacks’ to utilize some of the features. This is due to how I used the menu system and as mentioned before, See the README for the theme and plugins. Hopefully, piwigo developers can implement a couple minor things to improve extensibility of piwigo.
Well, beat it up and let me know what you think. I am continuing to refine and button things up, like some error trapping, help screen, etc.
As of 11/29/2010, this theme is NOT at the piwigo repository as I am just wrapping up some items. I will edit this post when it is available at piwigo.org.
But browse the theme demo here and let me know your thoughts