Embedding G2 into a standard website
|
teknics
Joined: 2004-11-16
Posts: 31 |
Posted: Wed, 2005-10-19 13:04
|
|
Hey everyone, Not too savy with PHP, but I can manage enough to customize gallery for my needs. I am looking to embed gallery within the structure of a normal html site but I am getting lost with the whole "application" process. Is there anyone who can provide some insight into what I need to do? My site has a java top menu and a sidebar, with the pages opening within the main right pane. Any help would be awesome, even if it is steering me in the correctdirection as to where to begin. THANKS! |
|
Posts: 32509
http://codex.gallery2.org/index.php/Gallery2:How_to_visually_embed_Gallery_in_your_own_website_by_editing_theme_templates
Posts: 31
Thanks for the info, I inserted my page css file, java scripts and header and footers. My only problem no matter what I make the path for the images or scripts, it sets it for the gallery2 folder.
Any advice?
Thanks for getting me on the right track so fast.
Posts: 32509
post your modified theme.tpl and we may be able to help you.
Posts: 31
Here it is, thanks.
{*
* $Revision: 1.7 $
* If you want to customize this file, do not edit it directly since future upgrades
* may overwrite it. Instead, copy it into a new directory called "local" and edit that
* version. Gallery will look for that file first and use it if it exists.
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
{* Let Gallery print out anything it wants to put into the <head> element *}
{g->head}
{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title|default:$theme.item.pathComponent|markup:strip}</title>
{/if}
{* Include this theme's style sheet *}
<link rel="stylesheet" type="text/css" href="newsite/corporatestyle.css"/>
<script language="JavaScript" src="newsite/pop-closeup.js"></script>
<script language="JavaScript" src="newsite/javascripts.js"></script>
<script language="JavaScript" src="newsite/scroller/scroll.js"></script>
</head>
<BODY BGCOLOR="#FFFFFF" background="newsite/picts/background-main.gif" TEXT="#000000" LINK="#339966" VLINK="#663399" ALINK="#666666" leftmargin="0"
rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
<!-- PAGE TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td ALIGN="LEFT" VALIGN="TOP">
<script language="JavaScript" src="newsite/header.js"></script>
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="newsite/picts/about.jpg">
<a href="newsite/index.html"><IMG SRC="newsite/picts/spacer.gif" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->
<script language="JavaScript" src="newsite/menu.js"></script>
<!-- CORNER TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="newsite/picts/shadow1.gif"><tr><td width="227">
<IMG SRC="newsite/picts/corner.gif" height="40" width="227"><br>
</td><td>
<IMG SRC="newsite/picts/spacer.gif" height="40" width="10" border="0"><br>
</td></tr></table>
<!-- CORNER TABLE -->
<!-- OUTER TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="left" VALIGN="top">
<!-- SPLIT TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP" width="15">
<IMG SRC="newsite/picts/spacer.gif" height="10" width="15" border="0"><br>
</td><td ALIGN="LEFT" VALIGN="TOP" width="150">
<script language="JavaScript" src="newsite/sidebar.js"></script>
<IMG SRC="newsite/picts/spacer.gif" height="5" width="150" border="0"><br>
</td><td ALIGN="LEFT" VALIGN="TOP" width="30">
<IMG SRC="newsite/picts/spacer.gif" height="400" width="30" border="0"><br>
</td><td ALIGN="CENTER" VALIGN="TOP">
<!-- START CONTENT TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="475"><tr><td ALIGN="LEFT" VALIGN="TOP">
<br>
<body class="gallery">
<div {g->mainDivAttributes}>
{*
* Some module views (eg slideshow) want the full screen. So for those, we
* don't draw a header, footer, navbar, etc. Those views are responsible for
* drawing everything.
*}
{if $theme.useFullScreen}
{include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain}
{else}
<div id="gsHeader">
<img src="{g->url href="images/galleryLogo_sm.gif"}" width="107" height="48" alt=""/>
</div>
<div id="gsNavBar" class="gcBorder1">
<div class="gbSystemLinks">
{g->block type="core.SystemLinks"
order="core.SiteAdmin core.YourAccount core.Login core.Logout"
othersAt=4}
</div>
<div class="gbBreadCrumb">
{g->block type="core.BreadCrumb"}
</div>
</div>
{* Include the appropriate content type for the page we want to draw. *}
{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}
<div id="gsFooter">
{g->logoButton type="validation"}
{g->logoButton type="gallery2"}
{g->logoButton type="gallery2-version"}
{g->logoButton type="donate"}
</div>
{/if} {* end of full screen check *}
</div>
{*
* Give Gallery a chance to output any cleanup code, like javascript that
* needs to be run at the end of the <body> tag. If you take this out, some
* code won't work properly.
*}
{g->trailer}
{* Put any debugging output here, if debugging is enabled *}
{g->debug}
<!-- BOTTOM LINK -->
</p>
</td></tr></table>
<!-- CONTENT TABLE -->
</td></tr></table>
<!-- SPLIT TABLE -->
</td></tr></table>
<!-- OUTER TABLE-->
<!-- PAGE TABLE-->
</TD></TR><TR><TD VALIGN="BOTTOM">
<img src="newsite/picts/stretchbar.jpg" width="100%" height="28"><br>
<!-- COPYRIGHT -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="newsite/picts/bottom-shade.gif"><tr><td width="10">
<IMG SRC="newsite/picts/spacer.gif" height="45" width="10" border="0"><br>
</td><td ALIGN="left" VALIGN="middle">
<script language="JavaScript" src="newsite/copyright.js"></script>
</td>
<td width="10">
<IMG SRC="picts/spacer.gif" height="10" width="10" border="0"><br>
</td></tr></table>
<!-- COPYRIGHT -->
</td></tr></table>
<!-- END PAGE TABLE-->
</body>
</html>
Posts: 16503
G2 looks like it's working right. You need to change your path to reflect where these files are located:
src="newsite/pop-closeup.js" Means if the page you're looking at is here: http://example.com/gallery2/main.php then it's looking for pop-closeup.js here http://example.com/gallery2/newsite/pop-closeup.js If that file really exists here: http://example.com/newsite/pop-closeup.js, then you need to change the path to src="/newsite/pop-closeup.js"
If that doesn't fix your problem, please post a link to your G2 site as well as the site where 'newsite' exists so we can troubleshoot your paths.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
Posts: 31
THANKS!
I will edit it and try again.
Posts: 31
Well, I deleted the tpl file and started over.
It was still effecting links in my java scripts and made the java top menu not function properly.
I changed all of the paths so they had a / before them, and I had more functionality then before, but I just can't seem to get it to stop thinking my site revolves around the gallery2 file structure.
I gotta take care of some stuff, but I will try to post up more info in a bit. Hopefully my explanation can give you guys an idea.
Posts: 31
{*
* $Revision: 1.7 $
* If you want to customize this file, do not edit it directly since future upgrades
* may overwrite it. Instead, copy it into a new directory called "local" and edit that
* version. Gallery will look for that file first and use it if it exists.
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
{* Let Gallery print out anything it wants to put into the <head> element *}
{g->head}
{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title|default:$theme.item.pathComponent|markup:strip}</title>
{/if}
{* Include this theme's style sheet *}
<link rel="stylesheet" type="text/css" href="/newsite/corporatestyle.css">
<script language="JavaScript" src="/newsite/pop-closeup.js"></script>
<script language="JavaScript" src="/newsite/javascripts.js"></script>
<script language="JavaScript" src="/newsite/scroller/scroll.js"></script>
</head>
<BODY BGCOLOR="#FFFFFF" background="/newsite/picts/background-main.gif" TEXT="#000000" LINK="#339966" VLINK="#663399" ALINK="#666666" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0"
<!-- PAGE TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td ALIGN="LEFT" VALIGN="TOP">
<script language="JavaScript" src="/newsite/header.js"></script>
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="/newsite/picts/links.jpg">
<a href="/newsite/index.html"><IMG SRC="/newsite/picts/spacer.gif" border="0" width="850" height="105"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->
<script language="JavaScript" src="/newsite/menu.js"></script>
<!-- CORNER TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="/newsite/picts/shadow1.gif"><tr><td width="227">
<IMG SRC="/newsite/picts/corner.gif" height="40" width="227"><br>
</td><td>
<IMG SRC="/newsite/picts/spacer.gif" height="40" width="10" border="0"><br>
</td></tr></table>
<!-- CORNER TABLE -->
<!-- OUTER TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="left" VALIGN="top">
<!-- SPLIT TABLE-->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP" width="15">
<IMG SRC="/newsite/picts/spacer.gif" height="10" width="15" border="0"><br>
</td><td ALIGN="LEFT" VALIGN="TOP" width="150">
<script language="JavaScript" src="/newsite/sidebar.js"></script>
<IMG SRC="/newsite/picts/spacer.gif" height="5" width="150" border="0"><br>
</td><td ALIGN="LEFT" VALIGN="TOP" width="30">
<IMG SRC="/newsite/picts/spacer.gif" height="400" width="30" border="0"><br>
</td><td ALIGN="CENTER" VALIGN="TOP">
<!-- START CONTENT TABLE -->
<body class="gallery">
<div {g->mainDivAttributes}>
{*
* Some module views (eg slideshow) want the full screen. So for those, we
* don't draw a header, footer, navbar, etc. Those views are responsible for
* drawing everything.
*}
{if $theme.useFullScreen}
{include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain}
{else}
<div id="gsHeader">
<img src="{g->url href="images/galleryLogo_sm.gif"}" width="107" height="48" alt=""/>
</div>
<div id="gsNavBar" class="gcBorder1">
<div class="gbSystemLinks">
{g->block type="core.SystemLinks"
order="core.SiteAdmin core.YourAccount core.Login core.Logout"
othersAt=4}
</div>
<div class="gbBreadCrumb">
{g->block type="core.BreadCrumb"}
</div>
</div>
{* Include the appropriate content type for the page we want to draw. *}
{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}
<div id="gsFooter">
{g->logoButton type="validation"}
{g->logoButton type="gallery2"}
{g->logoButton type="gallery2-version"}
{g->logoButton type="donate"}
</div>
{/if} {* end of full screen check *}
</div>
{*
* Give Gallery a chance to output any cleanup code, like javascript that
* needs to be run at the end of the <body> tag. If you take this out, some
* code won't work properly.
*}
{g->trailer}
{* Put any debugging output here, if debugging is enabled *}
{g->debug}
<!-- BOTTOM LINK -->
</p>
</td></tr></table>
<!-- CONTENT TABLE -->
<!-- CODE FOR SEARCH ENGINES TO FIND YOUR PAGES ADD KEYWORDS TO THE ALT= -->
</td></tr></table>
<!-- SPLIT TABLE -->
</td></tr></table>
<!-- OUTER TABLE-->
</body>
</html>
Posts: 16503
Can you please post or PM me a link to your site? I can trouble shoot better then.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
Posts: 31
PM sent.
Posts: 16503
Took a look at the site.
1) You're missing a closing '>' on your BODY tag
2) You've removed the reference to theme.css which does all of the formatting for G2, which is why you're seeing a bit of any ugly G2 page
I think that should get you going. Let us know if that works. Be aware you'll need to change the paths again when you move your site from /newsite up to the main directory or even if you just repoint the mapping of your domain to the /newsite directory.
Helpful suggestion: Make a local directory in your templates directory (/themes/matrix/templates/local) and copy any files you edit in there. This way when you upgrade your changes are not overwritten. Also, it can make reverting back to the original a bit easier for troubleshooting.
There's a comment at the top of each .tpl file that also mentions this:
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
Posts: 31
Thanks for the help, I did not even catch the missing body tag. (doh!).
I created the local folder yesterday, but it was in the wrong folder. I will give it a shot. Thanks for your help!
Posts: 31
I migrated everything out of the /newsite directory and changed all the references. I also added "/" forward slashes to all references in my javascripts because gallery was still changing those links. Mostly everything is working right now, but my java menu at the top is not working correctly. I am still digging.
Posts: 31
Well, turns out that my code was conflicting with the gallery code, so I cheated and used an <iframe>. Worked out pretty good. Thanks for the help though.