ImgBrowz0r, WordPress. & gallerys

[tragicdog]

Hey guys, using screencast #64 and the Imgbrowz0r vs wordpres v2 I was able to get it installed and working on my wordpress install. What I’m having trouble with is when I click on a gallery ie. disneyland, the page no longer has the wordpress theme dictating what it looks like. In installing it how I wanted I changed some titles of the files that comes with ImgBrowz0r.

gallery.php (use to be index.php that came with imgbrowz0r)

Code:

1024; $i++)
$size /= 1024;

return round($size, 2).’ ‘.$units[$i];
}

function get_microtime($microtime=false)
{
if ($microtime === false)
$microtime = microtime();

list($usec, $sec) = explode(‘ ‘, $microtime);
return ((float)$usec + (float)$sec);
}

$start_timer = microtime();

// Include class
require ‘imgbrowz0r.php’;

// These are all settings (set to default). The settings are not validated since you have to configure everything.
// There is a chance that ImgBrowz0r stops working if you enter the wrong values.
$config = array(
// Directory settings. These are required. Without trailing slash. (required)
‘images_dir’ => dirname(__FILE__).’/gallery’,
‘cache_dir’ => dirname(__FILE__).’/cache’,

// Url settings. These are required. Without trailing slash. (required)
// %PATH% is replaced with the directory location and page number
‘main_url’ => ‘http://jonlillie.com/wp-content/themes/TragicTheme/gallery.php?q=%PATH%’,
‘images_url’ => ‘http://jonlillie.com/wp-content/themes/TragicTheme/gallery’,
‘cache_url’ => ‘http://jonlillie.com/wp-content/themes/TragicTheme/cache’,

// Sorting settings (optional)
‘sort_by’ => 3, // 1 = filename, 2 = extension (png, gif, etc.), 3 = inode change time of file
‘sort_order’ => false, // true = ascending, false = descending

// Thumbnail settings (optional)
‘thumbs_per_page’ => 20, // Amount of thumbnails per page
‘max_thumb_row’ => 4, // Amount of thumbnails on a row
‘max_thumb_width’ => 200, // Maximum width of thumbnail
‘max_thumb_height’ => 200, // Maximum height of thumbnail

// Time settings (optional)
‘time_format’ => ‘F j, Y’, // Date formatting. Look at the PHP date() for help: http://nl3.php.net/manual/en/function.date.php
‘time_zone’ => 0, // Timezone. Example: 1
‘enable_dst’ => false, // Daylight saving time (DST). Set this to true to enable it.

// Misc settings (optional)
‘ignore_port’ => false, // Ignore port in url. Set this to true to ignore the port.
‘dir_thumbs’ => true, // Show a thumbnail in a category box. Default is false.
‘random_thumbs’ => true, // Use random thumbnails for categories. Default is false.
‘read_thumb_limit’ => 0 // See README for information about this setting.
);

// Start the class
$gallery = !isset( $mypath ) ? new imgbrowz0r($config) : new imgbrowz0r( $config, $mypath );

// XHTML stuff
?>

Gallery Home

init();

// Generate navigation and statistics
$gallery_breadcrumbs = $gallery->breadcrumbs();
$gallery_pagination = $gallery->pagination();
$gallery_statistics = $gallery->statistics();

// Display description of the current directory (optional).
if (!isset( $mypath ))
echo $gallery->description();

// Display navigation
if (!isset( $mypath ))
echo ‘

‘, “nt”, $gallery_breadcrumbs, “nt”, $gallery_pagination, “nt”, “n”, ‘

‘, “nn”;

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

?>

The etphonehome id is for a link back to the main site until I can get this to work.

ImgBrowz0r.php

Code:

GD is not enabled!

‘);

# set my raw path
$this->my_raw_path = $my_raw_path;

// Set configuration
$this->config = array(
// Directory settings
‘images_dir’ => isset($config[‘images_dir’]) ? $config[‘images_dir’] : exit(‘You have to set the full path to the directory with images!’),
‘cache_dir’ => isset($config[‘cache_dir’]) ? $config[‘cache_dir’] : exit(‘You have to set the full path to the cache directory!’),

// Url settings
‘main_url’ => isset($config[‘main_url’]) ? $config[‘main_url’] : exit(‘You have to set a main url!’),
‘images_url’ => isset($config[‘images_url’]) ? $config[‘images_url’] : exit(‘You have to set the url to the directory with images!’),
‘cache_url’ => isset($config[‘cache_url’]) ? $config[‘cache_url’] : exit(‘You have to set the url to the cache!’),

// Sorting settings
‘sort_by’ => isset($config[‘sort_by’]) && in_array($config[‘sort_by’], array(1, 2, 3)) ? $config[‘sort_by’] : 3,
‘sort_order’ => isset($config[‘sort_order’]) && $config[‘sort_order’] === true ? SORT_ASC : SORT_DESC,

// Thumbnail settings
‘thumbs_per_page’ => isset($config[‘thumbs_per_page’]) ? $config[‘thumbs_per_page’] : 12,
‘max_thumb_row’ => isset($config[‘max_thumb_row’]) ? $config[‘max_thumb_row’] : 4,
‘max_thumb_width’ => isset($config[‘max_thumb_width’]) ? $config[‘max_thumb_width’] : 200,
‘max_thumb_height’ => isset($config[‘max_thumb_height’]) ? $config[‘max_thumb_height’] : 200,

// Time settings
‘time_format’ => isset($config[‘time_format’]) ? $config[‘time_format’] : ‘F jS, Y’,
‘time_zone’ => isset($config[‘time_zone’]) ? $config[‘time_zone’] : 0,
‘enable_dst’ => isset($config[‘enable_dst’]) && $config[‘enable_dst’] === true ? 1 : 0,

// Misc settings
‘ignore_port’ => isset($config[‘ignore_port’]) && $config[‘ignore_port’] === true ? true : false,
‘dir_thumbs’ => isset($config[‘dir_thumbs’]) && $config[‘dir_thumbs’] === true ? true : false,
‘random_thumbs’ => isset($config[‘random_thumbs’]) && $config[‘random_thumbs’] === true ? true : false,
‘read_thumb_limit’ => isset($config[‘read_thumb_limit’]) && is_numeric($config[‘read_thumb_limit’])
&& $config[‘read_thumb_limit’] >= 0 ? $config[‘read_thumb_limit’] : 0
);

if ($this->config[‘random_thumbs’] === false)
$this->config[‘read_thumb_limit’] = 1;
}

public function init()
{
// Get current url
$protocol = !isset($_SERVER[‘HTTPS’]) || strtolower($_SERVER[‘HTTPS’]) == ‘off’ ? ‘http://’ : ‘https://’;
$port = $this->config[‘ignore_port’] === false && (isset($_SERVER[‘SERVER_PORT’]) && (($_SERVER[‘SERVER_PORT’] != ’80’
&& $protocol == ‘http://’) || ($_SERVER[‘SERVER_PORT’] != ‘443’ && $protocol == ‘https://’))
&& strpos($_SERVER[‘HTTP_HOST’], ‘:’) === false) ? ‘:’.$_SERVER[‘SERVER_PORT’] : ”;
$current_url = urldecode($protocol.$_SERVER[‘HTTP_HOST’].$port.$_SERVER[‘REQUEST_URI’]);

// Regex
//
// ExternalFilePath-hack by Krinkle
//
if( is_null( $this->my_raw_path ) )
{
preg_match(‘/^’.str_replace(
array(‘{‘, ‘}’, ‘[‘, ‘]’, ‘?’, ‘(‘, ‘)’, ‘-‘, ‘.’, ‘/’, ‘=’, ‘%PATH%’),
array(‘{‘, ‘}’, ‘[‘, ‘]’, ‘?’, ‘(‘, ‘)’, ‘-‘, ‘.’, ‘/’, ‘=’, ‘(.*?)’),
$this->config[‘main_url’]).’$/i’, $current_url, $matches);

// Set current path/directory and page
$raw_path = isset($matches[1]) ? trim($matches[1], ” /nt”) : false;
}
else
$raw_path = $this->my_raw_path;

if ($raw_path !== false)
{
$this->cur_directory = str_replace(array(‘<', '>‘, ‘”‘, ”’, ‘&’,’ ;’), ”, substr($raw_path, 0, strrpos($raw_path, ‘/’)).’/’);
$this->cur_page = (int) substr($raw_path, strrpos($raw_path, ‘/’)+1);
}
else
{
$this->cur_directory = false;
$this->cur_page = 1;
}

if ($this->cur_directory == ‘0/’ || $this->cur_directory == ‘/’)
$this->cur_directory = false;

$dirs = $imgs = array();
$this->full_path = $this->cur_directory === false ? $this->config[‘images_dir’].’/’ : $this->config[‘images_dir’].’/’.$this->cur_directory;

if (is_dir($this->full_path) && ($handle = opendir($this->full_path)))
{
// Scan directories and files
while (($file = readdir($handle)) !== false)
{
if (is_dir($this->full_path.’/’.$file))
{
// Exclude . and ..
if ($file == ‘.’ || $file == ‘..’)
continue;

$dirs[] = array(0, $file, ‘dir’, filectime($this->full_path.’/’.$file));
}
else
{
// Check if file is an supported image type
$image_extension = imgbrowz0r::get_ext($file);
if (!in_array($image_extension, $this->image_types))
continue;

$imgs[] = array(1, $file, $image_extension, filectime($this->full_path.’/’.$file));
}
}

closedir($handle);

// Sort arrays
if (($this->count_dirs = count($dirs)) > 0)
{
foreach($dirs as $res) $sortAux[] = $res[$this->config[‘sort_by’]];
array_multisort($sortAux, $this->config[‘sort_order’], $dirs);
}

if (($this->count_imgs = count($imgs)) > 0)
{
foreach($imgs as $res2) $sortAux2[] = $res2[$this->config[‘sort_by’]];
array_multisort($sortAux2, $this->config[‘sort_order’], $imgs);
}

// Calculate pages
$this->page_count = (int) ceil(($this->count_dirs + $this->count_imgs) / $this->config[‘thumbs_per_page’]);
$this->cur_page = $this->cur_page > 0 && $this->cur_page <= $this->page_count ? $this->cur_page : 1;

// Merge and slice arrays
$this->files = array_slice(array_merge($dirs, $imgs), ($this->cur_page-1) * $this->config[‘thumbs_per_page’], $this->config[‘thumbs_per_page’]);
$this->count_files = count($this->files);
}
else
$this->status = 404;
}

// Reads the gallery directories and files
public function browse()
{
// Check status code
if ($this->status === 404)
return ‘

‘.”nt”.’

This directory does not exist!

‘.”n”.’

‘.”n”;

if ($this->count_files < 1) return '

‘.”nt”.’

There are no images or directories in this directory.

‘.”n”.’

‘.”n”;

@set_time_limit(180); // 3 Minutes
$row_count = 1;

// Start capturing output
ob_start();
echo ‘

‘, “nt”, ‘

‘, “n”;

foreach ($this->files as $k => $file)
{
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 “tt”, ‘

config[‘images_url’],
‘/’, $this->cur_directory, $file[1], ‘” rel=”prettyPhoto[gallery] title=”‘, $file[1], ‘”>‘, $file[1],
‘
‘, $this->format_time($file[3]), ‘

‘, “n”;
}
else
echo “tt”, ‘

‘, “n”;
$row_count = 0;
}

++$row_count;
}

echo “t”, ‘

‘, “nnt”, ‘

 

‘, “n”, ‘

‘, “nn”;

// Stop capturing output
return ob_get_clean();
}

public function statistics()
{
// Check status code
if ($this->status === 404 || $this->count_files < 1) return; return '

There ‘.($this->count_dirs !== 1 ? ‘are ‘.$this->count_dirs.’ directories’ : ‘is 1 directory’).
‘ and ‘.($this->count_imgs !== 1 ? $this->count_imgs.’ images’ : ‘1 image’).’ in this directory.

‘;
}

// Generate breadcrumbs
public function breadcrumbs()
{
// Check status code
if ($this->status === 404)
return;

$path_parts = $this->cur_directory !== false ? explode(‘/’, trim($this->cur_directory, ‘/’)) : array();

if (isset($path_parts[0]))
foreach ($path_parts as $k => $part)
$output[] = ‘config[‘main_url’]).'”>’.$part.’‘;

return ‘

Breadcrumbs: config[‘main_url’]).'”>Root‘.
(isset($output) ? ‘ / ‘.implode(‘ / ‘, $output) : null).’

‘;
}

// Generate page navigation
public function pagination()
{
// Check status code and page count
if ($this->status === 404 || $this->page_count < 2) return; $pages = array(); $cur_dir = $this->cur_directory !== false ? rtrim($this->cur_directory, ‘/’) : 0;
$current_range = array(($this->cur_page < 5 ? 2 : $this->cur_page-3), ($this->cur_page+3 >= $this->page_count ? $this->page_count-1 : $this->cur_page+3));

// Previous and next links
$prev = $this->cur_page > 1 ? ‘cur_page – 1), $this->config[‘main_url’]).'”>«‘ : null;
$next = $this->cur_page < $this->page_count ? ‘cur_page + 1), $this->config[‘main_url’]).'”>»‘ : null;

// First and last page
$first = $this->cur_page === 1 ? ‘1‘ : ‘config[‘main_url’]).'”>1‘;
$last = $this->cur_page === $this->page_count ? ‘‘.$this->page_count.’‘ : ‘config[‘main_url’]).'”>’.($x == $this->cur_page ? ‘‘.$x.’‘ : $x).’‘;

return ‘

Pages: ‘.$prev.’ ‘.$first.($this->cur_page > 5 ? ‘ … ‘ : ‘ ‘).implode(‘ ‘, $pages).
($this->cur_page < $this->page_count – 4 ? ‘ … ‘ : ‘ ‘).$last.’ ‘.$next.’

‘;
}

// Display description of the current directory
// Html tags are stripped from the description except the following tags:
//

, , , ,
,

,

and

public function description()
{
if (file_exists($this->full_path.’.desc’))
return ‘

‘.
strip_tags(file_get_contents($this->full_path.’.desc’), ‘

‘).
‘

‘;
}

// The legendary thumbnail generater
private function make_thumb($image_dir, $image_name, $image_thumbnail)
{
//Check if thumb dir exists
if (!is_dir($this->config[‘cache_dir’]) || !is_writable($this->config[‘cache_dir’]))
exit(‘Cache directory does not exist or is not writable!’);

$image_dir = $image_dir !== false ? $image_dir.’/’ : null;
$image_info = imgbrowz0r::get_image_info($this->config[‘images_dir’].’/’.$image_dir.’/’.$image_name);

// Check if file is an supported image type
if (!in_array($image_info[‘extension’], $this->image_types))
return false;

// Open the image so we can make a thumbnail
if ($image_info[‘type’] == 3)
$image = imagecreatefrompng($this->config[‘images_dir’].’/’.$image_dir.$image_name);
else if ($image_info[‘type’] == 2)
$image = imagecreatefromjpeg($this->config[‘images_dir’].’/’.$image_dir.$image_name);
else if ($image_info[‘type’] == 1)
$image = imagecreatefromgif($this->config[‘images_dir’].’/’.$image_dir.$image_name);
else
return false;

// Calculate new width and height
$zoomw = $image_info[‘width’] / $this->config[‘max_thumb_width’];
$zoomh = $image_info[‘height’] / $this->config[‘max_thumb_height’];

$zoom = ($zoomw > $zoomh) ? $zoomw : $zoomh;

if ($image_info[‘width’] < $this->config[‘max_thumb_width’] && $image_info[‘height’] < $this->config[‘max_thumb_height’])
{
$thumb_width = $image_info[‘width’];
$thumb_height = $image_info[‘height’];
}
else
{
$thumb_width = $image_info[‘width’] / $zoom;
$thumb_height = $image_info[‘height’] / $zoom;
}

// Create an image for the thumbnail
$thumbnail = imagecreatetruecolor($thumb_width, $thumb_height);

// Preserve transparency in PNG and GIF images
if ($image_info[‘type’] === 3)
{
$alpha_color = imagecolorallocatealpha($thumbnail, 0, 0, 0, 127);
imagefill($thumbnail, 0, 0, $alpha_color);
imagesavealpha($thumbnail, true);
}
else if ($image_info[‘type’] === 1 && ($transparent_index = imagecolortransparent($image)) >= 0)
{
$transparent_color = imagecolorsforindex($image, $transparent_index);
$transparent_index = imagecolorallocate($thumbnail, $transparent_color[‘red’], $transparent_color[‘green’], $transparent_color[‘blue’]);
imagefill($thumbnail, 0, 0, $transparent_index);
imagecolortransparent($thumbnail, $transparent_index);
}

// Copy and resize image
imagecopyresampled($thumbnail, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $image_info[‘width’], $image_info[‘height’]);

// Save the thumbnail, but first check what kind of file it is
if ($image_info[‘type’] == 3)
imagepng($thumbnail, $this->config[‘cache_dir’].’/’.$image_thumbnail);
else if ($image_info[‘type’] == 2)
imagejpeg($thumbnail, $this->config[‘cache_dir’].’/’.$image_thumbnail, 85);
else if ($image_info[‘type’] == 1)
{
imagetruecolortopalette($thumbnail, true, 256);
imagegif($thumbnail, $this->config[‘cache_dir’].’/’.$image_thumbnail);
}

// Destroy
imagedestroy($image);
imagedestroy($thumbnail);
}

private function read_cache($path)
{
if (is_dir($path) && ($handle = opendir($path)))
{
$thumbnails = array();
$file_count = 0;

while (($file = readdir($handle)) !== false)
{
$thumb_extension = imgbrowz0r::get_ext($file);
if (!in_array($thumb_extension, $this->image_types))
continue;

$thumbnails[] = $file;
++$file_count;

if ($file_count === $this->config[‘read_thumb_limit’])
break;
}

closedir($handle);
return $thumbnails;
}
else
return false;
}

// Format unix timestamp to a human readable date
private function format_time($timestamp)
{
return gmdate($this->config[‘time_format’], ($timestamp + $this->config[‘time_zone’] * 3600));
}

// Get info from image (width, height, type, extension)
static private function get_image_info($filepath)
{
$getimagesize = getimagesize($filepath);
return array(‘width’ => $getimagesize[0], ‘height’ => $getimagesize[1], ‘type’ => $getimagesize[2], ‘extension’ => imgbrowz0r::get_ext($filepath));
}

// Get extension from filename (returns the extension without the dot)
static private function get_ext($file_name)
{
return strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
}
}

?>

page-gallery.php (custom page template for wordpress)

Code:

ID, ‘galleryPath’, true);
$mypath .= “/1″;
include $_SERVER[‘DOCUMENT_ROOT’].”/wp-content/themes/TragicTheme/gallery.php”;
?>

My style.css file (due to my install it should cover both my wordpress install and imgbrowz0r)

Code:

/*
Theme Name: TragicTheme
Version: 1.0
Author: Jonathon Lillie
Tags: dark, clean
*/

/*
@import “style/css/reset.css”;
@import “style/css/typography.css”;
@import “style/css/layout.css”;
*/

/*

text-decoration:none;
Personal Blog
by Jonathon Lillie
http://jonlillie.com
*/

* {margin: 0; padding: 0; }

body {font: 14px Helvetica; background: black url(images/bg.jpg) fixed no-repeat right;}
a {color: white;}
a img {border: 0;}
a_post_title {color:white;}
a:hover {color:red;}

#page-wrap {width: 920px; margin: 163px 0px 0px 83px;}

#main-content {margin:0 0 0 288px; background: rgba(46,45,48,0.75); padding: 20px 20px 20px 20px; width: 632px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; color:white; text-align: justify;}
#main-content .a_post_title {text-decoration: none;}
.aktt_tweet_digest {padding-left: 30px;}

#commentform {margin:0 0 50px 288px; background: rgba(46,45,48,0.75); padding: 20px 0px 20px 20px; width: 652px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; color:white; text-align: justify;}
#comment {width: 600px;}

#post- {margin:0 0 0 288px; background: rgba(46,45,48,0.75); padding: 20px 0px 20px 20px; width: 632px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; color:white; text-align: justify;}

aktt_tweet_digest {margin:0 0 0 288px; background: rgba(46,45,48,0.75); padding: 20px 0px 20px 20px; width: 632px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; color:white; text-align: justify;}

#logo {position: absolute; top: 35px; left:282px; border: none;}

#main-nav {list-style: none; margin:0 0 50px 0;}
#main-nav li {font: 24px Helvetica;}
#main-nav li a {color: white; display:block; padding: 5px 0;}
#main-nav li a:hover {color:red;}
#main-nav li.current_page_item a {background: rgba(46,45,48,0.75); margin: 0 0 0 -20px; text-indent:20px; color:#5379D2; font: bold 24px Helvetica: -moz-border-radius-bottomleft: 20px; -moz-border-radius-topleft: 20px; -webkit-border-bottom-left-radius: 20px; -webkit-border-top-left-radius: 20px;}

/*
TYPOGRAPHY
*/

p {font: 16px Helvetica; margin:0 40px 0 10px; padding: 0 0 10px 0;}
h2 {font: 24px Helvetica; color:white; border-bottom: 1px solid white;}
h3 {font: 16px Helvetica; color: white;}

/*
SIDEBAR
*/

#sidebar {float: left; padding:20px; width:268px; color:white; text-align: justify;}
#sidebar h4 {font: 24px Helvetica; color:#red; padding:0 0 5px 0;}

/*
FOOTER
*/
img#wpstats {display:none}

/*
GALLERY
*/
body {color:black;}
img, a img,
.img-directory a {border: 2px solid white;}
a:hover img,
.img-directory a:hover {border-color: #666;}
.clear {clear:both;}

/*
page-wrap {width:800px; margin: 20px auto:}
*/
.etphonehome {color: white; margin: 20px;}

.img-breadcrumbs {color: white; text-align: left; margin: 0 0 20px 0;}
.img-breadcrumbs span {color: white; padding: 10px 20px 10px 10px;}

#imgbrowz0r .img-directory a {background-position: 50% 50%; background-repeat: no-repeat; width: 200px; display: block; height: 140px;}

.img-directory {/*border: 1px solid #651717;*/ padding: 10px;/* margin: 0 0 20px 0;*/ width: 169px; float: left; margin: 0 20px 20px 0; height: 180px; text-align: center;}

.img-thumbnail {display: block; width: 200px; /*border: 1px solid #ccc;*/ padding: 10px; float: left;/* margin: 0 20px 20px 0;*/ height: 180px; text-align: center;}

site linke is jonlillie.com
direct link to the gallery page jonlillie.com/gallery

Any questions don’t hesitate to ask. I’m fairly new to all this. (dove in head first last week with some of Chris’ screencasts and this is where I’ve ended up.) That being said, please be kind :)

Jon

[tragicdog]

Anyone? I’ve tried Integrating WordPress, but no luck. just get errors. It’s really perplexing me.

Basically the problem is the styling and theme is not caring over when I click on an album. works fine on the top level, but no lower.

links again incase you want to take a look:
jonlillie.com/gallery

[Author]

Posts