Forums

Get help. Give help. A Community of Web Designers.

ImgBrowz0r vs. WordPress (V2)

This area is for CMS questions, like WordPress & Joomla.

ImgBrowz0r vs. WordPress (V2)

Postby TeMc » Mon Aug 24, 2009 5:47 pm

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: Select all
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: Select all
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], " /\n\t") : 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: Select all
   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], " /\n\t") : 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: Select all
   public $status=200;

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


And replace it with this :
Code: Select all
        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: Select all
      // Set configuration

And replace it with this:
Code: Select all
                # 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: Select all
// Start the class
$gallery = new imgbrowz0r($config);

And replace with:
Code: Select all
// 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: Select all
                     <?php the_content(''); ?>
                     
         <div class="gallery-include">
            <?php
               $mypath = get_post_meta($post->ID, 'galleryPath', true);
               $mypath .= "/1";
               include $_SERVER['DOCUMENT_ROOT']."/imgbrowz0r/index.php";
            ?>
         </div>


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 :)
.

imgbrowz0r-ExternalFilePath-2.0.zip
(184.57 KiB) Downloaded 133 times
TeMc
Member
 
Posts: 53
Joined: Thu Jun 11, 2009 12:12 pm

Re: ImgBrowz0r vs. WordPress (V2)

Postby TeMc » Mon Aug 24, 2009 5:52 pm

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 :).

imgbrowz0r-ExternalFilePath-2.0.zip
(184.57 KiB) Downloaded 116 times
TeMc
Member
 
Posts: 53
Joined: Thu Jun 11, 2009 12:12 pm

Re: ImgBrowz0r vs. WordPress (V2)

Postby Denys » Wed Dec 30, 2009 7:41 pm

Hi TeMc.
I have the following error on Wordpress
Code: Select all
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!
Denys
 
Posts: 3
Joined: Wed Dec 30, 2009 7:33 pm

Re: ImgBrowz0r vs. WordPress (V2)

Postby TeMc » Sun Jan 17, 2010 6:49 am

@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
TeMc
Member
 
Posts: 53
Joined: Thu Jun 11, 2009 12:12 pm

Re: ImgBrowz0r vs. WordPress (V2)

Postby Denys » Wed Jan 20, 2010 2:57 pm

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: Select all
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: Select all
<?php
/*
Template Name:Gallery
*/
?>
<?php get_header(); ?>
<?php

error_reporting(E_ALL);

// Some stuff for generating stats
function file_size($size)
{
   $units = array('b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb');

   for ($i = 0; $size > 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
?>
<?php
if (!isset( $mypath )) { ?>

   <h3>Gallery</h3>
<div id="gallery">
<?php } ?>
<?php

// Prepare everything. This function must be called before you call other functions.
$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 '<div class="imgbrowz0r-navigation">', "\n\t", /*$gallery_breadcrumbs, "\n\t",*/ $gallery_pagination, "\n\t", '</div>', "\n\n";

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

// Display navigation
if (!isset( $mypath ))
   echo '<div class="imgbrowz0r-navigation">', "\n\t", $gallery_pagination, "\n\t", /*$gallery_breadcrumbs, "\n",*/ '</div>', "\n\n";


?>
<?php
if (!isset( $mypath )) { ?>
</div>

<?php } ?>
<?php get_footer(); ?>


Thanks!
Denys
 
Posts: 3
Joined: Wed Dec 30, 2009 7:33 pm

Re: ImgBrowz0r vs. WordPress (V2)

Postby TeMc » Mon Jan 25, 2010 1:06 pm

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
TeMc
Member
 
Posts: 53
Joined: Thu Jun 11, 2009 12:12 pm

Re: ImgBrowz0r vs. WordPress (V2)

Postby Denys » Mon Jan 25, 2010 6:59 pm

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.
Denys
 
Posts: 3
Joined: Wed Dec 30, 2009 7:33 pm

Re: ImgBrowz0r vs. WordPress (V2)

Postby tragicdog » Sat Apr 10, 2010 7:29 am

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

My index.php file for ImgBrowzer
Code: Select all
<?php

error_reporting(E_ALL);

// Some stuff for generating stats
function file_size($size)
{
   $units = array('b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb');

   for ($i = 0; $size > 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%',
   'images_url'               => 'http://jonlillie.com/wp-content/themes/TragicTheme/gallery/images',
   'cache_url'                => 'http://jonlillie.com/wp-content/themes/TragicTheme/gallery/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
?>
<?php
if (!isset( $mypath )) { ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <title>JonLillie.com|Photos</title>

   <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>
<body id="imgbrowz0r">
   <div id="wrapper">
<?php } ?>
<?php

// Prepare everything. This function must be called before you call other functions.
$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 '<div class="imgbrowz0r-navigation">', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t", $gallery_statistics, "\n", '</div>', "\n\n";

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

// Display navigation
if (!isset( $mypath ))
   echo '<div class="imgbrowz0r-navigation">', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '</div>', "\n\n";

// Showing some stats
if (!isset( $mypath ))
   echo '<p>Processing time: ', round(get_microtime(microtime()) - get_microtime($start_timer), 5), ' &amp;&amp; Memory usage: ', file_size(memory_get_usage()), '</p>';

?>
<?php
if (!isset( $mypath )) { ?>
   </div>
</body>
</html>
<?php } ?>


My custom page page-gallery.php
Code: Select all
<?php
/*
Template Name: Gallery
*/
?>

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_content(''); ?>
                 
   <div class="gallery-include">
      <?php
         $mypath = get_post_meta($post->ID, 'galleryPath', true);
         $mypath .= "/1";
         include $_SERVER['DOCUMENT_ROOT']."/gallery/index.php";
      ?>
   </div>

<?php endwhile; else: ?>
   <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

<?php get_footer(); ?>


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.
tragicdog
 
Posts: 9
Joined: Tue Apr 06, 2010 2:53 am

Re: ImgBrowz0r vs. WordPress (V2)

Postby TeMc » Mon Jun 14, 2010 8:41 am

@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.
TeMc
Member
 
Posts: 53
Joined: Thu Jun 11, 2009 12:12 pm

Re: ImgBrowz0r vs. WordPress (V2)

Postby tragicdog » Mon Jun 14, 2010 2:33 pm

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.
tragicdog
 
Posts: 9
Joined: Tue Apr 06, 2010 2:53 am


Return to CMS Help & Troubleshooting

Who is online

Users browsing this forum: No registered users and 1 guest