gallery integration into webpage
|
Shemo725
Joined: 2008-04-18
Posts: 424 |
Posted: Tue, 2008-07-15 20:15
|
|
I'm trying to get my gallery to more closely match the layout of my webpage.. is there a way for me to like take the albums out of the theme they're in and place them on the black background of the site with nothing else then just the albums, the text below the albums and a login button? any help is appreciated! |
|
Posts: 424
anyone?!?!?!
Posts: 314
use htmlblock
serbanc - www.e-poze.ro
Posts: 424
what's that? link?!!?? floradave I think his name was, was going to help me integrate it..has he been around?
Posts: 27300
Take this page:
http://www.ugly-cars.com/about.html
view the source and remove the text. copy the html from the head portion and paste it to the theme.tpl of the theme you are using.
Then take the footer portion and paste it to the bottom of theme.tpl.
You have to have some knowledge of html to know that you have to only copy the html and not the <body> ond othe rsimilat gags as the theme.tpl has these already.
http://codex.gallery2.org/Gallery2:How_to_visually_embed_Gallery_in_your_own_website_by_editing_theme_templates
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 424
Dave,
I've done that and I also had to add the header banner within the body.
{* * $Revision: 16727 $ * Read this before changing templates! http://codex.gallery2.org/Gallery2:Editing_Templates *} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="{g->language}" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Gallery | Updated daily with new ugly-cars!</title> <link href="main_layout.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> {* 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|markup:strip|default:$theme.item.pathComponent}</title> {/if} {* Include this theme's style sheet *} <link rel="stylesheet" type="text/css" href="{g->theme url="theme.css"}"/> </head> <body class="gallery"> <!-- Header Banner --> <div id="header"> <img src="images/headerbanner.gif" border="0" alt="header_banner" usemap="#headerMap" class="headerImg"/> <map name="headerMap" id="header_map"> <area shape="rect" coords="4,218,96,244" alt="index page" href="index.html" /> <area shape="rect" coords="102,217,189,247" alt="gallery page" href="http://www.ugly-cars.com/photo/gallery" /> <area shape="rect" coords="196,218,284,246" alt="upload page" href="upload.html" /> <area shape="rect" coords="291,217,378,248" alt="links page" href="links.html" /> <area shape="rect" coords="383,217,473,245" alt="about page" href="about.html" /> <area shape="rect" coords="481,218,571,246" alt="support page" href="support.html" /> </map> </div> <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} {elseif $theme.pageType == 'progressbar'} <div id="gsHeader"> <img src="{g->url href="images/galleryLogo_sm.gif"}" width="107" height="48" alt=""/> </div> {g->theme include="progressbar.tpl"} {else} <div id="gsHeader"> <a href="{g->url}"><img src="{g->url href="images/galleryLogo_sm.gif"}" width="107" height="48" alt=""/></a> </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"} {/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} <!-- Footer Banner --> <div id="footer"> <img src="images/footerbanner.gif" border="0" alt="footer_banner" usemap="#footerMap" class="footerImg" /> <map name="footerMap" id="footer_map"> <area shape="rect" coords="927,68,822,74" alt="webfinity url" href="http://www.webfinitydesign.com" target="_blank" /> <area shape="rect" coords="608,3,1002,19" alt="ugly-cars email" href="mailto: " /> </map> </div> </body> </html>Posts: 8339
Here is something I did in minutes, let me know if you want the script.
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
wow, that looks amazing. Question, I didn't see a place to login?
I'd love the script!
If you make a banner that is 600X90, I'll post it under my links section for your site....
Posts: 8339
Here you go.
rename to index.php and replace your /photo/gallery/index.php
we use carbon theme which we've removed the background color so the site's colors show through if you'd like the css
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
I want it exactly how it looked on your site.
Weird though. I saved the file you attached as index.php and replaced the 1 in the gallery2 folder which is where the gallery is installed and nothing...
Posts: 424
Here's how it looks after I cleaned the cache.
http://ugly-cars.com/photo/gallery2/
EDIT-I got it to at least show up...it was pointed to a /gallery folder in your php code which I changed to its proper location of /gallery2.
I see no login spot?
Posts: 8339
sorry, I saw in your menu /photo/gallery
line 16
$gallery->setConfig('login', false); // you can allow for login if you want
change to true.
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
Thanks...
Now how did you get yours to blend so good when you used my header/footer image? I'm using the Carbon theme. =(
Posts: 8339
my carbon theme.css
rename to theme.css and upload to gallery2/themes/carbon/theme.css
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
wow, thanks man.
Question for you..not sure if it's related to your code or how the gallery acts normally.
When I hit sidebar, it opens to the top of the page almost.
Anyway to make it align with the start of the gallery so I don't have to scroll up to see it?
Posts: 8339
look to themes/carbon/templates/sidebar.tpl
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
love the new integration.
anyway to make the font smaller though? like when you title a photo or give a description...
Posts: 8339
That is all contained in the css, if you need to learn how to edit css, google it ;)
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
found it..only had to go through 200 lines of code. =(
Posts: 424
suprsidr:
I have since changed some of the coding on my site...I included new rollover buttons and the such,
I'm having problems integrating this into the new gallery page, though.
Should I place the rollover.js script within the gallery root?
Also...how should I go about linking my images to the buttons? Should I upload them to the gallery/images folder?
http://www.ugly-cars.com/photo/gallery2
Thanks,
Shemo
Posts: 8339
It does not really matter where you put them, just use their full url(s).
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
Ok, I got the buttons to show up properly now.
Question,
How come my position on the left of the buttons isn't working the same as on the rest of my pages?
Do I need to change the left position in the gallery or?
css can be found here:
http://www.ugly-cars.com/main_layout.css
Posts: 8339
Shouldn't those buttons be inside the header div?
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
I have them in a separate div on the rest of the pages..works fine there.
Any other ideas?
Posts: 8339
Why don't you wrap the header and the menu div within another div?
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
I just tried that...it didn't work.
<div> <div id="header"> <img src="http://www.ugly-cars.com/images/headerbanner.gif" border="0" alt="header banner" /> </div> <!-- Navigation Buttons --> <div id="button1"> <a href="http://www.ugly-cars.com/index.html" onmouseover="roll('home', 'http://www.ugly-cars.com/images/home2.gif')" onmouseout="roll('home', 'http://www.ugly-cars.com/images/home1.gif')" ><img id="home" name="home" src="http://www.ugly-cars.com/images/home1.gif" alt="home button" border="0" /></a> </div> <div id="button2"> <img id="gallery" name="gallery" src="http://www.ugly-cars.com/images/gallery2.gif" alt="gallery button" border="0px" /> </div> <div id="button3"> <a href="http://www.ugly-cars.com/upload.html" onmouseover="roll('upload', 'http://www.ugly-cars.com/images/upload2.gif')" onmouseout="roll('upload', 'http://www.ugly-cars.com/images/upload1.gif')" ><img id="upload" name="upload" src="http://www.ugly-cars.com/images/upload1.gif" alt="upload button" border="0px" /></a> </div> <div id="button4"> <a href="http://www.ugly-cars.com/links.html" onmouseover="roll('links', 'http://www.ugly-cars.com/images/links2.gif')" onmouseout="roll('links', 'http://www.ugly-cars.com/images/links1.gif')" ><img id="links" name="links" src="http://www.ugly-cars.com/images/links1.gif" alt="link button" border="0px" /></a> </div> <div id="button5"> <a href="http://www.ugly-cars.com/support.html" onmouseover="roll('support', 'http://www.ugly-cars.com/images/support2.gif')" onmouseout="roll('support', 'http://www.ugly-cars.com/images/support1.gif')" ><img id="support" name="support" src="http://www.ugly-cars.com/images/support1.gif" alt="support button" border="0px" /></a> </div> <div id="button6"> <a href="http://www.ugly-cars.com/about.html" onmouseover="roll('about', 'http://www.ugly-cars.com/images/aboutus2.gif')" onmouseout="roll('about', 'http://www.ugly-cars.com/images/aboutus1.gif')" ><img id="about" name="about" src="http://www.ugly-cars.com/images/aboutus1.gif" alt="about button" border="0px" /></a> </div> </div>is that what you mean?
I also noticed there's a huge gap from the bottom of my banner to the top of the gallery...hmn
Posts: 8339
http://www.flashyourweb.com/gallery2/ugly_index.php
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
how come they're not positioning with my css?
I'm calling it in properly...the same css positions my other pages normally?
Posts: 424
I just wrote a new css just for the gallery...I got the buttons to position properly, but there's still a huge gap between my header banner and the start of the gallery. I'm not sure why...would you happen to know?
Posts: 8339
Get yourself firebug for firefox. It allows you to view the elements of your page live.
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
I got it, but when I hover over the black empty space between the header banner and the gallery, it highlights this in firebug:
<!-- site wrapper div -->
<div style="width:100%" align="center">
so I took that out and it pushed all my buttons almost off of the page and didn't close the gap between the banner and the gallery.
I'm stumped.
Posts: 8339
The div you wrapped your menu buttons in should have a specific height of 22px
like I did here: http://www.flashyourweb.com/gallery2/ugly_index.php
-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
Posts: 424
I added a height attribute to each div with the buttons and that didn't close the gap, either.
Posts: 424
With a new site design in the works, I'm wondering if a person very familiar with the gallery 2 code would be willing to integrate the gallery into my background design found here:
http://ugly-cars.com/test/images/main_gallery.jpg
I'm wanting the gallery, if possible, to fit inside that large empty brushed aluminum space and try to get it to blend it as much as possible.
I'll be really appreciative if anyone is able to help out.
Thanks,
Andrew