Extending ImgBrowz0r
Adding titles and descriptions for images and directories. This might be useful for people who use ImgBrowz0r for their portfolio and not for an image dump.
A user on the forum (Pat) already made a similar mod, which uses an xml file. I'm going to use a normal PHP array to store all the information, which is faster and you can easily attach a database on it.
Note: This article/guide has been made with ImgBrowz0r 0.3.4. I can't guarantee it works with older version of ImgBrowz0r.
Installation
Below you can find a step-by-step guide on how to install this mod. And below that you can find some usage examples and screenshots.
Change the following part of your CSS from:
#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-column-1 { clear: left }
#imgbrowz0r .img-thumbnail,
#imgbrowz0r .img-directory { float: left;padding: 1.5em 0;width: 25%;text-align: center }
To:
#imgbrowz0r span.img-dir-name, #imgbrowz0r span.img-name,
#imgbrowz0r span.img-thumb-desc { display: block }
#imgbrowz0r span.img-dir-name,
#imgbrowz0r span.img-name { font-weight: bold;font-size: 1.2em;word-wrap: break-word }
#imgbrowz0r .img-thumbnail,
#imgbrowz0r .img-directory { float: left;margin-left: 2.6%;padding: 1.5em 0;width: 23%;text-align: center }
#imgbrowz0r .img-column-1 { clear: left;margin-left: 0 }
This will create some space between the thumbnails.
Open imgbrowz0r.php and replace the following code at line 37:
protected $config, $cur_directory, $cur_page, $files, $page_count,
With:
protected $config, $cur_directory, $cur_page, $files, $page_count, $info=array(),
Replace the following code on line 180:
public function init()
With:
public function init($info=array())
The init() function now accepts an optional parameter. We will use this to pass the titles/descriptions of
all the directories/images to ImgBrowz0r.
Add the following code on line 173:
$this->info = $info;
After:
$this->count_files = count($this->files);
Replace the following code that starts at line ~197 and ends at line ~235:
if ($file[0] === 1)
{
$image_cache_dir = md5($this->cur_directory);
$image_thumbnail = $image_cache_dir.'/'.$file[3].'_'.$file[1]; // The name of the thumbnail
if (!is_dir($this->config['cache_dir'].'/'.$image_cache_dir))
mkdir($this->config['cache_dir'].'/'.$image_cache_dir, 0777);
if (!file_exists($this->config['cache_dir'].'/'.$image_thumbnail))
$this->make_thumb($this->cur_directory, $file[1], $image_thumbnail);
echo "\t\t", '<div class="img-thumbnail img-column-', $row_count, '"><a href="', $this->config['images_url'],
'/', $this->cur_directory, $file[1], '" style="background-image: url(\'', $this->config['cache_url'], '/', $image_thumbnail, '\')" title="', $file[1],
'"> </a><span>', $this->format_time($file[3]),
'</span></div>', "\n";
}
else
{
if ($this->config['dir_thumbs'] === true)
{
$dir_hash = md5($this->cur_directory.$file[1].'/');
$dir_thumbs = $this->read_cache($dir_hash, $this->cur_directory.$file[1].'/');
$dir_thumbnail = isset($dir_thumbs[0]) ? ' style="background-image: url(\''.$this->config['cache_url'].'/'.
$dir_hash.'/'.$dir_thumbs[($this->config['random_thumbs'] === false ? 0 : mt_rand(0, count($dir_thumbs)-1))].'\')"' : null;
echo "\t\t", '<div class="img-directory img-column-', $row_count, '"><a href="',
str_replace('%PATH%', $this->cur_directory.$file[1].'/1', $this->config['main_url']), '"',
$dir_thumbnail, ' title="', $file[1], '"> </a><span class="img-dir-name">', $file[1],
'</span><span class="img-thumb-date">', $this->format_time($file[3]), '</span></div>', "\n";
}
else
{
echo "\t\t", '<div class="img-directory img-column-', $row_count, '"><a href="',
str_replace('%PATH%', $this->cur_directory.$file[1].'/1', $this->config['main_url']),
'" title="', $file[1], '"><span>', $file[1], '</span></a><span>', $this->format_time($file[3]),
'</span></div>', "\n";
}
}
With:
$key = $this->cur_directory.$file[1];
if (isset($this->info[$key]))
{
$title = $this->info[$key]['title'];
if (isset($this->info[$key]['desc']))
$desc = $this->info[$key]['desc'];
else
$desc = $this->format_time($file[3]);
}
else
{
$title = $file[1];
$desc = $this->format_time($file[3]);
}
if ($file[0] === 1)
{
$image_cache_dir = md5($this->cur_directory);
$image_thumbnail = $image_cache_dir.'/'.$file[3].'_'.$file[1]; // The name of the thumbnail
if (!is_dir($this->config['cache_dir'].'/'.$image_cache_dir))
mkdir($this->config['cache_dir'].'/'.$image_cache_dir, 0777);
if (!file_exists($this->config['cache_dir'].'/'.$image_thumbnail))
$this->make_thumb($this->cur_directory, $file[1], $image_thumbnail);
echo "\t\t", '<div class="img-thumbnail img-column-', $row_count, '"><a href="', $this->config['images_url'],
'/', $this->cur_directory, $file[1], '" style="background-image: url(\'', $this->config['cache_url'], '/', $image_thumbnail, '\')" title="', $file[1],
'"> </a><span class="img-name">', $title, '</span><span class="img-thumb-desc">', $desc, '</span></div>', "\n";
}
else
{
if ($this->config['dir_thumbs'] === true)
{
$dir_hash = md5($this->cur_directory.$file[1].'/');
$dir_thumbs = $this->read_cache($dir_hash, $this->cur_directory.$file[1].'/');
$dir_thumbnail = isset($dir_thumbs[0]) ? ' style="background-image: url(\''.$this->config['cache_url'].'/'.
$dir_hash.'/'.$dir_thumbs[($this->config['random_thumbs'] === false ? 0 : mt_rand(0, count($dir_thumbs)-1))].'\')"' : null;
echo "\t\t", '<div class="img-directory img-column-', $row_count, '"><a href="',
str_replace('%PATH%', $this->cur_directory.$file[1].'/1', $this->config['main_url']), '"',
$dir_thumbnail, ' title="', $title, '"> </a><span class="img-dir-name">', $title,
'</span><span class="img-thumb-desc">', $desc, '</span></div>', "\n";
}
else
{
echo "\t\t", '<div class="img-directory img-column-', $row_count, '"><a href="',
str_replace('%PATH%', $this->cur_directory.$file[1].'/1', $this->config['main_url']),
'" title="', $title, '"><span>', $title, '</span></a><span class="img-thumb-desc">', $desc,
'</span></div>', "\n";
}
}
This adds the code that checks if the image or directory has a title or description. It also changes some CSS classes and adds a title to the image thumbnails.
Replace the following code at line 288:
if (isset($path_parts[0]))
foreach ($path_parts as $k => $part)
$output[] = '<a href="'.str_replace('%PATH%', implode('/', array_slice($path_parts, 0, ($k+1))).'/1' , $this->config['main_url']).'">'.$part.'</a>';
return '<div class="img-breadcrumbs"><span>Breadcrumbs: </span><a href="'.str_replace('%PATH%', '0/1', $this->config['main_url']).'">Root</a>'.
(isset($output) ? ' / '.implode(' / ', $output) : null).'</div>';
With:
if (isset($path_parts[0]))
{
foreach ($path_parts as $k => $part)
{
$key = implode('/', array_slice($path_parts, 0, ($k+1)));
if (isset($this->info[$key]))
$title = $this->info[$key]['title'];
else
$title = $part;
$output[] = '<a href="'.str_replace('%PATH%', $key.'/1' , $this->config['main_url']).'">'.$title.'</a>';
}
}
return '<div class="img-breadcrumbs"><span>Breadcrumbs: </span><a href="'.str_replace('%PATH%', '0/1', $this->config['main_url']).'">'.
(isset($this->info['/']) ? $this->info['/']['title'] : 'Root').'</a>'.
(isset($output) ? ' / '.implode(' / ', $output) : null).'</div>';
This code shows the correct title in the breadcrumbs.
Replace the following code on line 335:
// Display description of the current directory
// Html tags are stripped from the description except the following tags:
// <p>, <strong>, <em>, <a>, <br />, <h1>, <h2> and <h3>
public function description()
{
if (file_exists($this->full_path.'.desc'))
return '<div class="img-description">'.
strip_tags(file_get_contents($this->full_path.'.desc'), '<p><strong><em><a><br><h1><h2><h3>').
'</div>';
}
With:
// Returns a description of the current directory
public function description()
{
$key = trim($this->cur_directory, '/');
if (empty($key))
$key = '/';
if (isset($this->info[$key]))
$desc = $this->info[$key]['desc'];
else
$desc = null;
return $desc;
}
We replace the orginal description function with a new one that uses our $info variable to show a description.
So there's no need for those .desc files anymore.
Add the following code after the description function you just replaced:
// Returns the current category name
public function current_category()
{
$key = trim($this->cur_directory, '/');
if (empty($key))
$key = '/';
if (isset($this->info[$key]))
$title = $this->info[$key]['title'];
else
$title = $key != '/' ? basename($key) : 'Root';
return $title;
}
And you're done.
Usage examples and screenshots
To make use of the new feature you just installed you just have to make a variable that contains an array with the right
information and add it to $gallery->init() as an argument. Like this:
[ ... code ... ]
$info = array(
// A slash represents the root
'/' => array(
'title' => 'Index',
'desc' => 'This is a gallery with various images.'),
'BigTest' => array(
'title' => 'Big image test',
'desc' => 'Some big images that are used to test if ImgBrowz0r can resize big images properly.'),
'Test2' => array(
'title' => 'Test 2',
'desc' => 'This directory has no images.')
);
$gallery->init($info);
[ ... code ... ]
// This is used to display the title and/or description of the current directory
echo '<h1>', $gallery->current_category(), '</h1>';
echo '<p>', $gallery->description(), '</p>';
[ ... code ... ]
And the result will be something like this.
(Click for larger image)
You can use $gallery->current_category() and $gallery->description() to display the title and/or description of the current directory.
Here's another example:
$info = array(
'Characters' => array(
'title' => 'Characters',
'desc' => 'A list of characters from various animes.'),
'Characters/72552.jpg' => array(
'title' => 'Guts',
'desc' => 'Guts (ガッツ, Gattsu) is a fictional character of the anime and manga franchise Berserk by mangaka Kentaro Miura. He is the main protagonist of the story.'),
'Characters/194495.jpg' => array(
'title' => 'Porco',
'desc' => 'An Italian World War I fighter ace, now living as a freelance bounty hunter chasing "air pirates" in the Adriatic Sea. The man has been cursed, and has been transformed into a pig.'),
'Characters/177250.jpg' => array(
'title' => 'Ippo Makunouchi',
'desc' => 'Ippo is a classic in-fighter and is well known for his Peek-a-Boo style of boxing and hard punches including three signature punches: a rib-cracking Liver blow, Gazelle punch (an uppercut variant), and the Dempsey roll technique.'),
'Characters/174552.jpg' => array(
'title' => 'Yoko Littner',
'desc' => 'Yoko is a girl from Jeeha\'s neighboring village Ritona, who had been chasing the Gunmen which entered Jeeha village. She wields an extensive range of firearms which include a long range sniper rifle.'),
[ ... code ... ]
);
And the output is something like this:
(Click for larger image)
The same thing can be done for all directories and images at all levels of nesting. It's really easy. :)
Comments (0)
Leave a Comment
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.
Login with Google.