ImgBrowz0r + Shinobu / Blog

ImgBrowz0r + Shinobu

Posted by Frank on June 21st, 2009 UTC. Tags: imgbrowz0r shinobu php

Someone asked me this a while ago on the forums. And today I got some time to make an article of it and Shinobu 0.2.3 is also on it's way.

Update June 23rd, 2009: Added some information about rewrite rules. Thanks Medorion for pointing it out.
Update October 26th, 2009: Updated some links and Shinobu 0.2 can be downloaded from shinobu.61924.nl.

Notes:

./ is the location of the Shinobu installation in this post.
I use the most recent version of Shinobu from the repository and I can not guarantee that older versions will work without problems.

Shinobu

First download ImgBrowz0r 0.3.3 and Shinobu.

Once you downloaded them unpack Shinobu and install it. There's a readme inside the package so it shouldn't be too hard. Debug mode is enabled by default in Shinobu, you can turn it off by setting SYSTEM_DEBUG to false in ./system/core/config.php at line 41.

Fresh Shinobu installation

ImgBrowz0r

Go to the Shinobu directory and create a new directory called static and within that directory make two directories called gallery and cache. gallery is the place where your images will go. Now unpack the ImgBrowz0r archive you downloaded and copy imgbrowz0r.php to ./system/lib.

Make a new file called gallery.php in ./pages and paste the following code in it. This will be the page that displays the gallery.

<?php

(!defined('SHINOBU')) ? exit : null;

// Set page title
$sys_tpl->assign('page_title', 'Gallery - '.$sys_config['website_title']);

// Include class
require SYS_LIBRARY_DIR.'imgbrowz0r.php';

$config = array(
    'images_dir'               => APP_ROOT.'static/gallery',
    'cache_dir'                => APP_ROOT.'static/cache',

    'main_url'                 => WEBSITE_URL.URI_PREFIX.'gallery'.URI_SUFFIX.'&p=%PATH%',
    'images_url'               => WEBSITE_URL.'static/gallery',
    'cache_url'                => WEBSITE_URL.'static/cache',

    'max_thumb_row'            => 3,

    'time_format'              => $sys_lang['s_date_format'],
    'time_zone'                => $sys_user['timezone'],
    'enable_dst'               => $sys_user['dst'],

    'dir_thumbs'               => true,
    'random_thumbs'            => true,
    'read_thumb_limit'         => 20
    );

// Start the class
$gallery = new imgbrowz0r($config);

// Initiate ImgBrowz0r
$gallery->init();
$gallery_breadcrumbs = $gallery->breadcrumbs();
$gallery_pagination = $gallery->pagination();

?>

<h2><span>Gallery</span></h2>

<?php

// Display navigation
echo '<p class="imgbrowz0r-navigation">', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n", '</p>', "\n\n";

// Display images and directories
echo $gallery->browse();

?>

After that go to the administration panel and add a new navigation item that points to gallery.xhtml. Go back to your website and click on the item you just added. If everything works you should see "There are no images in this directory". Put some images in ./static/gallery and reload the page.

ImgBrowz0r without CSS

Let's add some CSS. Open ./themes/simple/screen.css and add the following CSS to the bottom of the file.

/* --- ImgBrowz0r
---------------------------------------------------------*/

#imgbrowz0r { width: 100%;text-align: left }

#imgbrowz0r .img-row { padding: 0 1em }
#imgbrowz0r .img-directory a:link,
#imgbrowz0r .img-directory a:visited { font-family: Georgia, "Times New Roman", Times, serif;text-decoration: none }

#imgbrowz0r .img-thumbnail a:link img,
#imgbrowz0r .img-thumbnail a:visited img { border: 1px solid #000 }
#imgbrowz0r .img-thumbnail a:hover img,
#imgbrowz0r .img-thumbnail a:active img { border-color: #F52542 }

#imgbrowz0r .img-directory a:link,
#imgbrowz0r .img-directory a:visited { background-color: #000;border: 1px solid #000;font-size: 1.5em;color: #ccc }
#imgbrowz0r .img-directory a:hover,
#imgbrowz0r .img-directory a:active { border-color: #F52542;color: #F52542 }

#imgbrowz0r .img-directory span.img-dir-name,
#imgbrowz0r .img-directory span.img-thumb-date { display: block }
#imgbrowz0r .img-directory span.img-dir-name { font-weight: bold;font-size: 1.2em }

#imgbrowz0r .img-thumbnail a,
#imgbrowz0r .img-directory a { display: block;margin: 0 auto;width: 200px }

#imgbrowz0r .img-thumbnail,
#imgbrowz0r .img-directory { float: left;padding: 1.5em 0;width: 33.3%;text-align: center }
#imgbrowz0r .img-column-1 { clear: left }

#imgbrowz0r .img-directory a:link,
#imgbrowz0r .img-directory a:visited { height: 160px;line-height: 150px;
                       background-repeat: no-repeat;background-position: 50% 50% }

Looks much better! :)

ImgBrowz0r with CSS

Rewrite rules

If you're using Lighttpd or Nginx you'll have to adjust the rewrite rules a bit. Here's an example for Lighttpd:

url.rewrite-once = (
    "^/admin/themes/(.*)$" => "/admin/themes/$1",
    "^/admin/js/(.*)$" => "/admin/js/$1",
    "^/admin/?$" => "/admin/index.php",
    "^/admin/(.*)$" => "/admin/index.php?q=$1",
    "^/themes/(.*)$" => "/themes/$1",
    "^/static/(.*)$" => "/static/$1",
    "^/?$" => "/index.php",
    "^/([^?](.*?))$" => "/index.php?q=$1"
)

Notice the following line that has been added.

"^/static/(.*)$" => "/static/$1",

Lightbox

You probably would like to have a lightbox attached to it. That isn't really hard to do. My own Jsimgbox could be used or you could that a look at the screencast that Chris Coyier from CSS Tricks made.

Comments (0)

You first have to login to leave a comment, because I don't want spam and and annoying captchas on my blog. Only your name and e-mail address will be stored when you login.

61924