Tutorial: How to Integrate Gallery into your Website (Gallery 1.4.x / 1.5.x)

I decided to write this taking some information from Gaile's Tutorial because I found myself getting confused. Personally I'm a visually person and it went into a lot of explanation on what edited one, what TR and TD commands used, where what went where. Not everyone is very familar with Table setup and a lot of people use a web editing program like Dreamweaver, Frontpage or some freeware. Now that I've actually done it, everything is much easier but I was trying to understand what the code meant and couldn't visualize it. So I've broken down into a few easy steps.

1. First design your website or the template for your Gallery. Gaile's Gallery Custom Tutorial Guideprovides a lot of good information. It also has code you can C&P and explains what does what. All the comments unfornately was confusing me because I just needed to know where to break up the HTML in my layout into Header and Footer.

Example 1 - Simple Layout
Example 2 - More Complex Layout

In these two examples you can see where everything is laid out. Example 1 lets you edit the sections you want. All you need to do is go to View > Source and then C&P (Copy and Paste) the code into the html portion of your wed editor. Example 2 is a little more complex but it shows you more what I mean by design your layout. Leave a large portion in the middle for your gallery, as you can see by the large white space.

2. Label Your Gallery Space

What I mean by that is in your editor or the blank space you've left for the Gallery put in there This is your gallery. Example 1 shows where I have done so, Example 2 - More Complex Layout shows the white space where you will need to label your Gallery Space.

I found labeling the space makes things easier because you will mark in the code where you will be breaking your layout into 2 seperate portions Header and Footer. Basically your Header file will contain the top banner cell and your left column, the Footer contains the right column and bottom. It then will wrap around your gallery, hence the name Wrapper. A lot of mistakes I've made was from C&P the columns, which was right but if you miss a TR, TD tag or leave something open without a close tag it will cause the layout to distort.

View the HTML portion of your layout in your web editor. Go to where you have labeled "This is your Gallery" and you'll see that the text will be between a <TD and a </TD tag. Highlight anything above your text, "This is your Gallery" from the <TD tag above it all the way to the top. Cut and paste that into your wrapper.header.default (located in your html_wrap directory) at the end after all the php code. Everything under your text, "This is your Gallery" from the </TD tag and below, cut and paste that into your wrapper.footer.default (located in html_wrap directory) at the end after all the php code.

3. Upload and Test It.
Now upload your wrapper files back into their directory and go your gallery to see the changes. After I got it figured out I was able to make changes fairly quickly without any issues. When you first start out it might take a couple times to get it right, the trick is just knowing where to C&P for your header and what goes into your footer.

I hope that helps someone. This was written fairly fast but sometime when I get some time I'll flesh it out more with screenshots to give a more visual presentation so that things are easier to understand. I know reading a few paragraphs of instructions can be confusing espcially when there are a lot of TD, TR, etc tags and if you have no real experience editing HTML it makes things difficult. Let me know if there are things you'd like more detail on, screenshots on, etc included in the Tutorial and I'll try to add them. Thank you.

You can find all the information that I used to modify that here:

http://gallery.menalto.com/index.php?name=PNphpBB2&file=viewtopic&t=16391

That should help you get what your looking for. If you need any help please let me know in that thread.

Add your script (and meta tags) betwwen the head tags in:

albums.php
view_albums.php
view_photo.php
slideshow.php

Excelent.
That is what I was wondering and it worked great for me.
Thank you!

Hi. I am trying to add a header and footer to my Gallery. I read Gaile's tutorial and I din't understand on thing. She states that you just tneed to copy and past under the php code. That does just mean at the bottom of the page? Here is the code. Any help greatly appreciated.

<?php
// $Id: wrapper.header.default,v 1.20 2004/03/31 21:11:43 jenst Exp $
// This header file detects whether Gallery is embedded in any
// known PHP applications and then decorates Gallery appropriately.

global $GALLERY_EMBEDDED_INSIDE;
global $GALLERY_EMBEDDED_INSIDE_TYPE;

if(isset($GALLERY_EMBEDDED_INSIDE)) {
global $PHP_SELF;

if (
($GALLERY_EMBEDDED_INSIDE_TYPE == 'postnuke' && !defined("LOADED_AS_MODULE")) ||
($GALLERY_EMBEDDED_INSIDE_TYPE == 'phpnuke' && !eregi("modules.php", $PHP_SELF)) ||
($GALLERY_EMBEDDED_INSIDE_TYPE == 'nsnnuke' && !eregi("modules.php", $PHP_SELF)) ||
($GALLERY_EMBEDDED_INSIDE_TYPE == 'phpBB2' && !defined("LOADED_AS_MODULE"))
) {
die ("You can't access this file directly...");
}

switch ($GALLERY_EMBEDDED_INSIDE_TYPE) {

case 'phpnuke':
case 'postnuke':

/*
* Nuke owns the <head> tag and doesn't share. So, if we want to get our
* style sheet in place we've got to intercept Nuke's header and modify it
* to insert a few lines of our own in place. We could speed this process
* up greatly if we cached the results and saved it somewhere handy (like
* the session) but then we'd be vulnerable to attack by somebody who has
* write permissions in the directory that the session files live. They
* could create a bogus session file, set that ID into their cookie and
* then pass their own code into our eval() below.
*/
$header = "";
if ($fd = fopen("header.php", "r")) {
while (!feof($fd)) {
$line = fgets($fd, 1024);
$line = str_replace('<?php', '', $line);
$line = str_replace(' ?>', '', $line);
$header .= $line;
if (strstr($line, "<head")) {
$links = getStyleSheetLink();
$links = str_replace('"', '\"', $links);
$header .= 'echo "' . $links . '\n";' . "\n";
}
}
}

/*
* We can control whether we see the right side blocks
* by setting the value of the $index variable. To
* see the blocks, set $index to 1. To hide them set
* $index to 0. We default to 0 to leave more room for
* the photos. If you change this value, you should
* also change it in wrapper.footer
*
* Note that we save the current value of $index in
* $tmp_index and restore it when we're done. If we
* don't do this, navigation won't work!
*/
global $index;
$tmp_index = $index;
$index = 0;

eval($header);

OpenTable();

$index = $tmp_index;
break;

case 'phpBB2':
/*
* PhpBB2 uses a templating system and also owns the HEAD tags. The
* easiest way at the moment to tackle this issue is therefore to
* simply make sure we don't call this function if phpBB2 is being used
* and put the style sheet link into the template manually
*/

global $phpbb_root_path;
global $template;
global $db;
global $theme, $lang, $images;
global $board_config;
global $phpEx;
global $userdata, $u_login_logout;
global $s_privmsg_new, $s_last_visit;
global $l_privmsgs_text_unread, $l_privmsgs_text, $l_online_users;
global $page_title, $nav_links_html;

// Sort out the page title
$page_title .= $gallery->app->galleryTitle;

// Verify that the $phpbb_root_path isn't overwritten with a remote exploit
if (!realpath($phpbb_root_path)) {
print _("Security violation") ."\n";
exit;
} else {
if (! defined("PHPBB_ROOT_PATH")) {
define("PHPBB_ROOT_PATH", $phpbb_root_path);
}
include (PHPBB_ROOT_PATH . "includes/page_header.php");
}
break;

case 'GeekLog':
/*
** Display header and left blocks
*/
echo COM_siteHeader();
break;

}
}
?>

in the skin you are using ( lesault.com/gallery/skins/bblue/css/embedded_style.css ) change
margin-top: 25px;
to
margin-top: 0px;

Dave

Dave, thanks so much. At last I'm getting somewhere.....

I'm html & php illiterate, but thanks to the tutorials i've got this far. Please can someone tell me how to get rid of the borders around my tables. All around the outside of the page i can see the teal green background colour which is the default background colour for standalone gallery style sheet.

Also, I want to put a frame above my logo and down the right and left sides and then along the bottom of the whole table. Like JoJo has at http://www.josefrancocastillo.com.ph/. Can someone point me in the right direction to learn how to do this.

Thanks millions......

Oh yeah - my site = www.sheridanfamily.com/gallery

This worked great! I have one problem though.

Everything looks fine but when I go to a larger size of picture within an album it breaks the table size and starts to re-tile the images I use for the background.

Also the footer does not show up in I.E. but does in Mozilla. Any suggestions?

http://west4me.com/ipw-web/gallery2/index.php
v1.4.4-pl2

Never mind, I fixed it.

All of the stuff that needed to be in the <head>, I had inserted (php echo) into the util.php page, starting where the doctypes are mentioned (line 2841 or so). Then I left all of the body/layout stuff in the wrapper.header.

After tweaking the util.php, it seems that the albums are working great now.

e2,
Very nice site. A lot of effort pays off.

Dave

I am trying to work my way thru Gaile and Shadow Wolf's tutorials. I am dense because I don't follow a few things:

1. Where I am supposed to paste the code from Gaile's tutorial? The code in wrapper.header.default is below. Do I just paste at the bottom this code?

2. When I edit the wrapper.header.default and same as wrapper.header, the "save as" prompts for a file type. What type to I select "html"? "text"?

I have been trying differennt things for hours with no results. Sorry if this is basic and I am missing something. Any help would be appreciated. Thanks.

<?php
// $Id: wrapper.header.default,v 1.9 2003/07/28 09:49:16 jefmcg Exp $
// This header file detects whether Gallery is embedded in any
// known PHP applications and then decorates Gallery appropriately.

global $GALLERY_EMBEDDED_INSIDE;

switch($GALLERY_EMBEDDED_INSIDE) {
case "nuke":
global $PHP_SELF;
if (!eregi("modules.php", $PHP_SELF)) {
die ("You can't access this file directly...");
}

/*
* Nuke owns the <head> tag and doesn't share. So, if we want to get our
* style sheet in place we've got to intercept Nuke's header and modify it
* to insert a few lines of our own in place. We could speed this process
* up greatly if we cached the results and saved it somewhere handy (like
* the session) but then we'd be vulnerable to attack by somebody who has
* write permissions in the directory that the session files live. They
* could create a bogus session file, set that ID into their cookie and
* then pass their own code into our eval() below.
*/
$header = "";
if ($fd = fopen("header.php", "r")) {
while (!feof($fd)) {
$line = fgets($fd, 1024);
$line = str_replace('<?php', '', $line);
$line = str_replace(' ?>', '', $line);
$header .= $line;
if (strstr($line, "<head")) {
$links = getStyleSheetLink();
$links = str_replace('"', '\"', $links);
$header .= 'echo "' . $links . '\n";' . "\n";
}
}
}

/*
* We can control whether we see the right side blocks
* by setting the value of the $index variable. To
* see the blocks, set $index to 1. To hide them set
* $index to 0. We default to 0 to leave more room for
* the photos. If you change this value, you should
* also change it in wrapper.footer
*
* Note that we save the current value of $index in
* $tmp_index and restore it when we're done. If we
* don't do this, navigation won't work!
*/
global $index;
$tmp_index = $index;
$index = 0;

eval($header);

OpenTable();

$index = $tmp_index;
break;
}
?>

Thanks, Dave! I really do appreciate your help.

Seems that I had the code placement correct. The problem I was having was the extension. I was saving as ".txt". I couldn't rename before upload, but was able to rename after. Now it seems to be working!

Which links are you referring to?

Gaile

Hi shoptangerine

I've had a quick look at your site - have you got this to where you want it to be?

To fit this seamlessly with your website there are several files that you need to edit.

The main one is the header.wrapper which is in your html_wrap directory.

You need to build a table row that has your main header in it. You might get lucky and be ably to simply add your code in and it'll work without any messign around - ie
<table>
<tr><td colspan="2">
<div id="logo"><img src="http://www.shoptangerine.com/images/tan_01.gif"></div>
<div id="header"><img src="http://www.shoptangerine.com/images/tan_02.gif"></div>
</td></tr>
</table>

You'll also need to make additions to the css file in your theme for the id's logo and header

I hope this helps. If not drop me a line at

Aaron Brockhurst
Covenant Solutions

Is there any way that someone could help me change my design from left only sidebar to having a left and right?

I can't figure out what to do and Gailes Tutorial doesn't seem to exist anymore.

LordShaper did you ever find the html_wrap dir? I've been looking for two days and can't find it.

Thanks

Tim

Are you using a php function?
http://us2.php.net/include/
if you are and that is not working try a @ sign in front of the include.

Dave

Try to include with a url, like www.someurl.tld/thefile.php.

My sandbox

The URL suggestion worked, so no need.

Thanks for both of your help.

Sorry but the answer is Nope; http://gallery.menalto.com/node/30992

Dave

I added my header and footer to the wrapper header and footer files.. However, My problem is in css now. I created a new files in the css dir named embedded_stlye.css just like the instructions say but still my css is not working.. here is what it looks like

<www.iowagamma.org/gallery>

how do i get css to work?

thanks

alex

I need some assistance.

www.bayoujeepersoffroad.com/gallery

I want to put the menu bar and header of the main bayoujeepersoffroad.com page in the gallery.

No matter what I do I get a black page when I add these statements:

<?php
include("inc/header.php");

include("inc/menu.php");
?>

I have tried the wrap.header and gallery.header both with no luck.

I pull the statements out and it wirtes the page correctly.

Please help!

Ok I did it and still writes a black page.

<?php
include("inc/header.php");

include("inc/menu.php");

global $GALLERY_EMBEDDED_INSIDE;
global $GALLERY_EMBEDDED_INSIDE_TYPE;

if(isset($GALLERY_EMBEDDED_INSIDE)) {
global $PHP_SELF;

I still have the wrap.header.default in the same directory as wrap.header. would that cause the problem?

Dave Thanks for the help. I'm not that familiar with PHP. My good friend is but he is out of town. I know enough to be dangerous with it.

ok I took care of what you asked.

include("inc/header.php");

include("inc/menu.php");

global $GALLERY_EMBEDDED_INSIDE;
global $GALLERY_EMBEDDED_INSIDE_TYPE;

if(isset($GALLERY_EMBEDDED_INSIDE)) {
global $PHP_SELF;

This is what I have now at the beginning.
Still writes a black page.

Ok I took care of that. now it wirtes the page but dosn't show the header of menu from my inc statement.

I just don't understand why this is so much a PIA. I really appreciate your assistance with this.

Different servers behave different so you will have to try an experiment. In your html_wrpa directory put this file and save as test.php:

 <?php
include("inc/header.php");
include("inc/menu.php"); 
@include("inc/header.php");
@include("inc/menu.php");
include("http:yoursite.com/inc/header.php");
include("http://yoursite.com/inc/menu.php"); 
?>

See if it functions or just dies take one line out at a time and try again, then add one back in at a time. Try combos of the code and see what works.

Thanks. It is posts like yours that make my day. It is my way to donate to Gallery as I have not donated any $$$ (but I have been told that support has more value)
jnash, G1 is still being devloped and Jens says he will continue. That said; G2 Rocks as well!

Dave

____________________________________________________
Blog with G2 || Gallery Frames / Mods || G1 Test Gallery