[Solved]: including Coppermine inside an existing web design

achintya · July 06, 2007, 12:35:50 PM

Hi

I have a quite 'narrow' web site, with left and right hand design elements, as well as header and footer elements. I want to 'embed' coppermine so it displays within an html table in an existing website.

Is it possible to 'include' a coppermine installation within an existing website in this way, rather than have to 'break' out and patch Coppermine to look like the originating website.

Is it possible to include Coppermine code inside another website so it displays the software like this inside another design?

thanks

achintya

Abbas Ali · July 06, 2007, 02:14:17 PM

Using frames might be the solution, but not recommended. Other then that, there is no solution afaik. Changing the coppermine theme is the best solution.

capecodgal · July 07, 2007, 04:56:11 PM

Yeah take your layout and add that to the current theme - its the easiest and cleanest way

phill104 · July 08, 2007, 12:11:18 PM

Here is the very simplest example of how to do it. Last week I was asked to do a freebie for someone so I very quickly put this together.

I used the classic theme and made a copy of it with the new name sussex in the coppermine themes directory.

This is what the webpage looks like without the cppermine code installed.

http://www.sussex-windsurfing.co.uk/

The white areas in the middle is just a table. Here is the code.

Code Select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/sussex.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="/style.css" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #000000;
}
.style5 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 36px;
}
.style7 {color: #999999}
.style8 {font-size: 12px}
-->
</style>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#000000">
  <tr>
    <td width="14">&nbsp;</td>
    <td width="751"><div align="center">S<span class="style5">SUSSEX WINDSURFING</span></div></td>
    <td width="13">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><div align="center">
      <p class="style7">YOUR WINDSURFING WEBSITE</p>
      <p class="style7">&nbsp;</p>
    </div></td>
    <td></td>
  </tr>
  <tr>
    <td height="94" colspan="3" background="images/a1.jpg"><table width="695" height="65" border="0" align="center">
      <tr>
        <td><div align="center"><strong><a href="index.html">HOME</a></strong></div></td>
        <td><div align="center"><strong><a href="About.html">ABOUT US</a></strong></div></td>
        <td><div align="center"><strong><a href="cpg1.4.12/cpg1412/index.php">GALLERY</a></strong></div></td>
        <td><div align="center"><strong><a href="Contact.html">CONTACT</a></strong></div></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td rowspan="3" bgcolor="#000000"></td>
    <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"></td>
    <td rowspan="3" bgcolor="#000000"></td>
  </tr>
  <tr>
    <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><table width="98%" border="0" align="center" cellpadding="5" cellspacing="5">
      <tr>
        <td><!-- InstanceBeginEditable name="EditRegion1" -->Website coming soon<!-- InstanceEndEditable --></td>
      </tr>
    </table>
      </td>
  </tr>
  <tr>
    <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" class="style7">&nbsp;</td>
  </tr>
  <tr>
    <td height="78" colspan="3" background="images/a4.jpg"><div align="center" class="style8">
            <p>Copyright 2007. A <a href="http://www.windsurf.me.uk">WINDSURF.ME.UK</a> Production.</p>
        </div></td>
  </tr>
</table>
<p>&nbsp;</p>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#000000"></table>
</body>
<!-- InstanceEnd --></html>

As you can see, a very simple design.

To embed coppermine in this I saved this code in the newly created sussex directory created above and simple pasted the following code nicked from the classic theme into the table (where currently sits "website coming soon"

Code Select

{CUSTOM_HEADER}
  <table width="100%" border="0" cellpadding="20" cellspacing="20">
    <tr>
      <td valign="top" style="border: 1px solid #666666;background-color:#FFFFFF;">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            
            <td width="100%" align="center">
              <h1>{GAL_NAME}</h1>
              <h3>{GAL_DESCRIPTION}</h3><br />
              {SYS_MENU} <br /> {SUB_MENU}
            </td>
          </tr>
        </table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td align="center" valign="top">
              {LANGUAGE_SELECT_FLAGS}
            </td>
          </tr>
          <tr>
            <td align="center" valign="top">
              {THEME_SELECT_LIST}
              {LANGUAGE_SELECT_LIST}
            </td>
          </tr>
        </table>
        <img src="images/spacer.gif" width="1" height="15" alt="" />
        <br />
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" valign="top">
              {ADMIN_MENU}
              {GALLERY}
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  {CUSTOM_FOOTER}{VANITY}

Not forgetting to put

Code Select

<link rel="stylesheet" href="themes/classic/style.css" type="text/css" />

In the head of the document to link to the stylesheet.

I then saved this completed file over template.html in the sussex directory I created above and selected the sussex theme from within coppermine and voila, all sorted as you can see in the final page here

http://www.sussex-windsurfing.co.uk/cpg1.4.12/cpg1412/index.php

A very simple example of how to do it but once you know how you can apply this to any website.

tensixteen64 · July 10, 2007, 03:51:20 PM

Thank you so much Phill for your post. I'm working on my site and using your post I'm getting the look I wanted to achieve.

Evilbmxer · September 01, 2008, 07:00:10 PM

I have got it to work on my site as well, BUT... the main problem I am having is my style sheets. I have a CSS for my main template, as well as the one for the CPG. And the one from my main website is overrideing the CPG and its messing it up. I've been working on it for days, and I cant figure it out. Any Ideas?

Thanks,
Evilbmxer

Gizmo · September 01, 2008, 07:12:04 PM

You didn't need to double post! All that does it confuse the posting as to which one you are actually talking about.

To fix the issue you have, you will need to change the names of the styles in one of your css sheets. You can't have 2 sheets with the same style names.

Evilbmxer · September 01, 2008, 07:44:50 PM

i wasent trying to. sorry.

Anyway, I did, one os Styles.css and the other is css.css

and they still conflict?? How do I sperate them?

Gizmo · September 01, 2008, 09:00:27 PM

Paste a link to your site. It's hard to tell what the problem is without seeing your gallery.

bb3 · February 26, 2009, 10:42:02 PM

hi!

i have read and followed the instructions written in the previous posts by i am having a lot of problems in putting my coppermine in the right place.
i just want to know how to move and resize my coppermine so that it will fit on my pre-made table

www.redlens.org/image_gallery

thank you and looking forward to all of you

bb3 · February 27, 2009, 12:20:29 AM

ok i now figured it out and its better now. a added a couple of <br> tags to move it downwards. my only problem remaining is how can i resize it? how can i make it narrower? thanks

Joachim Müller · February 27, 2009, 08:15:25 AM

The link you posted above is down (404 not found), so you still need to post a working link if you want advice.

bb3 · February 27, 2009, 08:20:59 AM

sorry heres the link www.redlens.org/gallery

bb3 · March 01, 2009, 05:17:31 AM

Quote from: Joachim Müller on February 27, 2009, 08:15:25 AM
The link you posted above is down (404 not found), so you still need to post a working link if you want advice.

i still have this problem sir. www.gallery.redlens.org

thanks

phill104 · March 01, 2009, 05:59:10 AM

Take a look for the code below.

Code Select

div#container {www.gall...dlens.org (line 60)
margin-left:auto;
margin-right:auto;
margin-top:0;
position:relative;
text-align:left;
width:916px;
}

That width setting appears to be controlling the size of your template. As the width of your image and top menu is 887px I would suggest that as a start though the way your code is you may need to adjust the allignment.

How did I find this you may ask? The best way for me is to view the site in Firefox and use the Firebug plugin (google it). This allows you to inspect any element of a web page an adjut it in real time. It is well worth installing when you are trying to fix small problems such as this.

Also, the vanity block at the bottom is not displaying properly. You may want to switch this off anyway as your page does not validate.

bb3 · March 01, 2009, 09:44:21 AM

hi phil,

i already tried to change it to 887px but even my banner and navigation bar shrinks... i really have a little know how in this but i can learn.. thanks

Joachim Müller · March 01, 2009, 10:13:49 AM

Why do you use a fixed width in the first place. Just use left and right margins - that's much better for a picture gallery.

bb3 · March 01, 2009, 10:38:28 AM

hi mods,

Joachim you were right! i already fixed it, I realized that my navigations, headers and footers are aligned and fixed and i changed it to center.

Thanks again! have a great weekend!

coppermine-gallery.com/forum

News:

[Solved]: including Coppermine inside an existing web design

achintya

Abbas Ali

capecodgal

phill104

tensixteen64

Evilbmxer

Gizmo

Evilbmxer

Gizmo

bb3

bb3

Joachim Müller

bb3

bb3

phill104

bb3

Joachim Müller

bb3