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 of course. 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:
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.
if (!getstr && !document.slide) return;
var w = data_iw[image_index], h = data_ih[image_index],
aw = image_area.offsetWidth, ah = image_area.offsetHeight, a=0;
ah = ah - 6;
aw = aw - 6;
if(app_is_ie) {
ah = ah - 80;
}
if (w > aw || h > ah) {
if ((a = h/w) < ah/aw) {
w = aw; h = Math.round(aw*a);
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:
{*body.gallery { overflow: hidden; }*}
We're still not done. I wanted some more visual changes.. I'll go through them one by one.
div#image img {
border: 3px solid #ffffff;
}
{if !empty($theme.item.title)}
{$theme.item.title|markup}
{if $user.isRegisteredUser}
{g->block type="core.ItemLinks"}
{/if}
{/if}
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. You'll almost certainly have to deviate from this document for your own site. 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..
DO NOT USE THIS CODE WITHOUT CHANGING IT, THIS IS EXAMPLE ONLY. THE RED PART WILL DEFINATELY HAVE TO BE CHANGED INTO THE CORRECT ALBUM IDS
<?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&g2_itemId=147\">$cor</a></td>\n";
echo "<td><a href=\"/gallery2/main.php?g2_view=core.ShowItem&g2_itemId=148\">$julie</a></td>\n";
GalleryEmbed::done();
?>
DO NOT USE THIS CODE WITHOUT CHANGING IT, THIS IS EXAMPLE ONLY. THE RED PART WILL DEFINATELY HAVE TO BE CHANGED INTO THE CORRECT ALBUM IDS AND OUTPUT HTML
<?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 ( '&', '&', $string );
$string = str_replace ( ''', '\, $string );
$string = str_replace ( '"', '"', $string );
$string = str_replace ( '<', '<', $string );
$string = str_replace ( '>', '>', $string );
return $string;
}
?>
DO NOT USE THIS CODE WITHOUT CHANGING IT, THIS IS EXAMPLE ONLY. THE RED PART WILL DEFINATELY HAVE TO BE CHANGED INTO THE CORRECT ALBUM IDS AND OUTPUT HTML
<?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
