Micro-Thumb Photo Navigation!

Microthumb Nav Version: 0.3.7
Gallery Version: 1.5 Final
Status: Working Great!
Current Zip: http://fryfrog.com/gallery-mods/nav-micro-thumb.zip
Current Diff: http://fryfrog.com/gallery-mods/nav-micro-thumb.diff

Latest News: Thanks to Joe7pum for two ideas for easy fixes that make things a little better. The mini-thumb album tree will ONLY display images. So sub-albums with no highlight will NOT show at all. This would mainly be brand new sub-albums, but could be a sub album broken after a migration or something and the highlight thumb just doesn't get built. Looks better than the text "No Highlight" in your album tree. The other fix is to NOT display the "sub-album" text when there are no sub-albums just like the other tree AND it should now obey language.

Demo: Here is the Latest version I am working on. You can log in with the username "demo" and password "demo" to this album and play around with the settings. Just in case something is broken, you can see a simple example at my Personal website.

Warning: *Update: really, its finished*
I would suggest that you only test this out on a clean copy of Gallery 1.5 that is not attached to your real /albums/ directory. While I am developing it, I have installed a clean copy of 1.5. I install gallery to /gallery-clean/ and I copy my current /albums/ directory to /albums-test/. I usually then delete a ton of the albums via gallery's web interface because I don't want to have to sit through the upgrade on 10,000 images.

This will also keep me from being responsible for deleting all your images and killing your first born child. Thanks.

Features:

• Optional replacement of the sub-album tree on the main page, using micro thumbs instead of the album tree. Displayed in the comments area instead of the right side of the screen.
• Includes two styles of micro thumb navigation. One where as you navigate through images, the entire bar re-orients itself with the current image in the middle. The other keeps the same group of thumbs until it is required that they change to show more thumbs (ie, clicking first/last thumb in group).
• Provides an option to gallery's original individual photo navigation system that features very small thumbnails of the images around the currently viewed image.
• Options to turn on/off micro thumb nav, display the first/last micro thumb, control the number previous & next micro thumbs, position of the micro thumb bar, size of the micro thumbs and the size bonus given to the current thumb.
• Integrated into G1.5, including the Config Wizard, Album Properties and Album Upgrader.

Settings:

• Replace album tree with micro thumbs [yes, no] - Replaces the album tree with a micro thumb version. This option is found in step 1 on the "Main Gallery Page" options tab.
• Use Micro-thumb photo navigation [yes, no, both] - Specifies the use of the original navigation system, micro-thumb system or even both!
• Micro thumb style [Fixed, Dynamic] - Fixed style keeps the micro thumbs in the same position until required to show more. Dynamic changes the micro thumbs at each image change.
• Show Micro Thumb for First/Last [yes, no] - Turns on and off the display of the first/last micro thumb.
• Number of Previous Micro Thumbs [1-10] - Sets how many previous micro thumbs are displayed. Note: In Fixed style, Prev and Next are added to determine the number of thumbs shown
• Number of Next Micro Thumbs [1-10] - Sets how many previous micro thumbs are displayed. Note: In Fixed style, Prev and Next are added to determine the number of thumbs shown
• Position of micro-thumb navigation bar [Top, Both, Bottom] - Since the
  micro-thumbs are quite a bit larger than the original photo nav bar, I added the option to display it only at the top and bottom (or both) if the user wishes.
• Height of micro-thumbs in navigation bar [text field] - This is how many pixels tall the micro-thumbs are. I think 45 looks nice, but maybe you don't like that.
• Bonus to height of current micro-thumb (pixels) [text field] - If you have the current image thumb on, things look much better if it is slightly larger. This way you can pick how many more pixels it is. 0 and negative values are perfectly valid. 0 will result in the current image micro thumb being no bigger and negative numbers will result in a smaller current image micro thumb.

Installation:
There are two main ways you can install this addon/modification. You can apply the patch file to a clean (or maybe unclean) version of 1.5. The other option is to download the modified files and over-write the current ones. The first method works best for people who already have gallery 1.5 installed AND have modified the files that I modified. The second option is best for pretty much anyone else, especially if you didn't really understand the first one. I will call the former "Diff" and the latter "Zip".

Zip: (ignore if you use Diff)
1) Download the zip from my website. This will always be the "latest" version.
2) Extract to website. If you use FTP, extract locally and upload being sure to include the directory structure. It should ask you to overwrite files, go ahead. If you use SSH, you probably already know how to do this. Just unzip into your gallery directory and you should be fine.

Diff: (ignore if you use Zip)
1) Download the diff from my website, putting it inside your /gallery directory is probably the best place for it. This will always be the "latest" version.
2) Test the application of the patch using the command "patch -p1 --dry-run < nav-micro-thumb.diff" and look at the output.
3) If the patch won't apply and asks for a file name, try changing the "-p1" to "-p0" or "-p2" (you can try higher if you want, but only 0 is really likely to help)
4) If you see it saying something about making .rej files or can't apply chunks, this means the whole patch won't apply... only parts. You can do the rest by hand OR just use the zip version.
5) If all of this went well, repeat the command that worked best for you but remove the "--dry-run". You are ready to move on now.

Both:
1) !!!Most Important Step!!! Open your Version.php file and find the two options inside near the top. The following is from a 1.4.4-pl6 gallery, so your values may be a few off from mine. That is okay. All you have to do is add 1 to each of these two. For example; config_version's 82 becomes 83 and album_version's 31 becomes 32. What this does is two fold. The "config_version" forces you to run the config wizard, where you will have to pick new defaults for the Micro Thumb Navigation. The "album_version" forces the album upgrader to run and put the new values in all your albums.

$gallery->config_version = 82;
$gallery->album_version = 31;

This is what happens if you do NOT do this: If you don't bump either version, you will see errors in quite a few places. If you bump the config_version but NOT the album_version, you will still see the errors. If you bump the album_version and NOT the config_version, any time someone visits an album you will get MY defaults instead of yours. So change these values! Do the config wizard, set your defaults and then be happy!
2) Be forced to visit the config wizard, paying attention for Step 3, "Micro Thumb Photo Navigation" tab where the settings are.
3) Either upgrade all the albums at once or start visiting albums and be forced to update them.

Issues:

• If nav is set to Top only, the bottom nav bar is missing its top border and looks quite ugly/funny.

To Do:

• Move First / Last to the far corners*DONE*
• Static thumb bar that only changes when last prev/next in nav bar is clicked.*DONE*
• Instead of X total images, have option box for X prev and Y next micro thumbs.*DONE*
• Option to turn on/off display of last / first micro-thumb.*DONE*
• Remove .jpg hard coding *DONE*
• 2x Next/Previous *DONE*
• Thin frames around micro-thumbs, thicker one around current micro thumb. *DONE*
• Insert new values when album.dat file upgrade is run *DONE*
• New albums inherit default configuration from config.php *DONE*
• Recursive settings application *DONE*
• Allow default configuration to be set in wizard / config.php *DONE*
• Add Next, Previous, Last and First text *DONE**REMOVED*
• Clean up if statements *DONE*
• Current thumb in middle *DONE*
• Variable for micro-thumb size *DONE*
• Variable to turn micro-thumbs on/off *DONE*
• Variable for location of nav bar *DONE*
• Variable to turn on/off current image thumb *DONE**REMOVED*
• Variable to change current image size bonus *DONE*
• Allow configuration through album properties *DONE*

Suggestions:

• Verticle thumb bar with option for left/right side.
• Every thumb in the album in a horizontal scroll box at the top.
• Turn on/off text of links by the current icon / text / text + icon setting
• Put Prev/Cur/Next images between corners related to how far along album you are

[/]

[/]

[/]

[/]

[/]

fryfrog,
I have thought about doing this for some time and I am glad that you have taken the lead. It looks very good and I like it.
I have visited on a few occations and it seems to be a work in progress (some times I get a error message) however from what I see (only once) I like!

Variable to turn micro-thumbs on/off I think this would be good on a per album basis
As a pointer for this just add a new album peramiter to edit_appearance.php
$gallery->album->fields["nav_thumbs"] = $nav_thumbs; then further down add something like:

<?php
		if (empty($gallery->album->fields["nav_thumbs"])) {
			$gallery->album->fields["nav_thumbs"] = "no";
		}
?>
<tr> 
	<td><?php echo _("Show or Hide small thumbs in navigation") ?></td> 
	<td><select name="nav_thumbs"><?php echo selectOptions($gallery->album, "nav_thumbs", array("no" => _("Show"), "yes" => _("Hide"))) ?></select></td>
</tr>

I might have missed a bracket but you get the idea.

Then in the place you want to add your thumbs do something like

if strcmp($gallery->album->fields["nav_thumbs"],"yes") { 
bla;
bla;
}

Copies of the modded files would be helpfull as well as some people don't "do" diffs.

Dave

I re-did it all for 1.5 RC2, see original post.

I added 2 more variables to the entire setup, one for a "style" and one for turning on/off the "extra micro thumbs" option.

I really really really need help with 2 things now. First, I really suck at html, css and tables. I know HOW I want the three styles to look but I don't know how to do it. Second, I still need to re-do the whole retrieval of thumbnail URL because hardcoding sucks!

Here is how I want each of the 3 styles to look (of course the [Previous +2] and [Next +2] would not be displayed if it was off). You may have to use your imagination a little, but the <space> represents the majority of the empty space that exists (no matter how much there is). I could really use some help with this part

Classic:

[First] [Previous +2] [Previous] <space> [Current] <space> [Next] [Next +2] [Last]

Compressed:

<space> [First] [Previous +2] [Previous] [Current] [Next] [Next +2] [Last] <space>

Mixed:

[First] <space> [Previous +2] [Previous] [Current] [Next] [Next +2] <space> [Last]

I have redone my first and second post with lots of good information. And a poll. And I attached the latest files in case someone doesn't want to get them from my server (or my server is down, like that could ever happen!).

I added your suggestion to my list of suggestions, but I did not have any plans to do anything like that. There are a few reasons why that would probably not work very well, the main one though is the following:

The main reason is that those "micro" thumbs are actually the normal thumbs found in your gallery, but forced to a specific height in the <img> tag. This means that even though the image is only 45x60 pixels (for example) you are still downloading the full thumb which (in my case) is 220px and ~5k. So you can see that all the images in an album could be disasterous for a user... especially if there are 100's or 1,000's of images in one folder.

To do this, I think I would need to create a new system in gallery that actually MADE .micro.jpg files for every image in the gallery. This isn't an unreasonable idea, because they could be used in plenty of other places to spruce up gallery.

I'll keep your suggestion in mind, in the mean time crank it up to 11 thumbs and enjoy that.

I like the idea, but it would probably take me a long time to create. I think once I get the code re-factored to be intelligent (instead of hard coded) I will probably only fix bugs. If I can get up the courage, I will probably start working on something like this for G2, where all these options would be much easier to implement due to its moduling system. I think you are right about using the # of images per album page, that would definatly restrict it to enough images while not overloading the users bandwidth.

I removed the hard coded paths to thumbnails. This was my last major hurdle. Now I guess I need to clean up some of the display code and possibly work on some of the suggestions of other people.

I added sub album micro thumbs to the albums.php (main) page. If you have albumtree set to 0, neither will show of course. If you set it to 1 and have micro thumbs on it will show the micro sub album thumbs instead. If you have micro thumbs off and albumtree set to 1, it will show the normal album tree.

I also added a screenshot of it to the second post (with all the screen shots).

I patched my modified 1.5-RC2 gallery with your mod v0.2.9: http://www.pbworks.net/gallery/

It works great, but not for albums with only 2 pictures. I discovered a bug.

Click on a picture of this album: http://www.pbworks.net/gallery/lugano

and see the following error:

I really like the migrothumbs. Thanks for your work!

Testing your mod another idea came to my mind. What about a "blog-style version" of your microthumbs navigation? I mean a vertical list on the right.
In this case a cool thing would be (here I describe a scenary) to see let's say 12 thumbs, but you don't get the one that you are watching centered. The list of thumbs stay fixed, so it's easier to have the orientation. The visitor clicks from the top microthumb to the bottom, to watch each picture. When he arrives at the bottom, he can click an arrow pointing down (the famous "see next pictures..." link i was suggesting you) and see the next 12 thumbs.

This would be useful as I noticed that usually, to go next, the user has to click also if he isn't interested in a picture, just to see the next thumbs. With such an arrow, he would click to get more choices, to see what's next.

In the navigation, I also noticed that the standard Gallery > Album > Subalbums links are quite useless and rarely used.

Especially the link to the album root shoould be highlighted, so that people would click it in order to see all ther thumbs at one glance.

I guess this can be done by changing the template files. But I posted it here as the microthumbs rich and useful navigation is making that link almost useless. Just my thoughts...

Okay, I have made a really really big update.

I've added a few new options and altered the way things work. I moved my code into a "navmicro.inc" so that the nav bars would be easier to draw.

Changes:

• Instead of picking a total number of micro thumbs, you now set the number of previous and next micro thumbs independantly. This means if you think your users would rather have 4 next thumbs and 1 back, you can.
• Displaying the first/last image is now something you can turn on/off
• You can display the old nav bar at the same time if you wish
• You can display micro thumbs for the album tree on the main page instead of the traditional album tree.

This included a pretty major code re-write... and things are now much much simpler.

I also updated the screen shots, they should show up in an hour or less (after my mirror rsyncs again).[/]

Sure, I can easily add 1-11 instead of 1-4. For goofing around, you may just be able to change the value in config.php (but not select it in the wizard or edit_appearance).

I just make changes so that I can bump my own thread

I went and re-organized the albums in my clean album to give a much better demonstration of the different features. There is even an area you can log in to with user of "demo" and a password of "demo". You can find it here.

I see exactly what you mean. Instead of the micro thumbs changing each time you move along, they stay the same. It could remain this way until you click on the last "next" or "previous" thumbnail, at which point a new bar would be drawn. This would save a lot of load time until you have to draw the bar again.

I can't think of how I would do this with the current bar, code wise I mean. If you have any ideas, specific or general about how to achieve it (code wise, again), I might be able to do something like that.

The number of options just keep growing and growing and growing

unluckily actually i have barely time to be a beta tester. i really can't stick in the code... (but i'd like to). as u r the developer of ur modification i think u should know better than me how to code the array containing the list of all thumbnails.

what about making an array containing subarrays, where every subarray contains the number of microthuimbs specifies in the options?

so each time a user clicks "next" he will get the new bar, with the next array.

im not sure what else could be done... or how to do it in PHP... just my thoughts....

i suggested to make a new option in order to keep it flexible. i know it will become really exaggerated flexible, but something important as navigation of a website, OMO should be as flesible as possible and be adapted to each website's needs.

what happens if you replace the old system with the new one is that you'll make ME happy, but maybe *some* other users of the micro thumbs modification will not like it...

anyway, if you want my opinion, so here i am:

if you do the way i suggested (have a static bar instead of the actual dynamic one), you should also remove the option to show the first and last thumbnail, because, instead, there should be at the left an arrow to see the PREVIOUS "page of microthumbs" and at the right: an arrow to see the NEXT page of microthumbs.

Then, instead of having the "Number of previous / next micro thumbs" you should have the old option "microthumbs to show": 5, 7, 11.. or better: a list from 3 to 12 more than 12 i think it's too much, depends on the resolution ppl are browsing, but for a default 1024x768, browsing full screen size, 12 is the limit).

The correct behaviour when a user clicks next is to load the first picture of the next serie of microthumbs.

I would rather do a new option, so that people can decide which sort of navigation to use: a static bar (like the one I suggested in the last posts), or a dynamic one (like the actual one).

I've done another pretty major revision. With much help from beckett, I implemented Firepol's idea. I only added 1 more option, which lets you select the style of "Fixed" (new one) and "Dynamic" (old way). It determines the number of photos in the block by adding up prev and next.

The way it looks is really starting to grow on me. Here is how it behaves. Imagine you choose to show 3+3 images (6) and are looking at the first image. This is what it looks like "[ 1 ] 2 3 4 5 6" but then you click on 4. Now you see "1 2 3 [ 4 ] 5 6". The bar doesn't change. Now you click on 6 (the last one in the bar) and it finally changes... now you see "5 [ 6 ] 7 8 9 10". You might ask why it doesn't just start at 6 instead of 5... and that is because if you click on 5 now it will take you BACK to the original group of 6 images. If you didn't have that 5 there, it would be hard to go backwards

For now, this album uses the new method and this one uses the old method. Its in the demo section, so someone might change it.

I like both of them, but think I am leaning tward the new style. It seems more stable while you are flipping through images.

The other HUGE update is that now there are some css options. This will let you change the color of the border around the current, first/last and the in between images.

fryfrog: as always: well done!

here my feedback, do you remember our discussion about "intuitive" about the fixed style? I think that the first time user could not understand, the first time he visits the gallery, that the last picture on the right is also a link to activate the next series of microthumbs.

That's why i was insisting with the arrows... anyway, another idea came to my mind... a design idea could be to put a semitransparent arrow, as layer, on the last picture of the series. If the user mouseover on it, the arrow would become more "colored" so that the user will understand that that picture is a link to the "next" page of microthumbs. Same for the "prev". This semitransparent arrow should appear only if there are next pics, if it's the really last one, no layer should appear.

Maybe you don't like to use layers, but it's the only way I know to do this. Else a simple arrow image could be added next to the last picture of the series.

With the dynamic version, this problem doesn't occur.

If you don't like that the album properties page has too many options you could include the "Micro thumb style" option inside "Use micro thumb photo navigation", as follows:

Use micro thumb photo navigation:

no
dynamic
fixed
dynamic+classic
fixed+classic

But I personally prefer the actual way... it's easier to understand.

Thanks again for your nice work... and for listening my ideas ;)[/]

I think once we have tabs like the wizard, it shouldn't be a problem. I WOULD like this to be integrated into 1.5.1 (or later) because it would mean less work for me to keep it current and I really do think a lot of people would use it.

I had thought about overlaying a transparent gif or something on the first/last image in a block... but I decided not to. I think you right that its not obvious, in the least how it operates... but I also don't think it has to be. If a user is using it to go through the thumbs, eventually they will click on the last thumb. When they do, it'll cause the thumbs to "change pages" and then I think most will make the intuitive leap.

Of course I am still open to ideas. I would like to reduce the number of options, but I don't quite see how. Your idea above would work, but it'd be quite ugly

If the style was set to "Fixed" and only 1 next and 1 previous were picked, a division by zero error would occur. I put in a check that automatically makes 1+1 = 3. A 3 image "Fixed" style behaves exactly like a 1/1 "Dynamic" style, so maybe I should make 1+1 and 1+2 = 4

Bumped version and updated stuff.

before updating to 1.5 and then apply the mod 0.35 im asking you what happens if i try to update a "non-clean" gallery version.

i want to apply from an already patched 1.5 RC2 version.

should i just apply patch + upgrade albums and it will work smoothly?

thx for letting me know

Do you have a list of the new css-classes?

IGNORE THIS. I found it in "base.css.default"

Okay, 0.3.6 adds the alt-text (i could probably remove the <span> then?) and keeps IE from making the page look really ugly when there are lots of sub albums. You can see what i mean if you visit http://fryfrog.com/gallery

Ah, if you haven't made any custom mods to your RC2 install... you should be just fine extracting gallery 1.5 final over it, then extracting my zip file over it. Then you should bump the Version.php stuff and you'll be fine.

I don't know what the last version of my patch you used, i have added a couple options one or two minor versions ago.

I would let the album upgrader run

I removed the poll, there is some issue with un-logged in users and voting. I also added the suggestion of mini-thumbs for vote results.