[Solved] Imgbrowz0r vs. WordPress

[TeMc]

Hi Chris and other fellow forum-members,

I’ve been checking out screencast 64, and albeit the many gallery-plugins for WordPress… I fell in love with imgbrowz0r.

Thing is… I’m not sure how to get it into WordPress.

The idea is to have the imgbrowz0r-files and galleries in the root of my website in a folder called "galleries".
And just for general information: I’m using the %POSTNAME%-only permalink-structure in WordPress (just like css-tricks.com).

And the goal I’m hoping to achieve is the following:

"TeMc" wrote:

I can make a post, and whenever I have the template "Photogallery" selected and the custum-field "galleryPath" filled in, at the bottom of that post will show up the gallerie with that name.

So, I was thinking.. how am I gonna do this ?
Well, I tried a bit but this class-thing is still fairly new to me. So here’s what I tried.
It was the first thing that got into my head, and for the record.. I haven’t been using PHP for a while and when I did use, it was was only on a basic to average level (ie. using includes for simple CMS-like configurations, a php mail form with GET/POST, and all kinds of little tweaks in a WordPress-theme ).

First idea
The first idea was to duplicate the single.php file to make the tempalte, and add below "<the_content>" an extra <div> with inside a php include like this:

Code:

// custum-field “galleryPath” is set to “myfolder/1” in the WordPress-post
ID, ‘galleryPath’, true);
include $_SERVER[‘DOCUMENT_ROOT’].”/galleries/index.php?q=” . $galleryPath;
?>

However the include didn’t like the variable in the filename (after some thinking I remembered that it’s very normal for an include NOT to work this way :roll: )

So I ended up trying all sorts of things to set the variable in a different way. All kinds of things from as simple as:

Code:

$q = $galleryPath;

and including the file anyway.
(…)
To all the way to copying the entire file into my page-template and trying to set "q" to $galleryPath instead where it GETs that q-variable.
And the latter was kindof hard… Because, although I’m not completely sure, I think It’s not using the GET[""]-method, but using some sort of "implode" for the URL to get the q-variable. But I couldn’t get it to change.

Hmmmsz
So… the main question is.. How can I get an imgbrowz0r-gallery inside a WordPress-post ?

And what would be the right way to change that variable and include the gallery ?
Or maybe there’s another/better way to get it in the post ?

—
Greetings,
TEMC

PS:
– Note that an iframe is not a good solution since Lightboxes don’t extend further then the iframe, and neither is it ideal for DOM-structure and CSS-targeting (ie. body#page .post iframe a img.thumbnail { css here} – does obviously not work/exist :p ).

[TeMc]

Okay, after a session on #wordpress on irc.freenode.org I got it fixed !

If you just want to know what to fix, scroll all the way down to Conclusion. If you wanna know how it got to work, read on :)

Summary
The goal is to be able to simply php-include the imgbrowz0r’s index.php file in a 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://www.mydomain.com/galleries/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://&#8217; : ‘https://&#8217;;
$port = $this->config[‘ignore_port’] === false && (isset($_SERVER[‘SERVER_PORT’]) && (($_SERVER[‘SERVER_PORT’] != ’80’
&& $protocol == ‘http://&#8217;) || ($_SERVER[‘SERVER_PORT’] != ‘443’ && $protocol == ‘https://&#8217;))
&& 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://&#8217; : ‘https://&#8217;;
$port = $this->config[‘ignore_port’] === false && (isset($_SERVER[‘SERVER_PORT’]) && (($_SERVER[‘SERVER_PORT’] != ’80’
&& $protocol == ‘http://&#8217;) || ($_SERVER[‘SERVER_PORT’] != ‘443’ && $protocol == ‘https://&#8217;))
&& 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);
include $_SERVER[‘DOCUMENT_ROOT’].”/galleries/index.php”;
?>

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

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.

5) Conclusion

So, download attachment to this post and get my customized imgbrowz0r.php and index.php files based on imgbrowz0r 0.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

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

[Rob MacKay]

Hey well done! And top marks for the 1337 title :D lol

[FSX]

Good work~ Nice guide. :)

I think I’ll put a link on the ImgBrowz0r project page.

Edit:
Done. See: http://61924.nl/projects/imgbrowz0r.html

[TeMc]

"FSX" wrote:

Good work~ Nice guide. :)

I think I’ll put a link on the ImgBrowz0r project page.

Edit:
Done. See: http://61924.nl/projects/imgbrowz0r.html

Hi FSX,

Thanks for the linking,
Could you edit the link, and link to this: https://css-tricks.com/forums/viewtopic.php?f=6&t=3077#p14228 ?
That way the readers will go to the tuturial, instead of my start post ;)

[FSX]

Sure. ^^

[TeMc]

"FSX" wrote:

Sure. ^^

Thanks.

[Kapitol]

Code:

ID, ‘galleryPath’, true);
include $_SERVER[‘DOCUMENT_ROOT’].”/galleries/index.php”;
?>

I have a couple questions about this code.
I am working locally using XAMPP, so my url is http://localhost/northstar

$mypath = get_post_meta($post->ID, ‘galleryPath’, true);
Are you saying that galleryPath is a custom field? if so what am I suppose to put inside the ‘value’ area of this custom field?
If its not what am I suppose to change here?

$_SERVER."/galleries/index.php";
That code kicks out an error for me
I have tried using
<?php bloginfo(‘siteurl’); ?>/galleries/index.php
Which didnt work.
So I used a standard include,
<?php include ‘wp-content/themes/northblue/gallery/index.php’; ?>
It does work, but folders don’t work.

When you made this did you test it locally before going live? If so did you use any different code for that test?

I extracted files from the zip into a directory called gallery. I changed the information in the index.php folder to:

Code:

// 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’ => dirname(__FILE__).’/info-gallery.php?q=%PATH%’,
‘images_url’ => ‘http://localhost/northstar/wp-content/themes/northblue/gallery/gallery&#8217;,
‘cache_url’ => ‘http://localhost/northstar/wp-content/themes/northblue/gallery/cache&#8217;,

[TeMc]

Hi Kapitol,

1) Custum field
galleriePath is indeed a custum field. In your WP Admin you make a custumfield with that name and put in the name of the folder you uploaded.

For example, using the information provided in your post above, if you upload a folder with pictures in http://localhost/northstar/wp-content/t … e/gallery/ (ie. "My PhotoAlbum") then in WP Admin make a new custumfield called galleriePath and the value is gonna be "My PhotoAlbum".

TIP: If you’re doing this for a client, I recommend making a new FTP account that has only acces to the gallery-folder. They upload a folder with pics in that gallery-folder (which seems to them as the root), and then the client types the name of the folder in a custum field in WP Admin and et voila, the gallery appears in that wordpress page :)

2) Code issue
You forgot a little bit, like I said, you need to edit/fill in the paths.

Before I go into it, I’ll answer your final question first; I did not test it on a localhost XAMPP or alike installation, but it should work just fine aslong as you have PHP installed.

So, you need to edit/fill in the paths. In index.php you did it all well I presume, however in your page template you need to fill in the path aswell:

Code:

ID, ‘galleryPath’, true);
include $_SERVER[‘DOCUMENT_ROOT’].”/galleries/index.php”;
?>

means that you installed my script in the server root in a folder called "galleries", so http://localhost/galleries
However, when reading above I see that you installed it in "http://localhost/northstar/wp-content/themes/northblue/gallery/&quot; so in your page template, find the above quoted code and make sure you got the path correct in there aswell.

If you need any further help just ask in here.

—
TeMc

[TeMc]

Okay, I’ve recieved a fair amount of e-mail regarding several bugs or problems when using my ExternalFilePath-hack with CMS’es other then WordPress.

While fixing the bugs and optimizing the extension more, in the meantime the folks at 61924 have releases a new stable version of their class. So I took the opportunity to both fix the bugs and update the extension with the new stable version.

Check this topic for the new version:

viewtopic.php?f=10&t=4160

[lopez]

Help please, Im quite new to PHP and all coding CSS etc. Ive followed Chris great Tut on imgbrowz0r but for the life of my can’t get it to even work at all, ive attached a screenshot of my index php what am i doing wrong?

[TeMc]

You haven’t set "images_dir" and "cache_dir".

It’s the path on your server to those folders of "images_url" and "cache_url".

Code:

// Directory settings. These are required. Without trailing slash. (required)
‘images_dir’ => your/path/to/imgbrowz0r/gallery’,
‘cache_dir’ => your/path/to/cache’,

The reason you have to set images_dir, cache_dir AND images_url, cache_url, is that Imgbrowz0r creates the thumbnails for your and reads the images. It does this internally, so it needs to know where to find it.

A path may look like this:

Code:

/home/mydomain.com/public_html/imgbrowz0r/
/var/www/imgbrowz0r/
/username/domains/mydomain.com/public_html/imgbrowz0r/

If you don’t know the path, or don’t want to look for it, then simply use this:

Code:

// Directory settings. These are required. Without trailing slash. (required)
‘images_dir’ => dirname(__FILE__).’/gallery’,
‘cache_dir’ => dirname(__FILE__).’/cache’,

the command dirname(__FILE__) will automagically point to the path of creative-order.com/imgbrowz0r/ (meaning, the path to the directory index.php is inside of).

So copy-paste the above code and try again.
Also, please let us know if it worked :)

-Tem

[lopez]

Hey Tem thanks so much for your help, but alas its still a no go, ive tried all sorts of combinations of URl addresses/locations and it still don’t work…

// 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’ => ‘creative-order.com/imgbrowz0r/index.php?q=%PATH%’,
‘images_url’ => ‘creative-order.com/imgbrowz0r/gallery’,
‘cache_url’ => ‘creative-order.com/imgbrowz0r/cache’,

[TeMc]

with images_url and cache_url don’t forget to include "http://www.&quot; in front of creative-order.com ;)

[lopez]

Yeah i most definitely tried that putting that in front, i tried all sorts of combinations, still no joy, argh!!!

[Author]

Posts