Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: [Solved]: including Coppermine inside an existing web design  (Read 12828 times)

0 Members and 1 Guest are viewing this topic.

achintya

  • Coppermine newbie
  • Offline Offline
  • Posts: 10

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
« Last Edit: March 01, 2009, 08:09:31 pm by Joachim Müller »
Logged

Abbas Ali

  • Administrator
  • Coppermine addict
  • *****
  • Country: in
  • Offline Offline
  • Gender: Male
  • Posts: 2165
  • Spread the PHP Web
    • Ranium Systems
Re: including Coppermine inside an existing web design
« Reply #1 on: 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.
Logged
Chief Geek at Ranium Systems

capecodgal

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Posts: 123
Re: including Coppermine inside an existing web design
« Reply #2 on: July 07, 2007, 04:56:11 pm »

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

phill104

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4885
    • Windsurf.me
Re: including Coppermine inside an existing web design
« Reply #3 on: 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.
Logged
It is a mistake to think you can solve any major problems just with potatoes.

tensixteen64

  • Coppermine newbie
  • Offline Offline
  • Gender: Female
  • Posts: 1
    • Creative Chick Photography
Re: including Coppermine inside an existing web design
« Reply #4 on: 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.  ;D
Logged

Evilbmxer

  • Coppermine newbie
  • Offline Offline
  • Posts: 4
Re: including Coppermine inside an existing web design
« Reply #5 on: 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
Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: including Coppermine inside an existing web design
« Reply #6 on: 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.
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

Evilbmxer

  • Coppermine newbie
  • Offline Offline
  • Posts: 4
Re: including Coppermine inside an existing web design
« Reply #7 on: 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?
Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: including Coppermine inside an existing web design
« Reply #8 on: 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.
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

bb3

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 39
Re: including Coppermine inside an existing web design
« Reply #9 on: 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
Logged

bb3

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 39
Re: including Coppermine inside an existing web design
« Reply #10 on: 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
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: including Coppermine inside an existing web design
« Reply #11 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.
Logged

bb3

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 39
Re: including Coppermine inside an existing web design
« Reply #12 on: February 27, 2009, 08:20:59 am »

sorry heres the link www.redlens.org/gallery
Logged

bb3

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 39
Re: including Coppermine inside an existing web design
« Reply #13 on: March 01, 2009, 05:17:31 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
Logged

phill104

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4885
    • Windsurf.me
Re: including Coppermine inside an existing web design
« Reply #14 on: 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.
Logged
It is a mistake to think you can solve any major problems just with potatoes.

bb3

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 39
Re: including Coppermine inside an existing web design
« Reply #15 on: 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
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: including Coppermine inside an existing web design
« Reply #16 on: 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.
Logged

bb3

  • Coppermine novice
  • *
  • Offline Offline
  • Posts: 39
Re: including Coppermine inside an existing web design
« Reply #17 on: 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! :)
Logged
Pages: [1]   Go Up
 

Page created in 0.027 seconds with 19 queries.