编辑“Gallery:我是如何将slider外观主题嵌入到我的网站中的”

= '''使用模板的可视化嵌入''' =
== 介绍 ==
我曾多次被问到我的网站的样子是如何实现的。Gallery在'''[http://underwa.ter.net 我的网站 http://underwa.ter.net]'''中融合地很好，机关我所使用的外观主题自身无法适用于这样的整合方式。但是我喜欢这样的哇你管主题，因此我根据自己的需要做了修改。我认为如果你真的希望gallery成为自己网站规划中不可或缺的一部分的话，某些形式的修改总是必要的。下面我就分享一下我在整合时的一些心得。

== 网站设计规划==
首先在开始之前应当做一个网站设计规划。要使用什么样的布局？网站的导航方式？使用什么样的色彩？我想要的是一个非常简单的设计样式，简洁明快，这样就不会喧宾夺主了。我选择使用顶部导航条，这将我的站点分成了一些主要部分：文件夹，旅游报告和新闻以及关于。在整合gallery之前应当做好此步。我认为你应当让gallery来融入到你的设计中而不是反过来让你的设计来适应gallery。

除了PHP部分和gallery之外，我使用Dreamweaver进行站点的组建。对我来说，Dreamweaver在设计开发中表现得很不错，尤其是在CSS处理方面极为优秀。Dreamweaver允许我创建模板的特定部分，如导航条，因此如果我做出一些修改那么整个站点的对应部分就会改变（除了gallery不受影响，我会对此做解释的）。就我个人而言，我尝试使用某些形式的软件来做此事，因为维护起来较容易许多。

== Gallery == 
现在我有了自己的设计方案。我喜欢slider式的外观主题，因此我希望将其作为图片显示的基本方案。当你在box外使用gallery时，它就会变成一个独立的网页，并且具有自己的外观效果。你可以选用某个外观主题和颜色包，但它看起来仍和原来一样。网站往往不是这个样子，因此我开始逛论坛来看看如何修改gallery以更好地融入整合到我自己的网站中。

==== 阅读Gallery文档资料====
Gallery有不少关于嵌入和整合的信息。这里给出我用过的一些链接：

* [http://gallery.menalto.com/forum/g2_integration 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_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:How_to_visually_embed_Gallery_in_your_own_website_by_editing_theme_templates]
* [http://codex.gallery2.org/index.php/Gallery2:Embedding http://codex.gallery2.org/index.php/Gallery2:Embedding]

由于我不在使用现有的CMS，因此我想我可以使用gallery整合的'编辑外观主题模板'这个方法。一般说来就是修改外观主题所提供的模板来符合你的设计意图。这使得gallery成为了最具吸引力的工具，它允许你从设计之中分离出各种功能。

==== 创建本地模板 ====
Gallery修改模板的方法很棒。打开'slider'外观主题目录，并在希望修改的文件所在目录创建一个'local'目录。我一开始是编辑theme.tpl的，因此我在'templates'目录中创建了一个'local'目录，并将'theme.tpl'复制到了该新建目录之中。现在我开始编辑此模板以使其具有一导航条。这就意味着要在模板顶部添加一些HTML代码。你可在[http://wa.ter.net/docs/gallery/theme1.php 此]查看一下结果文件。查询标记有'''COR'''字串的评注。

==== slider外观主题的问题 ====
不巧的是，这样做看不到导航条！也许我该重新载入一下模板吧？因为这是编辑模板时常做的操作。打开站点管理（Site Admin）链接，维护（Maintenance），找到模板缓存清除链接。但还是没能解决我的问题。我检查了一下源代码，导航条确实存在于其中。但为何我看不到它呢？我更进一步查看了一下slider外观主题并且注意到它使用的是绝对定位。通常说来，它将图片覆盖于导航条之上，因此就看不到了。

== slider外观主题的修改 ==
在此我是不会对CSS或HTML做讲解的，这些都可以在书本中学到。我发现必须修改css来解决此绝对定位问题。所以我在同目录下做了一个'local'目录并将theme.css复制其中。在css文件的顶部你可以看到问题所在。它将图片区定位在了评论的左顶角处。那么如果我对其做修改让顶部不为0而是50 px呢？好像有点效果。图片区被下移了50 px，接着导航条就能在顶部看到了。

==== 水平导航条 ====
在继续之前，我需要对导航条做个解释，因为某些人可能不了解。就我迄今所作操作得到的结果看来，导航条看起来不太美观。其实它根本不是一个水平的导航条，而是一个突兀的列表样式。我并不打算娓娓道来如何将竖直列表转为一个水平导航条。因为这可以在网上找到。它使用的是CSS，而我将其风格信息由站点CSS文件复制到外观主题CSS文件。你可以在[http://wa.ter.net/docs/gallery/theme1css.php 此]看一下结果theme.css。有了这个CSS文件，我的导航条就在顶部了，但gallery其余部分看起来还是如老版普通的silder外观主题一样。

==== 调整色彩 ====
接着我想到必须修改slider外观主题的色彩来配合我自己的色彩。这意味着要贼此修改CSS信息。我需要将所有'背景色'的元素修改为自己的背景色。这里是结果 [http://wa.ter.net/docs/gallery/theme2css.php theme.css文件]。查看color #282828。现在开始入眼了。

==== 解决布局问题 ====
还没有完全结束呢。首先我想做更多的细小视觉上的修改，但更重要的是，布局方面还存在bug。在IE中，目前的CSS无法正确运作，可以看出图片现在被缩略图条所覆盖，这无疑是由图片显示区下移50px所导致的。还有在我的页面向gallery外观主题页面转换时会看到导航条呈现出不佳的跳转现象。在我自己的页面中我需要利用一些CSS小技巧来避免此类事故的发生。我需要将这些变通手段用于theme.css文件上。

要修复IE中不当覆盖的问题，光是修改CSS还是不够的。slider外观主题广泛使用Javascript，针对其所在的JS我们还需解决另一问题。它会计算图片区域的尺寸，而我们将图片区域下移了50px，因此会导致计算上的误差。被修改的slider.js可在[http://wa.ter.net/docs/gallery/slider.php 此]进行查看。修改位于186行左右。我还做的修改是在右侧添加一个永久性的滚动条，这可以解决导航条跳转的问题。可能还有更好的解决办法，这里给出的仅仅是我的方法。 

 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;
   <font color="green">ah = ah - 6;
   aw = aw - 6;
   if(app_is_ie) {
     ah = ah - 80;
   }</font>
 if (w > aw || h > ah) {
 if ((a = h/w) < ah/aw) {
 w = aw; h = Math.round(aw*a);

这没效果。经修改的javascript没有被执行。我很快发现我还需要修改模板目录下的header.tpl。将其复制到本地dir并使其由本地dir载入slider.js。这是我的[http://wa.ter.net/docs/gallery/header.php header.tpl]。我还需要在theme.tpl中做另一小修改，因为其中有一行隐藏了滚动条，而我希望该滚动条可以遏制屏幕的跳转。但此方法的使用与否取决于你。我对相应语句做了批注：

 {*body.gallery { overflow: hidden; }*}

==== 额外的修改 ====
我们还没有完成呢。我还想要更多的视觉效果修改。我会一一道来的。



* 首先我希望图片周围有边界。这可以通过CSS来达成。在theme.css 文件的顶部某处加入下面的语句。
 div#image img {
   border: 3px solid #ffffff;
 }


* 我希望gallery的明朝位于导航条的左侧。这就意味着要修改theme.tpl，也就是导航条添加之处。我加入了以下语句行。如果你是管理员的话，它还会添加一个下拉框。请别忘了清除模板缓存:) 

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

* 修改了CSS文件中的一些字体属性。这并非很重要的。

* 我不想让普通读者看到维护菜单的扳手图标。所以我修改了slider.tpl，这样一来只有管理员可以看到。参见[http://wa.ter.net/docs/gallery/slidertpl.php slider.tpl]。

== 被修改的外观主题文件 ==
这就完成了所有的修改。我还对gallery外观主题配置做了一些mirror方面的修改。我特别限制了非管理员用户查看图片时的最大可见尺寸。

所有我做修改的文件可以[http://wa.ter.net/docs/gallery/index.php 在此查看]。修改常常都加上了批注，但也许你会做一些自己的修改。某些修改我可能也没有印象了，因为到实际完成已隔了很长一段时间。如果你有什么问题的话，请尽管发短消息给我。但请记住，此份资料并不一定完全适用于你的网站的修改，这仅仅是我对自己网站所作修改的一个记录。你肯定要对此文档做一些取舍和修改才能符合你的网站需要。而且我也可能使用了不妥的方法来处理问题。但对我来说，以上的这些都没问题。





= '''额外的嵌入''' =
除了修改外观主题，我还做了其他形式的嵌入。你可以从任何PHP文件内部呼叫gallery函数。这使得你可以在gallery之外做一些有趣的尝试。我的站点就含有一些类似的附加..

* 首页有两张随机图片。我使用2个gallery内的特殊相册来达到此目的，其中一个相册是我的，另一个则是我妻子的。我们都可以分别向gallery中放入图片，并让它们自动为此随机图片所利用。下面是代码。你可以将常规的php文件中的Include()修改为符合你所需的任何东西。

'''''不要不做修改就使用此代码，因为这只是示例。红色部分是肯定要修改为正确的相册ID的'''''
 <?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' => '<font color="red">120</font>' ));
 list ($ret, $imageBlockJulie) = GalleryEmbed::getImageBlock(array('blocks' => 'randomImage', 'show' => 'none', 'itemId' => '<font color="red">121'</font> ));
 $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();
 ?>

* 旅游（travel）页面在右侧有一列缩略图。这些是自动生成的！如果我添加一个travel相册，就会被自动显示在这里。我通过额外手法让其在我准备好时才可见。这里的所有相册是1个特定相册的子相册；这里指的特定相册允许我对其进行纵览以获取所有这些travel相关的gallery。

'''''不要不做修改就使用此代码，因为这只是示例。红色部分是肯定要修改为正确的相册ID和输出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(<font color="red">69</font>);
 /* 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()));
         }
         <font color="red"><nowiki>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";</nowiki></font>
       }
     }
   }
 }
 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;
 }
 ?>



* 在文件夹区域中的下拉列表显示所有可查看的文件夹。这些同样都是一特定相册的子，这样我就可以进行traverse。代码：

'''''不要不做修改就使用此代码，因为这只是示例。红色部分是肯定要修改为正确的相册ID和输出HTML的'''''

 <?php
 require_once(dirname(__FILE__) . "/../gallery2/embed.php");
 /* 连接到embed库 */
 $ret = GalleryEmbed::init(array('embedUri' => '/gallery2/index.php','embedPath' => '/gallery2','relativeG2Path' => '','fullInit' => true));
 
 /* 按项目id获取所有相册 */
 list ($error,$albums) = GalleryCoreApi::fetchAlbumTree(<font color="red">70</font>);
 if(!$error) {
   /* 获取所有相册的相册信息 */
   list ($error,$items) = GalleryCoreApi::loadEntitiesById(GalleryUtilities::arrayKeysRecursive($albums));
   if(!$error) {<font color="red"><nowiki>
     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";</nowiki></font>
   }
 }
 ?>



----
我希望此页面对某些人有所帮助。就算你不使用slider外观主题你也可以明白如何修改使得gallery的视觉效果符合自己的网站设计风格。如果你是使用该份文档修改的自己的网站的话，请给留个信儿。我很想看看效果如何。

致礼，

Cor Bosman<br>
'''http://underwa.ter.net'''