How I integrated the slider theme into my website underwa.ter.net

I've been asked many times how I made my site look the way it does. Gallery blends in well into my site http://underwa.ter.net, even though im using a theme that doesn't lend itself to this kind of integration at all. But it was the theme that I liked, so I went about to modify it to my needs. I think that if you truly want to make gallery an integral part of your website design, some form of modification is almost always necessary. Here are some of my thoughts on how I went about to do this integration.

First of all, before you start any work, you should make a plan of your website design. What layout do you want to use? How do you navigate through your site? What colors would you like to use? I wanted a very simple design, devoid of clutter, as to not distract from the images. I chose to use a top navigation bar that divided my site into a few main sections; Portfolios, Travel reports and news, and About. Do this before you even think about how to integrate gallery. I believe you should adapt gallery to your design, not the other way around.

I built my site using Dreamweaver, except for the PHP parts and the galleries ofcourse. Dreamweaver worked very well for me in developing the design, especially because it handles CSS extremely well. Dreamweaver allows me to create templates for certain parts like the navigation bar, so if I change something it gets changed throughout the site (except for gallery, as I will explain in a bit). Personally I would try to use some form of software that can do this, as it makes maintenance so much easier.

Now that I had my design, I went about looking at gallery. I liked the slider theme, so I wanted to use it as a bases for my image displays. When you use gallery out-of-the-box, it becomes a standalone webpage with its own look and feel. You can pick a theme and colorpack, but it still looks the way it does. This is often not how your website looks so I started to read the forums on how to modify gallery as to blend in better with my own site.

Gallery has quite a bit of information about embedding and integrating. Here are some links I used:

• http://gallery.menalto.com/forum/g2_integration
• http://codex.gallery2.org/index.php/Gallery2:How_to_visually_embed_G2_in_your_own_website_using_embedded_mode
• http://codex.gallery2.org/index.php/Gallery2:How_to_visually_embed_Gallery_in_your_own_website_by_editing_theme_templates
• http://codex.gallery2.org/index.php/Gallery2:Embedding

Since I wasn't using an existing CMS, I figured I could use the 'editing theme templates' method of integrating gallery. Basically you change the templates that the theme provides to fit your own design. That's what makes gallery such a wonderful tool, it allows you to seperate functionality from design.

Gallery has a great method to change the templates. Just go to the 'slider' theme directory, and create a directory 'local' in whatever directory the file you want to change exists in. I started by editing theme.tpl so I created a directory 'local' inside the 'templates' directory and copied 'theme.tpl' to that directory. Now I started to edit this template to have a navigation bar. This meant adding some HTML near the top of the templates. You can find the resulting file here. Look for comments marked by the string "COR".

Unfortunately, this didnt show me a navbar! Whats going on. Maybe I needed to reload the templates. This is something you always have to do when editing templates. Go the the Site Admin link, go to Maintenance, and find the template cache deletion link. Use it often. It didnt fix my problem though. I looked at the source, and saw that the navbar was actually there. So why didnt I see it? I looked a bit closer at the slider theme and noticed it uses absolute positioning. Basically it put the image on top of my navbar making it invisible. Ok, thats not good.

Im not going to explain CSS or HTML. Buy a book I figured I had to change the css to fix this absolute positioning problem. So, I made a directory 'local' in the same directory as theme.css and copied theme.css there. Right at the top of the css file you see the problem. It positions the image area in the top left corner of the screen. Argh. Ok, what if I change it so the top is not at 0 but at 50 px? Ok, that did something. The image area was moved 50 pixels down and I saw my navbar at the top.

Before I continue, I need to explain my navbar, because some people might not understand it. If you do what I did sofar, the navbar will look ugly. It's not a horizontal navbar at all, but an ugly list. Im not going to fully explain how to go from a vertical list to a horizontal navbar. Use google. It is styled using CSS, and I copied the style information from my site CSS file to the theme CSS file. You can see the resulting theme.css here. With that CSS file you see my navbar on top, but the rest of the gallery stuff still looks like plain old slider theme.

Next I figured id have to change the colors of the slider theme to match my own colors. This again means changing CSS information. I need to change all 'background-color' elements to my own background color. Here's the resulting theme.css. Look for color #282828. This is starting to look good.

Things arent quite finished though. First of all I wanted to do some more minor visual changes, but more importantly, there are some layout bugs. In IE (what else is new) the current CSS is not working correctly as the image is now being overlapped by the thumbnail bar, no doubt caused by lowering the image display area 50 pixels. Im also seeing some ugly jumping of the navbar when switching from my own pages to the gallery theme pages. In my own pages I needed to do some CSS tricks to avoid that from happening. It's basically working around CSS implementation differences. I need to add these workarounds to the theme.css file.

To fix the overlapping layout in IE, it wasnt enough to change the CSS. The slider theme extensively uses Javascript, and it's in this JS that we have to fix another problem. It computes the size of the image area, and because we lowered the image area 50px, this computation is now wrong. The changed slider.js can be seen here. The changes are around line 186. I also made another minor change to add a permanent scrollbar on the right. This fixes the jumping navbar problem. There may be better fixes for this, but this is what I did.

Argh, this didnt work. The changed javascript wasnt being executed. I quickly noticed that I also need to change header.tpl in the templates directory. Copy it to the local dir and make it load slider.js from the local dir. Here's my header.tpl. I also had to make another small change in theme.tpl, as it has a line to hide the scrollbar, and I wanted to force the scrollbar to avoid jumping of the screen. You can decide for yourself if you want or need this. I commented out the line:

We're still not done. I wanted some more visual changes.. I'll go through them one by one

• First I wanted a border around the images. This is done through CSS. Add the following somewhere in the top of the theme.css file.
  
  Quote:
  

  div#image img {
  border: 3px solid #ffffff;
  }

• I wanted the name of the gallery on the left of the navbar. This means a change in the theme.tpl, where I added the navbar. I added the following lines. It also adds a dropdown box if you're the administrator. Don't forget to empty the template cache
  
  Quote:
  

  <div id="portfolioname">
  {if !empty($theme.item.title)}
  {$theme.item.title|markup}
  {if $user.isRegisteredUser}
  {g->block type="core.ItemLinks"}
  {/if}
  {/if}
  </div>

• I changed some font properties in the CSS file. This isn't that important.
• I didnt like that normal readers would get the little wrench icon to show the maintenance menu. So I changed slider.tpl to only make it visible to the administrator. See slider.tpl

That concludes all the changes. I also changed some minor things in the theme configuration inside gallery. Specifically, I limited the max size each image could be viewed at by non-administrators. Experiment with it.

All the files that I changed can be viewed here. Changes are usually commented, but you may want to do a diff between the original and my version. I may have also forgotten some changes, as Im doing a long time after the actual work. If you have any questions, feel free to send me a message. Remember though, this doc is not meant to fix your own site. It is merely a diary of how I changed my site. It is almost certain that to do this to your own site you'll have to deviate from what im saying here. And I may also not have chosen the right way to do things, I dont know. But it works for me, so im happy.

Besides changing the theme I also did some other forms of embedding. You can call gallery functions from within any PHP file which allows you to do interesting tricks outside of gallery itself. My site contains several such additions..

• The homepage has two randomized images. I did that by making two special albums inside gallery, one for me, one for my wife. We can each drop images in that gallery and have them automatically be used for this random image. The code for it. Include() it in your regular php file, and change whatever you have to change to make it work for you.
  
  Quote:
  

  <?php
  require_once(dirname(__FILE__) . "/../gallery2/embed.php");
  $ret = GalleryEmbed::init(array(
  'embedUri' => '/gallery2',
  'g2Uri' => '/gallery2/',
  'fullInit' => true));
  list ($ret, $imageBlockCor) =
  GalleryEmbed::getImageBlock(array('blocks' => 'randomImage', 'show' => 'none', '
  itemId' => '120' ));
  list ($ret, $imageBlockJulie) =
  GalleryEmbed::getImageBlock(array('blocks' => 'randomImage', 'show' => 'none', '
  itemId' => '121' ));
  $url = $_SERVER['REQUEST_URI'];
  if(preg_match('/(<img.*\\>)/', $imageBlockCor, $matches)) {
  $cor = $matches[1];
  }
  if(preg_match('/(<img.*\\>)/', $imageBlockJulie, $matches)) {
  $julie = $matches[1];
  }
  echo "<td><a href=\"/gallery2/main.php?g2_view=core.ShowItem&amp;g2_itemId=147\">$cor</a></td>\n";
  echo "<td><a href=\"/gallery2/main.php?g2_view=core.ShowItem&amp;g2_itemId=148\">$julie</a></td>\n";
  GalleryEmbed::done();
  ?>

• The travel page has a list of thumbnails on the right. These are auto-generated! If I add a travel album, it automatically gets displayed there. I do some extra tricks to allow me to only make it visible when im ready. All the albums here are children of 1 specific album, which allows me to traverse that album to fetch all these travel galleries.
  
  Quote:
  

  <?php
  require_once(dirname(__FILE__) . "/../gallery2/embed.php");
  /* connect to embed library */
  $ret = GalleryEmbed::init(array(
  'embedUri' => '/gallery2/index.php',
  'embedPath' => '/gallery2',
  'relativeG2Path' => '',
  'fullInit' => true));

  /* fetch all albums by item id */
  list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(69);
  /* fetch all thumbnails for these albums */
  if(!$error) {
  /* fetch album info for all albums */
  list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
  if(!$error) {
  $urlGenerator =& $gallery->getUrlGenerator();
  foreach ($items as $item) {
  $title = $item->getTitle();
  $description = $item->getDescription();
  $keywords = $item->getKeywords();
  if(strstr($keywords, "visible")) {
  list($ret, $thumbnails) = GalleryCoreApi::fetchThumbnailsByItemIds(array($item->getid()));
  foreach($thumbnails as $thumbnail) {
  $thumbnailImg = $urlGenerator->generateUrl(array('view' => 'core.DownloadItem', 'href' => "/gallery2/main.php", 'itemId' => $thumbnail->getid()));
  $thumbnailUrl = $urlGenerator->generateUrl(array('view' => 'core.ShowItem', 'itemId' => $item->getid()));
  }
  echo "<div class=\"travelgalleriesgallery\">\n";
  echo "<p><a href=\"$thumbnailUrl\"><img src=\"$thumbnailImg\" /></a></p>\n";
  echo "<p>$title</p>\n";
  $description = unhtmlspecialchars($description);
  echo "<p>$description</p>\n";
  echo "</div> <!-- travelgalleriesgallery -->\n";
  }
  }
  }
  }
  function unhtmlspecialchars( $string )
  {
  $string = str_replace ( '&amp;', '&', $string );
  $string = str_replace ( '&#039;', '\'', $string );
  $string = str_replace ( '&quot;', '"', $string );
  $string = str_replace ( '&lt;', '<', $string );
  $string = str_replace ( '&gt;', '>', $string );

  return $string;
  }
  ?>

• I have a dropdown box in the portfolio section that shows all portfolios you can view. Again, these are all children of 1 specific album, so I can traverse them. Code:
  
  Quote:
  

  <?php
  require_once(dirname(__FILE__) . "/../gallery2/embed.php");
  /* connect to embed library */
  $ret = GalleryEmbed::init(array(
  'embedUri' => '/gallery2/index.php',
  'embedPath' => '/gallery2',
  'relativeG2Path' => '',
  'fullInit' => true));

  /* fetch all albums by item id */
  list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(70);
  if(!$error) {
  /* fetch album info for all albums */
  list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
  if(!$error) {
  echo "<form>\n";
  echo "<select name=\"url\" onchange=\"location = this.options[this.selectedIndex].value;\">\n";
  echo "<option value=\"#\">View other portfolios</option>\n";
  foreach ($items as $item) {
  $title = $item->getTitle() ? $item->getTitle() :
  $item-> getPathComponent();
  echo "<option value=\"/gallery2/main.php?g2_view=core.ShowItem&g2_itemId=" . $item->getId() . "\">$title</option>\n";

  }
  echo "</select></form>\n";
  }
  }
  ?>

  ---

  I hope this page is useful to someone. Even if you don't use the slider theme you have a bit of an insight in what it takes to visually change gallery to match your own design. If you end up using this document to change your own site, drop me a note. I'd love to see the end result.

  Regards,

  Cor Bosman
  http://underwa.ter.net

That is very cool mate, and this will get very handy in the future!

(Wat geekess zegt, je fotos zijn echt geweldig! )

Sure, no problem. I'll do it right now.

Cor

It's at this url: http://codex.gallery2.org/index.php/Gallery2:How_I_integrated_the_slider_theme_into_my_website , im not sure what the best place is to link it. I put it in the visual embedding list at http://codex.gallery2.org/index.php/Gallery2:How_Tos

Ive never looked at the vertical thumbs, so im not surprised they're not perfect. The slider theme is really quite a nightmare to adapt because of all the css positioning. Im happy enough I got it working for my own site For the titles, in slider.tpl you see a div called 'thumbs'. In it you can use {$it.title} but you'll have to fiddle with placement of the text. I couldnt get it to work easily, so have fun

Cor

I've run into a little problem with the code you provided, Cor.
Substituting the Image Description for the Image Title works. I don't know how or why, except that I changed $it.title into $it.description, which didn't work yesterday, but does today.
But generating the thumbs like you do for your travelpage doesn't work. I've taken the code above for the thumbs, changed the paths to point to the gallery directory and changed the id for the album. I probably missed something, but I don't know what.
The album select box does work when using the same parameters.
Do you have any suggestions?

Silly I didn't see the keyword thing. It's actually quite brilliant, I must say. I will use this code on the yearly/monthly archive page and I can imagine I wouldn't want all albums to show up there...
Again, thank you very much for your adaptation, and for the insight in the workings of gallery code. It is a lot clearer now and maybe, if I find time somewhere, I can use it to merge the Slider layout with the Ajax theme... musing...

You do this with the Permissions interface once you have logged in as an administrator.

Cor

This is a good guide for getting this accomplished, and I'm glad I found it. I love the slider theme, but almost scrapped it because I couldn't figure out how to integrate it.
Actually, I'm still struggling. I made some changes to the theme template, and to the css file. Mainly, inserting the header nav that I need.
When I drop the imagearea 30 pixels, I got mixed results.
- IE didn't change a lick. Looks like the default install.
- Firefox displays the header nav beautifully, but NO photo appears, at all!

update: I removed the postion:absolute, and was able to see the header in IE, but still no photo in FFox.

update II: After adding a border to the main image, I DO see an empty border in FFox, where the image should be. It's about 2px by 2px,. If you blink, you'll miss it.
How do I fix that? Why would the image not display?

update III: Clicking on the magnifying glass in the lower right corner to display the image full-size, works fine. All images after that work.

FINAL UPDATE: Playing with the CSS fixed it. I now have:

I think using 30 instead of 40 px for the top was the problem. Thanks for all your help, amsweb1. ;)

My gallery is at http://www.heritageoakslandscaping.com/portfolio/main.php

Thanks.