Suggestions on How to redesign the Navigation and [Login]

anonymous11234

Joined: 2002-12-05
Posts: 135
Posted: Wed, 2003-08-27 14:44

I see the site http://www.goshenwoods.com/gallery/ which is clean and ideal for what I am trying to do.

Can someone give me a tip on how to do the tabbed navigiation?

I'm pretty (well sort of) web design savvy and have created many galleries but not sure how to achieve that tabbed look where "photo properties, print photo, login" links show up on the left.

Any ideas...

I edited the title of this thread so others can also benefit from the information I posted here.
Jade

I edited this thread to make it sticky.
Bharat
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Wed, 2003-08-27 21:27

if you want this to be dynamic so you won't have to recode every header each time you add photos, then you will need to work out the different coding in the navagation files (navigator.inc and navphoto.inc) These are the files which produces the page numbers and the next and previous page arrows.

If you need more help on this I'll have time to look at it this weekend.

=)
Jade
 
anonymous11234

Joined: 2002-12-05
Posts: 135
Posted: Wed, 2003-08-27 23:57

Hello Jade,

I took a look at those files and if you could give me some pointers I would really appreciate it. That is exactly what I want to do.

Thank you again,
CHris
http://66.70.164.112
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Thu, 2003-08-28 02:54

What I'm about to explain will require some knowlege on how PHP works. If you do not know anything about PHP then read up. This type of modification is very detailed and I won't be doing it for you. Though I will answer questions if you do get stuck. You will also need to know basic CSS to incorporate your new design.

Gallery v1.4-RC1

I'll give you the "bones" on what to do with the structure. You will have to figure out the acutal design you want to plug in.

This is a process I will take step by step. Back up your current files.

How you are going to do this is basically rewrite the entire file to a new template type layout, I have worked through something simular, but have not wrote the tutorial for it yet. mmmm, I guess I will be now.

The navigator.inc and navphoto.inc files are the ones that create the navigation "arrows" and page count at the top and bottom of the Gallery application in the little "outlined box".

First we identify what each portion of the file does. Then you can chose to modify/ move/ or delete sections accordingly. (PHP knowlege required)

I have broken the code you will be working with into sections to explain what each does.

For the advanced coders can just replace the coding with your own or remove as needed. Be very careful on how you edit the table portions of the code, you could break your entire site. Make sure you find each starting and ending tag, before you delete them. If you break your site restore the latest backup. I usually have several stages of backup files so I do not have to start at the beginning if I made an error at the end of my modifications.

~~~~~~~~~~~

. /layout/navigator.inc file.

The first part is the first part of the code that creates the outline around the navigation table. See where it says height="1" & width="1", you can change it to height="0" & width="0" to collapse the table.

STEP 1) Any drastic change to navigation will require the Tables to be modified or removed so get familiar with the table code first and track all the beginning and ending tags. Then and only then will you be able to change the navigation of Gallery to suit your needs. 

<table width="<?php echo $navigator["fullWidth"] . $navigator["widthUnits"] ?>" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td colspan="11" bgcolor="<?php echo $borderIn ?>" height="1"><?php echo $pixelImage ?></td>
  </tr>
  <tr> 
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>

STEP 2) Identify the major sections which make up the navigation.

This next part is the first double arrows you see to the outer sides of the navigation. The First Page. If you want to move or delete this block of code you may, just make sure you have kept all the beginning php and ending php tags together. See where the code starts with <img src ? In betwwen there until the </a> is where your modifications take place. The last line of this block of code is the "outline" code. 

<?php      
#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="18">&</td> 
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="27" height="18"><span class="nav"> 
      <a href=<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1> <img src="<?php echo $imageDir ?>/<?php echo ($gallery->direction == "ltr") ? "nav_first.gif" : "nav_last.gif" ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"> </a>
      </span></td>
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

This is the next code which is for The Previous Page modify just as you did the above code for The First Page. 


<?php
#-- 'previous' button cell ---
$prevPage = $navigator["page"] - 1;
if ($prevPage >= 1) {
?>
    <td align="center" width="72" height="18"><span class="nav">
      <a href=<?php echo $url ?><?php echo $navigator['pageVar'] ?>=<?php echo $prevPage ?>><img src="<?php echo $imageDir ?>/<?php echo ($gallery->direction == "ltr") ? "nav_prev.gif" : "nav_next.gif" ?>" border="0" width="72" height="11" alt="<?php echo _("Previous Page") ?>" title="<?php echo _("Previous Page") ?>"></a>
      </span></td>
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="72" height="18">&</td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
}
?>

Step 3) Identifying PHP Strings and modify output.
This is the Center of the code where all the page numbers appear with the little dots between the numbers. The code line $number = "<b>$i</b>"; is the line that defines the current first page of your Gallery. The code line $number = "<a href=".$url.$navigator['pageVar']."=$i>$i</a>"; Is the current page you are on if there are multiple pages. This code line if (($i-1) == $navigator["page"]) tells the script to print the bolded arrow.

Pointers to modify. For example: If I were to put this into a different layout I would remove the "left_dot" "right_dot" instances and instead create a mini table to wich I could add a CSS style for a hover effect. As long as the php queries are in order and not modified the referrenced html scripting can be changed.

If you just said "Huh?" to this part you will need to learn more about PHP before attempting these types of mods to your site. 

    <td align="center" width="3000" height="18">   
<?php
#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = "<img src=\"$imageDir/nav_dot_left.gif\" width=\"8\" height=\"11\">";
		} else {
			$number = "<a href=".$url.$navigator['pageVar']."=$i>$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = "<img src=\"$imageDir/nav_dot_right.gif\" width=\"8\" height=\"11\">";
			} else {
				$leftdot = "<img src=\"$imageDir/nav_dot.gif\" width=\"8\" height=\"11\">";
			}
		}
	
		echo "&$leftdot&";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<img src=\"$imageDir/nav_dot_right.gif\" width=\"8\" height=\"11\">";
	} else {
		$rightdot = "<img src=\"$imageDir/nav_dot.gif\" width=\"8\" height=\"11\">";
	}
	echo "&$rightdot&";
}
?>

The is The Next Page script modify exactly as The Previous Page script. 

  

  </td>
<?php
#-- 'next' button cell ---
$nextPage = $navigator["page"] + 1;
if ($nextPage <= $navigator["maxPages"]) {
?>
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>
    <td align="center" width="72" height="18"><span class="nav">
      <a href=<?php echo $url ?><?php echo $navigator['pageVar'] ?>=<?php echo $nextPage ?>><img src="<?php echo $imageDir ?>/<?php echo ($gallery->direction == "ltr") ? "nav_next.gif" : "nav_prev.gif" ?>" border="0" width="72" height="11" alt="<?php echo _("Next Page") ?>" title="<?php echo _("Next Page") ?>"></a>
      </span></td>
<?php
} else {   
?>
    <td align="center" width="72" height="18">&</td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

This is The Last Page script, modify exactly as you did The First Page script.

<?php
#-- 'last' button ---
if ($navigator["page"] == $navigator["maxPages"]) {
?>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
    <td align="center" width="27" height="18">&</td>
<?php
} else {        
?>
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="1"><img src="<?php echo $imageDir ?>/pixel_trans.gif" width="1" height="1"></td>
    <td align="center" width="27" height="18"><span class="nav">
      <a href=<?php echo $url ?><?php echo $navigator['pageVar'] ?>=<?php echo $navigator['maxPages'] ?>><img src="<?php echo $imageDir ?>/<?php echo ($gallery->direction == "ltr") ? "nav_last.gif" : "nav_first.gif" ?>" border="0" width="27" height="11" alt="<?php echo _("Last Page") ?>" title="<?php echo _("Last Page") ?>"></a>
      </span></td>
<?php
} 
?>

This is the last portion of the Table. 

    <td align="right" bgcolor="<?php echo $borderIn ?>" width="1" height="1"><?php echo $pixelImage ?></td>
  </tr>
  <tr> 
    <td colspan="11" bgcolor="<?php echo $borderIn ?>"><?php echo $pixelImage ?></td>
  </tr>
</table>

That should give you an idea of what needs to be modified if not exacly how. I will emphasize again, this type of mod require some knowledge of PHP and CSS. If this is the first PHP script you have worked with, then prepare to be challenged. I will not be able to walk you through every tiny step of this type of process. But if you do get royally stuck, then I will answer to the best I can to get you pointed back in the right direction.

Good Luck!!

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Thu, 2003-08-28 03:09

If I get a chance tomorrow I'll post on how to move the navigation location in the other files. To be above the breadcrumbs as in your example site.

=)
Jade
 
anonymous11234

Joined: 2002-12-05
Posts: 135
Posted: Thu, 2003-08-28 11:35

I can't stress enough how thankful I am for your help! That is great information.

CHris
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2003-08-30 00:28

I'm prepping up the next steps.

Again this will break out the pages into code blocks and suggestions on where/what to edit.

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2003-08-30 00:46

Following my last post. You should have some knowledge of PHP and CSS before attempting these modifications.

Each section of code that I am splitting out can be moved. Just make sure you have the proper begining and end tags with your cut & paste. Always backup your files before attempting mods. If you break your site, just restore the last backup that worked.

./album.php

First we will identify the starting point for editing your navigation. 

<?php
includeHtmlWrap("gallery.header");
?>

This first part controls the search form properties.

<?php
if (!$gallery->session->offline && !strcmp($gallery->app->default["showSearchEngine"], "yes")) {
?>
<table width=100% border=0 cellspacing=0>
<tr><?php echo makeFormIntro("search.php"); ?>
<td valign="middle" align="right">
<span class="admin"> <?php echo _("Search") ?>: </span>
<input style="font-size=10px;" type="text" name="searchstring" value="" size="25">
</td>
</form>
</tr>
<tr><td height=2><img src=<?php echo $gallery->app->photoAlbumURL ?>/images/pixel_trans.gif></td></tr></table>
<?php
}
?>

This part is the Admin section, where all the links appear: [login] etc. I will specifically break this down in a following post as it will be detailed as to which part does what. 

<!-- admin section begin -->
<?php 
$adminText = "<span class=\"admin\">";
$toplevel_str= pluralize_n($numAlbums, ($numAccess != $numAlbums) ? _("top-level album") : _("album"), ($numAccess != $numAlbums) ? _("top-level albums") : _("albums"), _("No albums"));
$total_str= sprintf(_("%d total"), $numAccess); 
$image_str= pluralize_n($numPhotos, _("image"), _("images"), _("no image"));
$page_str= pluralize_n($maxPages, _("page"), _("pages"), _("no pages"));

if (($numAccess != $numAlbums) && $maxPages > 1) {
	$adminText .= sprintf(_("%s (%s), %s on %s"), $toplevel_str, $total_str, $image_str, $page_str);
}
else if ($numAccess != $numAlbums) {
	$adminText .= sprintf(_("%s (%s), %s"), $toplevel_str, $total_str, $image_str);
} else if ($maxPages > 1) {
	$adminText .= sprintf(_("%s, %s on %s"), $toplevel_str, $image_str, $page_str);
} else {
	$adminText .= sprintf(_("%s, %s"), $toplevel_str, $image_str);
}
$adminText .= "</span>";
$adminCommands = "<span class=\"admin\">";

if ($gallery->user->isLoggedIn() && !$gallery->session->offline) {
	$displayName = $gallery->user->getFullname();
	if (empty($displayName)) {
		$displayName = $gallery->user->getUsername();
	}
	$adminCommands .= sprintf(_("Welcome, %s"), $displayName) . "&amp;&amp;<br>";
}

if ($gallery->user->isAdmin()) {
	$doc = galleryDocs();
	if ($doc) {
		$adminCommands .= "[$doc]&amp;";
	}
}
if ($gallery->user->canCreateAlbums() && !$gallery->session->offline) { 
	$adminCommands .= "<a href=" . doCommand("new-album", array(), "view_album.php") . ">[". _("new album") ."]</a>&amp;";
}

if ($gallery->user->isAdmin()) {
	if ($gallery->userDB->canModifyUser() ||
	    $gallery->userDB->canCreateUser() ||
	    $gallery->userDB->canDeleteUser()) {
		$adminCommands .= popup_link("[" . _("manage users") ."]", 
			"manage_users.php");
	}
}

if ($gallery->user->isLoggedIn() && !$gallery->session->offline) {
	if ($gallery->userDB->canModifyUser()) {
		$adminCommands .= popup_link("[". _("preferences") ."]", 
			"user_preferences.php");
	}
	
	if (!$GALLERY_EMBEDDED_INSIDE) {
		$adminCommands .= "<a href=". doCommand("logout", array(), "albums.php"). ">[". _("logout") ."]</a>";
	}
} else {
	if (!$GALLERY_EMBEDDED_INSIDE) {
	        $adminCommands .= popup_link("[" . _("login") . "]", "login.php", 0);
	        // $adminCommands .= popup_link("[" . _("login") . "]", "login.php", 0, true, 250, 500);
	}
}

$adminCommands .= "</span>";
$adminbox["text"] = $adminText;
$adminbox["commands"] = $adminCommands;
$adminbox["bordercolor"] = $borderColor;
$adminbox["top"] = true;
include ($GALLERY_BASEDIR . "layout/adminbox.inc");
?>

This last bit of code is the part that contains the includes for the navigator file (previous post) and the ML file. Which is the multi language pulldown.

Move the /layout/navigator.inc code above the search block to achive the "menu tabs" if you did your modifications to the navigation files. Make sure you have beginning and ending php tags. You can leave the ml_pulldown where it is or move it to an altogether new location. 

<!-- top nav -->
<?php
include($GALLERY_BASEDIR . "layout/navigator.inc");
include($GALLERY_BASEDIR . "layout/ml_pulldown.inc");
?>

More to come. The next post will take a little bit to work out.

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2003-08-30 00:56

Maybe I should have said this sooner, but the key to customization is remembering that the php $strings need to stay on the same page they're initially on. And must be placed in order. If a $string tries to print (echo) before it is set, then you will have nothing show up. What I'm showing here is just for visual customization, not function customization.

more to come.

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2003-08-30 01:42

Ok now to break down the admin section. Moving links about and such.

We are actually going to design the space which the links will appear. This is found in the /layout/adminbox.inc

<table width="<?php echo $navigator["fullWidth"] . $navigator["widthUnits"] ?>" border="0" cellspacing="0" cellpadding="0">
<?php
if ($adminbox["top"]) {
?>
  <tr> 
    <td colspan="4" bgcolor="<?php echo $borderIn ?>"><?php echo $pixelImage ?></td>
  </tr>
<?php
}
?>
  <tr> 
    <td bgcolor="<?php echo $borderIn ?>" width="1" height="18"><?php echo $pixelImage ?></td>
    <td align="left" valign="middle" width="3000" height="18">&amp;<?php echo $adminbox["text"] ?></td>
    <td align="right" valign="middle" width="3000" height="18">&amp;<?php echo $adminbox["commands"] ?>&amp;</td>
<td bgcolor="<?php echo $borderIn ?>" width="1" height="18"><?php echo $pixelImage ?></td>
  </tr>
<?php
if (!$adminbox["top"]) {
?>
  <tr> 
    <td colspan="4" height="1" bgcolor="<?php echo $borderIn ?>"><?php echo $pixelImage ?></td>
  </tr>
<?php
}
?>
</table>

The two strings we need to identify are $adminbox["text"] which is the number of albums and photos you see to the left of the admin box when viewing your gallery, and the other one is $adminbox["commands"] which is the [login] and other such links.

Where ever you put these two stings is where they are going to appear. But keep in mind that the "definitions" of these strings must be called first on your page or else they will not show up. You will also notice another string which will also be needed in your script modification

So in essence out of all that code in the above post the only things you will need is something like this. 

<?php
if ($adminbox["top"]) {
?>
 
<?php
}
?>
<?php echo $adminbox["commands"] ?>
<?php
if (!$adminbox["top"]) {
?>
  
<?php
}
?>

Notice I left the multiple php beginning and end tags. You can place html & css around this line. <?php echo $adminbox["commands"] ?>

Now that we have figured out how to design the [login] links, up next is breaking down the admin section in the album.php file and learning how to place this block of code within your Gallery.

See Next Post.

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2003-08-30 01:52

Just another quick note on designing different layouts. You can split the adminbox.inc file into two name them accordingly.

One for the [login] and one for the text.

Then as long as the files are included at the end (or after) this block of code then it will work. Remember order is very important. Also I am only doing design elements if you wish to move coding to another page, that will require more information than I am putting here. After all there is only so much I can give you at one time.

OK, on to the next part.

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2003-08-30 02:10

If you read this portion you will see multiple if/else statments and multiple definitions of the $strings.

Now that you have designed the adminbox.inc for your [login] and text. we will go on to adding actual buttons instead of text. This is what I did in Gallery Skins. 

<!-- admin section begin -->
<?php 
$adminText = "<span class=\"admin\">";
$toplevel_str= pluralize_n($numAlbums, ($numAccess != $numAlbums) ? _("top-level album") : _("album"), ($numAccess != $numAlbums) ? _("top-level albums") : _("albums"), _("No albums"));
$total_str= sprintf(_("%d total"), $numAccess); 
$image_str= pluralize_n($numPhotos, _("image"), _("images"), _("no image"));
$page_str= pluralize_n($maxPages, _("page"), _("pages"), _("no pages"));

if (($numAccess != $numAlbums) && $maxPages > 1) {
	$adminText .= sprintf(_("%s (%s), %s on %s"), $toplevel_str, $total_str, $image_str, $page_str);
}
else if ($numAccess != $numAlbums) {
	$adminText .= sprintf(_("%s (%s), %s"), $toplevel_str, $total_str, $image_str);
} else if ($maxPages > 1) {
	$adminText .= sprintf(_("%s, %s on %s"), $toplevel_str, $image_str, $page_str);
} else {
	$adminText .= sprintf(_("%s, %s"), $toplevel_str, $image_str);
}
$adminText .= "</span>";
$adminCommands = "<span class=\"admin\">";

if ($gallery->user->isLoggedIn() && !$gallery->session->offline) {
	$displayName = $gallery->user->getFullname();
	if (empty($displayName)) {
		$displayName = $gallery->user->getUsername();
	}
	$adminCommands .= sprintf(_("Welcome, %s"), $displayName) . "&&<br>";
}

if ($gallery->user->isAdmin()) {
	$doc = galleryDocs();
	if ($doc) {
		$adminCommands .= "[$doc]&";
	}
}

In each of the if statments you will see the code such as

[". _("new album") ."]

This code portion is the actual text that you see as a link.

So the entire line will look something like this when adding an image.
array(), "view_album.php") . "><img align="absmiddle" src="images/login.jpg" border="0" alt="login"></a>&";

Look for each link and replace accordingly.


if ($gallery->user->canCreateAlbums() && !$gallery->session->offline) { 
	$adminCommands .= "<a href=" . doCommand("new-album", array(), "view_album.php") . ">[". _("new album") ."]</a>&";
}

if ($gallery->user->isAdmin()) {
	if ($gallery->userDB->canModifyUser() ||
	    $gallery->userDB->canCreateUser() ||
	    $gallery->userDB->canDeleteUser()) {
		$adminCommands .= popup_link("[" . _("manage users") ."]", 
			"manage_users.php");
	}
}

if ($gallery->user->isLoggedIn() && !$gallery->session->offline) {
	if ($gallery->userDB->canModifyUser()) {
		$adminCommands .= popup_link("[". _("preferences") ."]", 
			"user_preferences.php");
	}
	
	if (!$GALLERY_EMBEDDED_INSIDE) {
		$adminCommands .= "<a href=". doCommand("logout", array(), "albums.php"). ">[". _("logout") ."]</a>";
	}
} else {
	if (!$GALLERY_EMBEDDED_INSIDE) {
	        $adminCommands .= popup_link("[" . _("login") . "]", "login.php", 0);
	        // $adminCommands .= popup_link("[" . _("login") . "]", "login.php", 0, true, 250, 500);
	}
}

$adminCommands .= "</span>";
$adminbox["text"] = $adminText;
$adminbox["commands"] = $adminCommands;
$adminbox["bordercolor"] = $borderColor;
$adminbox["top"] = true;
include ($GALLERY_BASEDIR . "layout/adminbox.inc");
?>

Now just take a look at that last part. If you did split the code out to two seperate files you will need to call each file into the location you chose. As long at it is the last part of this file or posted in the page after this file ends you should be just fine.

Use the same format as this is posting the code to a lower part of the Gallery. 

<?php
include ($GALLERY_BASEDIR . "layout/adminbox.inc");
?>

Well that ought to get many of you up to mischief for a while.

The other files will also need to be modded to make a uniform design across your site. All are just a bit different than albums.php, but by using these technics you should be able to create the design you wish.

If you get stuck let me know & I'll help you out.

Cheers,
=)
Jade
 
yakker@aparity.com

Joined: 2003-08-14
Posts: 2
Posted: Fri, 2003-09-26 01:46

I've made a few changes to navigator.inc and navphoto.inc (4.1-pl1) to accomodate different ways of representing the First/Previous/Next/Last indicators. I had complaints from older folks about the arrows and the non-intuitive presentation (no offense, I love them myself), so I changed things. I saw a few references on the web and modified the design to accomodate their changes in a more standard fashion. Maybe this has been done before, maybe not, but I thought it would be cool as an option for a future release.

I've attached navigator.inc/navphoto.inc as text files.

One question -- does anyone know how I can automatically pick up the background_color from the standalone_style.css file? It would be very convenient ...

Thanks, all.

--Matt
 
beckett
beckett's picture

Joined: 2002-08-16
Posts: 3474
Posted: Fri, 2003-09-26 05:03

[background colour]

I'm working on moving settings such as this into a top-level album settings page... So plan for this in 1.4.1.

I'm interested in seeing your changes, but don't have time to look at your files right now. Can you post a URL where we can see the effects?

-Beckett (

)
 
yakker@aparity.com

Joined: 2003-08-14
Posts: 2
Posted: Mon, 2003-09-29 17:19

Sent the URL in E-mail (it's password protected). Thanks!

--Matt
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2004-01-17 00:02

To continue this next part of the tutorial....

How To change the First|Previous Page# Next|Last navigation to TEXT.

The two files we are going to modify are navigator.inc and navphoto.inc found in the /layout/ folder.

The first method is to use Text and CSS instead of the little << >> arrows.

If you open these files into your text editor you will see that each section is clearly marked as such. Use these identifiers for your modifications.

CODE from Navigator.inc

#-- 'first' button cell ---

This is the original Code for "First" button

#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="14">&</td> 
    <td width="0" height="14"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="27" height="14" class="borderright"><span class="nav"> 
      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1"><img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"></a>
      </span></td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>
<?php

Now lets take this apart step by step so you can understand the modifications we are about to make.

The first part is the "border" around the default gallery. You can ignore this part. 

 
#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="14">&</td> 
    <td width="0" height="14"><?php echo $pixelImage ?></td>
<?php
} else {
?>

Next part you can see the first tag where it says <span class="nav"> This is the CSS which will control the text that we put in. 

    <td align="center" width="27" height="14" class="borderright"><span class="nav">

The next part of the code controls the image and link. We are going to remove the line <img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"> and replace it with text. (I will show the completed code later. 

      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1"> <img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"> </a>
      </span></td>

The last part is the ending cell border, again ignore it. 

    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

So let's put this together. 

#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="14">&</td> 
    <td width="0" height="14"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="27" height="14" class="borderright"><span class="nav"> 
      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1">First Page</a>
      </span></td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

Use the same identifiers to modify the other sections. Previous, Next, Last.

Now onto changing the page#

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2004-01-17 00:28

Once you have your << >> arrow buttons changed you may also want to change the little dots and arrows in the page numbers. You will only need to change the navigator.inc file.

First we will identify the code and break down the changes needed. 

<td align="center" width="3000" height="14">   
<?php
#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_left.gif') . "\">";
		} else {
			$number = "<a href=\"".$url.$navigator['pageVar']."=$i\">$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
			} else {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
			}
		}
	
		echo "&$leftdot&";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
	} else {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
	}
	echo "&$rightdot&";
}
?>
    </td>
<?php

This first part dictates the width of the navigation, do not change this even if you think 3000 is to long. 

<td align="center" width="3000" height="14">   
<?php

The next part is the function script which tells gallery what to show on your page, how many files, what page you are on, etc. What we are looking for is the image tags. These can be changed to text.

Three things to be replaced are nav_dot_left.gif , nav_dot.gif , nav_dot_right.gif If you look through this portion of the code you will see several instances of these images, and all those will need to be replaced. 

#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = " <img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_left.gif') . "\"> ";
		} else {
			$number = "<a href=\"".$url.$navigator['pageVar']."=$i\">$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
			} else {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
			}
		}
	
		echo "&$leftdot&";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
	} else {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
	}
	echo "&$rightdot&";
}
?>
    </td>

So your code will look something like this. 

#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = " <strong><big>& gt;</big></strong>";
		} else {
			$number = "<a href=\"".$url.$navigator['pageVar']."=$i\">$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = " <strong><big>& lt;</big></strong> ";
			} else {
				$leftdot = " <strong><big>& middot;</big></strong> ";
			}
		}
	
		echo "&amp;$leftdot&amp;";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<strong><big>& lt;</big></strong> ";
	} else {
		$rightdot = "<strong><big>& middot;</big></strong> ";
	}
	echo "&amp;$rightdot&amp;";
}
?>
    </td>

DO NOT COPY AND PASTE ABOVE CODE ~ There are extra spaces so that the forum will show the proper code for middot; lt; and gt; tags. Remove the space after the & symbol.

You can see where I used the HTML code to show the MidDot and Left & Right arrows. Be careful of editing this file because you could end up with things in the wrong place but if you miss a " or a ; you could break your site. If that happens upload your original file and try again.

Now to add your CSS class.

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sat, 2004-01-17 00:47

Two things about the CSS, if you are using the default Gallery (no skin) then the CSS is found /css/embedded_styles.css.default. If you are using a Skin then the CSS is found /skins/yourskin/css/embedded_styles.css

Either way you have your Gallery set up the editing of the file is the same.

This is the default CSS setting

.nav    /* used in navigation bars */
	{
	  font-size: 12px;

You may want to change it to reflect different link styles. Then add this.

.nav  /* used in navigation bars*/ 
	{ 
	  font-family:verdana, arial, sans-serif;	
	  color:#75400C;
	  font-size: 14px; 
	  font-weight:bold;
	  
	}
.nav a,
.nav a:link,
.nav a:visited,
.nav a:active {
	  font-size: 10px;
	  font-weight: normal;
	  color:#75400C;
	  text-decoration: none;
	}
.nav a:hover {
      font-size: 10px;
	  font-weight: normal;
	  color: #202020;
	  text-decoration: underline;
	}

Now if you notice the first setting for font-size is much larger than the other two. This is an effect you can have for the current page you are on. The other two settings refer to the links and can be set individually as well.

OK that's it for tonight, I'll be back with another tutorial on how to replace the First/Previous Next/ Last with your own images and how to modify hieght and width to make it compatible with your site.

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sun, 2004-01-18 15:03

To continue this next part of the tutorial....

How To change the First|Previous Page# Next|Last navigation and replace the existing graphics with your own.

The images are found in the /gallery/images/ folder. Create your own images with the same names and upload to your site. It may look a little strange until you go through this tutorial and change the height and width atributes of the tables.

nav_first.gif
nav_last.gif
nav_next.gif
nav_prev.gif

Other images you may want to change
nav_dot.gif
nav_dot_right.gif
nav_dot_left.gif

The two files we are going to modify are navigator.inc and navphoto.inc found in the /layout/ folder.

The first thing we are going to change are the little << >> arrows.

If you open these files into your text editor you will see that each section is clearly marked as such. Use these identifiers for your modifications.

CODE from Navigator.inc

#-- 'first' button cell ---

This is the original Code for "First" button

#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="14">&</td> 
    <td width="0" height="14"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="27" height="14" class="borderright"><span class="nav"> 
      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1"><img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"></a>
      </span></td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>
<?php

Now lets take this apart step by step so you can understand the modifications we are about to make.

If you make images larger than the orgininal size you will need to change the height & width attributes on the tables.
You will need to adjust several instances of the width="27" height="14"

The first part is the "border" around the default gallery. 

 
#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="27" height="14">&</td> 
    <td width="0" height="14"><?php echo $pixelImage ?></td>
<?php
} else {
?>

The next part of the code controls the image and link.

Note: Within the image tag there is a height and width attribute set just for the image. Generally this will be a couple pixels smaller than the table width and height. This is the only change you need to make. When using images it is best to use the same names as given. nav_last.gif, nav_prev.gif, nav_next.gif, and nav_first.gif. 

      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1"> <img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="27" height="11" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"> </a>
      </span></td>

The last part is the ending cell border. 

    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

So let's put this together. 

#-- 'first' button cell ---
if ($navigator["page"] == 1) {
?>
    <td align="center" width="40" height="18">&</td> 
    <td width="0" height="18"><?php echo $pixelImage ?></td>
<?php
} else {
?>
    <td align="center" width="40" height="18" class="borderright"><span class="nav"> 
      <a href="<?php echo $url ?><?php echo $navigator['pageVar'] ?>=1"><img src="<?php echo ($gallery->direction == "ltr") ? getImagePath('nav_first.gif') : getImagePath('nav_last.gif') ?>" border="0" width="36" height="16" alt="<?php echo _("First Page") ?>" title="<?php echo _("First Page") ?>"> </a>
      </span></td>
    <td width="1" height="1"><?php echo $pixelImage ?></td>
<?php
} 
?>

Use the same identifiers to modify the other sections. Previous, Next, Last.

Now onto changing the page#

=)
Jade
 
JadeDragon
JadeDragon's picture

Joined: 2003-02-15
Posts: 332
Posted: Sun, 2004-01-18 15:04

Once you have your << >> arrow buttons changed you may also want to change the little dots and arrows in the page numbers. You will only need to change the navigator.inc file.

note There are three images to change nav_dot_left.gif(>), nav_dot_right.gif(<), and nav_dot.gif(o)

First we will identify the code and break down the changes needed. 

<td align="center" width="3000" height="14">   
<?php
#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_left.gif') . "\">";
		} else {
			$number = "<a href=\"".$url.$navigator['pageVar']."=$i\">$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
			} else {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
			}
		}
	
		echo "&$leftdot&";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
	} else {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
	}
	echo "&$rightdot&";
}
?>
    </td>
<?php

This first part dictates the width of the navigation even if 3000 seems to much leave it alone, then change the height to the same hieght as you did for editing the prev/next/ tables.

<td align="center" width="3000" height="14">   
<?php

The next part is the function script which tells gallery what to show on your page, how many files, what page you are on, etc. What we are looking for is the image tags.

Three things to be replaced are nav_dot_left.gif , nav_dot.gif , nav_dot_right.gif If you look through this portion of the code you will see several instances of these images. Once you have uploaded your new graphics these should automatically show on your Gallery with no modificaions. 

#-- 'page numbers' cell ---                  
if ($begin != $end) {
	$current = $navigator["page"];
	echo "<span class=\"nav\">";
	for ($i = $begin; $i <= $end; $i++) {
		if ($i == $current) {
			$number = "<b>$i</b>";
			$leftdot = " <img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_left.gif') . "\"> ";
		} else {
			$number = "<a href=\"".$url.$navigator['pageVar']."=$i\">$i</a>";
			if (($i-1) == $navigator["page"]) {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
			} else {
				$leftdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
			}
		}
	
		echo "&$leftdot&";
		echo "$number";
	}
	echo "</span>";
	if ($end == $current) {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot_right.gif') . "\">";
	} else {
		$rightdot = "<img valign=\"absmiddle\" src=\"" . getImagePath('nav_dot.gif') . "\">";
	}
	echo "&$rightdot&";
}
?>
    </td>

note If after everything is done and it does not allign correctly, you may need to review you width and height attributes or make your images a bit smaller.

=)
Jade

Next is replacing the "home" arrow, but I don't have time to do the tutorial for it right now. Will post it in a couple days.
 
stender

Joined: 2008-01-04
Posts: 22
Posted: Sun, 2008-01-13 20:22

This is scary! I have no idea what this means so how am I to put my website menu into my albums???
All I want to do is have a home,contact,gallery text button on the left side of my albums to mimic what my homepage looks like. If it was straight forward html I would be ok.

http://www.banksyunmasked.co.uk
 
stender

Joined: 2008-01-04
Posts: 22
Posted: Sun, 2008-01-13 20:24

I have the same problem with my site http://www.chelseaacademy.co.uk which I want to replace the gallery with gallery2 but unless I can integrate the menus I cant use it.

http://www.banksyunmasked.co.uk