How to visually embed Gallery in your own website by editing theme templates
Gallery2:How to visually embed Gallery in your own website by editing theme templates
Contents[hide] |
Introduction
Visually embedding Gallery by editing theme templates is very easy. Each Gallery album has an associated theme, and the theme is responsible for drawing the entire page. So to make Gallery fit into your website all you really have to do is modify the theme template and CSS to use a color scheme and HTML snippets that blend in with the rest of your site. The only complicating factor is that if you use multiple themes with your Gallery, you'll have to tweak each of them individually. For the purposes of this article we'll stick with the Matrix theme as an example.
How it works
Almost every page in the Matrix theme is rendered through a single template. If you look in themes/matrix/templates/theme.tpl you'll see that it looks like this:
<html> <head> <!-- HTML and Smarty tags --> </head> <body> <!-- more HTML and Smarty tags --> {if $theme.pageType == 'album'} {g->theme include="album.tpl"} {elseif $theme.pageType == 'photo'} {g->theme include="photo.tpl"} {elseif $theme.pageType == 'admin'} {g->theme include="admin.tpl"} {elseif $theme.pageType == 'module'} {g->theme include="module.tpl"} {elseif $theme.pageType == 'progressbar'} {g->theme include="progressbar.tpl"} {/if} <!-- more HTML and Smarty --> </body> </html> Do not use this sample code. It is just an illustrative example and incomplete. Copy the existing theme.tpl instead and start customizing from there.
If you're familiar with HTML then this should look like an entire web page to you. There are lots of Smarty tags in there that do various things but for the most part you can ignore them (at least at first). The big block in the middle of the example is the code that figures out what kind of page that Gallery is displaying and loads up the right template for that page.
Your own website probably has a header, and a footer, and maybe some other elements (like a sidebar) that you always display. So to make Gallery blend in, all you have to do is copy the HTML snippets from the rest of your site into the theme.tpl and reload the page.
There are two ways to modify the theme.
Simple approach
The simplest approach is to make a local modification to the template. In the templates directory you create a new directory called "local" and copy theme.tpl into that directory. Then make any changes to the new copy of theme.tpl and Gallery will use that instead of the original. When you update Gallery if the original theme.tpl hasn't changed, then your changes are still valid. Otherwise, your changes will still be around and you'll have to integrate them.
$ cd themes/matrix/templates $ mkdir local $ cp theme.tpl local $ edit local/theme.tpl
A typical customized themes/matrix/templates/local/theme.tpl template looks almost the same as the original. You just add your own CSS link in the <head> section of the page and add your header right after the <body> tag and your footer right before the closing </body> tag. Of course this is just an example, you can do everything you want with this template. See: Editing Templates
<html> <head> <!-- HTML and Smarty tags --> <!-- YOUR OWN CSS AND JAVASCRIPT --> </head> <body> <!-- YOUR HTML / INCLUDE HEADER --> <!-- more HTML and Smarty tags --> {if $theme.pageType == 'album'} {g->theme include="album.tpl"} {elseif $theme.pageType == 'photo'} {g->theme include="photo.tpl"} {elseif $theme.pageType == 'admin'} {g->theme include="admin.tpl"} {elseif $theme.pageType == 'module'} {g->theme include="module.tpl"} {elseif $theme.pageType == 'progressbar'} {g->theme include="progressbar.tpl"} {/if} <!-- more HTML and Smarty --> <!-- YOUR HTML / INCLUDE FOOTER --> </body> </html> If you need to insert JavaScript code, you will have to add {literal}your JavaScript code{/literal} tags around it. The reason is that in Gallery templates, we use the Smarty language and the curly braces { and } are reserved characters. And these characters are quite frequent in JavaScript code. Instead of using {literal}{/literal}, you can also use {ldelim} for the left { and {rdelim} for the right curly brace. See The Official Smarty FAQ
More Advanced Approach
The more advanced approach is to make your own theme by How to Copy an Existing Theme and then tweaking theme.tpl. This is a little bit harder (and will require you to modify a PHP file), but it's really not that bad and the result is that your theme will continue to work after most upgrades, although you won't get any new features we add to the theme you started from.
转载
Posts
