ImgBrowz0r vs. WordPress (V2)

[TeMc]

If you just want to download and start using it, scroll all the way down to Conclusion.
If you wanna know how I got it to work, read on :)

Summary
The goal is to be able to simply php-include the ImgBrowz0r’s index.php file in a WordPress page-template but set the path to something else.
By default imgbrowz0r extracts the path from the "q"-variable in the URL.

For example:

Code:

http://example.com/imgbrowz0r/index.php?q=path/1

The way the script get’s that path into a variable, by default, is the following snippet from imgbrowz0r.php from line 87 and beyond:

Code:

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
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;

1) Switching variable (ifelse)
So basicly, the url get’s decomposed into several pieces. Of which the the "matched" array is one.
Then the $raw_path is set to the path extracted from the URL.

So, we’re gonna bring in a new variable that’s ultimatly being set in a custom-field of the page.
However, we’re gonna work our way back to that custom-field from the very same spot in the snipped above.

Code:

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 our new variable in $this ("my_raw_path") is empty, then just do the regular thing and extract the q-variable from the URL.
However, if our variable is not null (meaning it’s set to something) then set the $raw_path to our new variable.

2) Adding a few extra lines
Now that the hard part is done, we still have to make it valid since this new variable isn’t completely covered overall yet.

In the first few lines of imgbrowz0r.php, find the following code:

Code:

public $status=200;

// Check if GD is loaded and set configuration
public function __construct($config)

And replace it with this :

Code:

private $my_raw_path = null;

public $status=200;

// Check if GD is loaded and set configuration
public function __construct($config, $my_raw_path = null )

Then find this:

Code:

// Set configuration

And replace it with this:

Code:

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

// Set configuration

3) Transferring the variable from index.php to imgbrowz0r.php
In imgbrowz0r’s folder open up index.php and tweak a tiny bit.

Find this:

Code:

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

And replace with:

Code:

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

What this does is, again. Check if the variable actually is set. And if not, just do the regular thing.
This will also ensure that you can still access all your galleries by browsing imgbrowz0r’s folder directly.

4) Including in page-template and using custom-field
Now comes the WordPress-part of the story.
In your page-template (for example page-gallery.php in your Theme’s folder) we’re going to set $mypath to the value of our custom-field.

Place the following code anywhere within the loop on the place where you want it to show.
I have placed it directly after the main-content of the page but you can place it anywhere as long as it’s within the loop.

Code:

ID, ‘galleryPath’, true);
$mypath .= “/1″;
include $_SERVER[‘DOCUMENT_ROOT’].”/imgbrowz0r/index.php”;
?>

Now all you have left to do is make/edit a page in your backend of WordPress,
pick the right Template and make/fill in a custom field called galleriePath.

Also, be sure to check the XHTML and CSS in index.php.
I’ve stripped out a lot (like the fixed-width css code, it now fits perfectly in the width of your blog-post), I also stripped out the html, header and body tags since it’s going to be included inside your file. And lastly I’ve also stripped out the title, breadcrumbs, navigation and statistics.

However, there is an if-else statement that will show all above mentioned when mypath is empty.
Meaning, when you’re not including it but accessing /imgbrowz0r/index.php directly.

So but included and not included, you’ll still be presented a fully valid page.

5) Conclusion

So, download the attachment to this forumpost and have fun with my ExternalFilePath V2 + imgbrowz0r 0.3.3.

* Don’t forget to fill in your relative paths in index.php just like you have to do with the usual imgbrowz0r
* Don’t forget to put the above code in your page-template as stated in step 4
* Remember that the custom-field does not have to include " /1 ".
The code-snippet in the page-template already takes care of this :) .

[attachment=0]imgbrowz0r-ExternalFilePath-2.0.zip[/attachment]

[TeMc]

5) Conclusion

So, download the attachment to this forumpost and have fun with my ExternalFilePath V2 + imgbrowz0r 0.3.3.

* Don’t forget to fill in your relative paths in index.php just like you have to do with the usual imgbrowz0r
* Don’t forget to put the code in your page-template as stated above in step 4
* Remember that the custom-field does not have to include " /1 ".
The code-snippet in the page-template already takes care of this :).

[attachment=0]imgbrowz0r-ExternalFilePath-2.0.zip[/attachment]

[Denys]

Hi TeMc.
I have the following error on WordPress

Code:

Fatal error: Call to undefined function get_header() in /home/user/public_html/wp-content/themes/hi/gallery.php on line 6

This error showing only when I’m trying to get to the second page of my gallery. At first page all is fine.
Maybe you know what need to do for WordPress headers?
Thank you!

[TeMc]

@Denys:
Please provide more information, such as the website this is happening on (a link to the exact page if possible, or explain how to get there), and also the source-code of gallery.php

–
TeMc

[Denys]

Thank you for answering. At this time I can’t give a external link only source file.
PHP version 5.2.11, WordPress 2.8.6
My test gallery have 2 pages.When I entered in gallery everything is fine but when Im going to the second page I see this error on blank page

Code:

Fatal error: Call to undefined function get_header() in /home/user/public_html/wp-content/themes/hi/gallery.php on line 6

This error showing only at gallery page.
Source code:

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://mysite.com/wp-content/themes/mytheme/gallery.php?q=%PATH%’,
‘images_url’ => ‘http://mysite.com/wp-content/themes/mytheme/gallery’,
‘cache_url’ => ‘http://mysite.com/wp-content/themes/mytheme/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’ => 12, // 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 jS, 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’ => false, // 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

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”, ‘

‘, “nn”;

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

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

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

‘, “nn”;

?>

Thanks!

[TeMc]

I don’t see any obvious flaws in the code (maybe a space after the colling in Template Name:<space>Gallery).

@Denys: How are you calling gallery.php ?

Have you used it as a Page Template in wp-admin, or are you going to "/home/user/public_html/wp-content/themes/hi/gallery.php" directly in the addressbar ?

When you make a new page in wp-admin, does it show "Gallery" in the Template-drowpdown ?

See also the WordPress Codex on Page Templates

[Denys]

I’m used this like Page Template. In Template-dropdown menu I have Gallery template and I use it for gallery page.
I see Codex and nothing found.

[tragicdog]

Hey guys, hope you can help me getting ImgBrowz0r to work inside of wordpress.

My index.php file for ImgBrowzer

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__).’/images’,
‘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://jonlilie.com/wp-content/themes/TragicTheme/gallery/index.php?q=%PATH%&#8217;,
‘images_url’ => ‘http://jonlillie.com/wp-content/themes/TragicTheme/gallery/images&#8217;,
‘cache_url’ => ‘http://jonlillie.com/wp-content/themes/TragicTheme/gallery/cache&#8217;,

// 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’ => 12, // 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 jS, 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’ => false, // 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
?>

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”, $gallery_statistics, “n”, ‘

‘, “nn”;

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

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

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

‘, “nn”;

// Showing some stats
if (!isset( $mypath ))
echo ‘

Processing time: ‘, round(get_microtime(microtime()) – get_microtime($start_timer), 5), ‘ && Memory usage: ‘, file_size(memory_get_usage()), ‘

‘;

?>

My custom page page-gallery.php

Code:

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

A link to my site:

jonlillie.com/gallery

fixed the errors, but I can’t seem to click on any gallerys on the page. click the link above to see what I’m talking about.

any help would be greatly appreciated. This is one of the last steps in a site redesign and it’s bugging me.

[TeMc]

@tragicdog: I take it you gave up or used something else since it’s been about 2 months, but I’ll answer anyway:

The ImgBrowz0r files should be in a certain folder. In the example code this folder is called "gallery" and is in the root of your website.

Then the Page-template you create in WordPress should be applied to a page in wordpress. The name of this page doesn’t really matter, as long as the slug of this page is not "gallery" since they can’t both have the same name.

It’s really a super easy to use system once it works. You just upload a folder, give the name of this folder as a custom field in WordPress and et voila all thumbs and stuff is working.

[tragicdog]

thanks, looks like my problem was naming the page gallery, and yes I had given up on it and swtiched to something that works with flickr, but I would prefer to use ImgBrowz0r as it would be the IMO the easiest solution.

[Author]

Posts