"Powered By" on top of page (?)

jr1001 · June 05, 2006, 06:12:24 AM

I know that addressing the "powered by" issue is a touchy subject, but let me start by saying that I have absolutely no intention of removing it. I strongly believe in giving credit where credit is due.

In my case however, I think I may have messed something up and I'd like to fix it.

I used the custom header and footer feature to better integrate the gallery into my site. In doing so I set the gallery to the "project_vii" theme which seemed to match my color scheme the most, and I ended up modifying the heck out of it.

Everything looks fine - only for some reason the footer line appears at the top of the page instead of at the bottom where it belongs. I've looked through the project_vii files and the tag for the line has not been moved or altered.

I saw that the footer line was moved to the top also on other themes I was trying out.

Is there a safe way for me to move it down to the bottom? Please PM me with the info if you do not want to publicly reveal the information. It just looks a little dorky the way it just hovers at the top of the page right now.

Thanks in advance.

Ref: http://gallery.robitzsch.com

Tranz · June 05, 2006, 06:41:39 AM

http://forum.coppermine-gallery.net/index.php?topic=14744.0

Someone else had the same issue and the resolved it the same way I was going to suggest: compare your changes to an unmodified project_vii. You might want to use WinMerge to help you find where the changes are.

jr1001 · June 05, 2006, 03:36:29 PM

Thanks for the feedback - but that's not the problem. Like I said - the call for the footer information is in tact - and the problem also occured on other themes as well as this one before I started modifying it.

It is something squirrley I'm going to have to figure out on my own I think.

I use a PNG replacement script that allows me to serve transparent PNG images to IE Los- I mean "Users"

-

At first I thought it was related to how I call my header and footer. I took my regular page and created a table where I wanted the gallery to appear. I then copied all the code from above the entry point and pasted it into a file I call "_header.php". I did the same with all of the code below the entry point and called it "_footer.php"

I kept these pages in my site root (www) and called them from the coppermine theme config page with "../_header.php" and "../_footer.php"

I then moved these pages to the gallery root - so I can call them with simply "_header.php" and "_footer.php" (no leading "../")

In doing that I "fixed" the "powered by" issue on top (actually it REMOVED the credits altogether which I didn't want) - and I also saw a "fatal error" half way down the page where the the closing php tag was calling the PNG replacement script (which I didnt copy to the gallery root while I was testing this out).

I copied the PNG script over to the gallery root and the problem re-appeared. The "powered by" line was at the top of my page again - like a sore thumb.

I'll figure it out eventually

- thanks for trying to help.

Paver · June 05, 2006, 06:54:49 PM

There's the problem. Coppermine expects your main template file, themes/yourtheme/template.html to have all the tags in it. If you move the header and footer tags into separate files, it's not going to understand what you're doing. Yes, some things might work, but other things may not, as you are seeing.

I'm relatively new to the dev team so I don't know how much I should say, but basically if you decide to serve Coppermine pages through a perversion of the theme system (not meant to be an insult) or through for example CPMFetch only, then you may inadvertently or I guess maliciously leave out the Coppermine credit tag.

jr1001 · June 05, 2006, 11:03:09 PM

Yea thanks - I read the (?) info in the header and footer section where it said that these files shouldnt include <head> tags etc. which is probably the cause for this problem.

I could fix this I suppose - if I could rename the template.html to template.php. Do you know if that would work?

I could merge my header and footer pages into the template page - provided it can parse php commands (for my png script). I'd hate to have to redesign my page for this.

If the template file has to be a html file, I guess I can live with the credit line up top until IE 7 is released and becomes mainstream - making my png transparancy script obsolete

Paver · June 05, 2006, 11:14:46 PM

No, as the docs and FAQ say, template.html *must* be an HTML file. That's the way Coppermine is set up.

Why do your header and footer files have to have <HEAD> tags? Ideally, those are HTML snippets and so should, once put together into the output web page, be a proper HTML document with only one <HEAD> section.

I haven't done much with custom headers & footers, but if nothing else can be done, I can think of a few other ways to include such scripts - possibly using a theme customization (in theme.php instead), but certainly with a 'page_html' filter plugin hook using the Coppermine plugin system.

If you need some tips, provide more details about your scripts and I'll see what I can recommend.

jr1001 · June 06, 2006, 12:07:53 AM

hmm now I am as baffled as ever....

I thought I had it all figured out...

I left the php calls for the png script in the header and footer php files, and then merged all of the remaining content into the template.html file. the script really has the only PHP dependency I had.

There are no more html tags in the header and footer files...

Code (_header.php) Select


<?php ob_start(); ?>

Code (_footer.php) Select


<?php

    include_once 'replacePngTags.php';

    echo replacePngTags(ob_get_clean());

?>

that's it! nothing else...

the file it calls is this:

Code (replacePngTags.php) Select


<?php
/**
*  KOIVI PNG Alpha IMG Tag Replacer for PHP (C) 2004 Justin Koivisto
*  Version 2.0.11
*  Last Modified: 8/4/2005
*  
*  This library is free software; you can redistribute it and/or modify it
*  under the terms of the GNU Lesser General Public License as published by
*  the Free Software Foundation; either version 2.1 of the License, or (at
*  your option) any later version.
*  
*  This library is distributed in the hope that it will be useful, but
*  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
*  or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public
*  License for more details.
*  
*  You should have received a copy of the GNU Lesser General Public License
*  along with this library; if not, write to the Free Software Foundation,
*  Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*  
*  Full license agreement notice can be found in the LICENSE file contained
*  within this distribution package.
*  
*  Justin Koivisto
*  justin.koivisto@gmail.com
*  http://www.koivi.com
*
*  Modifies IMG and INPUT tags for MSIE5+ browsers to ensure that PNG-24
*  transparencies are displayed correctly.  Replaces original SRC attribute
*  with a binary transparent PNG file (spacer.png) that is located in the same
*  directory as the orignal image, and adds the STYLE attribute needed to for
*  the browser. (Matching is case-insensitive. However, the width attribute
*  should come before height.
*  
*  Also replaces code for PNG images specified as backgrounds via:
*  background-image: url(image.png); or background-image: url('image.png');
*  When using PNG images in the background, there is no need to use a spacer.png
*  image. (Only supports inline CSS at this point.)
*  
*  @param string $x  String containing the content to search and replace in.
*  @param string $img_path   The path to the directory with the spacer image relative to
*                      the DOCUMENT_ROOT. If none os supplied, the spacer.png image
*                      should be in the same directory as PNG-24 image.
*  @param string $sizeMeth   String containing the sizingMethod to be used in the
*                      Microsoft.AlphaImageLoader call. Possible values are:
*                      crop - Clips the image to fit the dimensions of the object.
*                      image - Enlarges or reduces the border of the object to fit
*                              the dimensions of the image.
*                      scale - Default. Stretches or shrinks the image to fill the borders
*                              of the object.
*  @param bool   $inScript  Boolean flag indicating whether or not to replace IMG tags that
*                      appear within SCRIPT tags in the passed content. If used, may cause
*                      javascript parse errors when the IMG tags is defined in a javascript
*                      string. (Which is why the options was added.)
*  @return string
*/
function replacePngTags($x,$img_path='',$sizeMeth='scale',$inScript=FALSE){
    $arr2=array();
    // make sure that we are only replacing for the Windows versions of Internet
    // Explorer 5.5+
    $msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
    if( !isset($_SERVER['HTTP_USER_AGENT']) ||
        !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
        preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
        return $x;

    if($inScript){
        // first, I want to remove all scripts from the page...
        $saved_scripts=array();
        $placeholders=array();
        preg_match_all('`<script[^>]*>(.*)</script>`isU',$x,$scripts);
        for($i=0;$i<count($scripts[0]);$i++){
            $x=str_replace($scripts[0][$i],'replacePngTags_ScriptTag-'.$i,$x);
            $saved_scripts[]=$scripts[0][$i];
            $placeholders[]='replacePngTags_ScriptTag-'.$i;
        }
    }

    // find all the png images in backgrounds
    preg_match_all('/background-image:\s*url\(([\\"\\\']?)([^\)]+\.png)\1\);/Uis',$x,$background);
    for($i=0;$i<count($background[0]);$i++){
        // simply replace:
        //  "background-image: url('image.png');"
        // with:
        //  "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
        //      enabled=true, sizingMethod=scale, src='image.png');"
        // I don't think that the background-repeat styles will work with this...
        $x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
                'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
                ', src=\''.$background[2][$i].'\');',$x);
    }

    // find all the IMG tags with ".png" in them
    $pattern='/<(input|img)[^>]*src=([\\"\\\']?)([^>]*\.png)\2[^>]*>/i';
    preg_match_all($pattern,$x,$images);
    for($num_images=0;$num_images<count($images[0]);$num_images++){
        // for each found image pattern
        $original=$images[0][$num_images];
        $quote=$images[2][$num_images];
        $atts=''; $width=0; $height=0; $modified=$original;

        // We do this so that we can put our spacer.png image in the same
        // directory as the image - if a path wasn't passed to the function
        if(empty($img_path)){
            $tmp=split('[\\/]',$images[3][$num_images]);
            $this_img=array_pop($tmp);
            $img_path=join('/',$tmp);
            if(empty($img_path)){
                // this was a relative URI, image should be in this directory
                $tmp=split('[\\/]',$_SERVER['SCRIPT_NAME']);
                array_pop($tmp);    // trash the script name, we only want the directory name
                $img_path=join('/',$tmp).'/';
            }else{
                $img_path.='/';
            }
        }else if(substr($img_path,-1)!='/'){
            // in case the supplied path didn't end with a /
            $img_path.='/';
        }

        // If the size is defined by styles, find them
        preg_match_all(
            '/style=([\\"\\\']).*(\s?width:\s?([0-9]+(px|%));).*'.
            '(\s?height:\s?([0-9]+(px|%));).*\\1/Ui',
               $images[0][$num_images],$arr2); 
        if(is_array($arr2) && count($arr2[0])){
            // size was defined by styles, get values
            $width=$arr2[3][0];
            $height=$arr2[6][0];

            // remove the width and height from the style
            $stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
            // Also remove any empty style tags
            $modified=preg_replace(
                '`style='.$arr2[1][0].$arr2[1][0].'`i',
                '',
                preg_replace($stripper,'',$modified));
        }else{
            // size was not defined by styles, get values from attributes
            preg_match_all('/width=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
            if(is_array($arr2) && count($arr2[0])){
                $width=$arr2[2][0];
                if(is_numeric($width))
                    $width.='px';
    
                // remove width from the tag
                $modified=str_replace($arr2[0][0],'',$modified);
            }
            preg_match_all('/height=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
            if(is_array($arr2) && count($arr2[0])){
                $height=$arr2[2][0];
                if(is_numeric($height))
                    $height.='px';
    
                // remove height from the tag
                $modified=str_replace($arr2[0][0],'',$modified);
            }
        }

        if($width==0 || $height==0){
            // width and height not defined in HTML attributes or css style, try to get
            // them from the image itself
            // this does not work in all conditions... It is best to define width and
            // height in your img tag or with inline styles..
            if(file_exists($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images])){
                // image is on this filesystem, get width & height
                $size=getimagesize($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images]);
                $width=$size[0].'px';
                $height=$size[1].'px';
            }else if(file_exists($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images])){
                // image is on this filesystem, get width & height
                $size=getimagesize($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images]);
                $width=$size[0].'px';
                $height=$size[1].'px';
            }
        }
        
        // end quote is already supplied by originial src attribute
        $replace_src_with=$quote.$img_path.'spacer.png'.$quote.' style="width: '.$width.
            '; height: '.$height.'; filter: progid:DXImageTransform.'.
            'Microsoft.AlphaImageLoader(src=\''.$images[3][$num_images].'\', sizingMethod='.
            $sizeMeth.');"';

        // now create the new tag from the old
        $new_tag=str_replace($quote.$images[3][$num_images].$quote,$replace_src_with,
            str_replace('  ',' ',$modified));
        // now place the new tag into the content
        $x=str_replace($original,$new_tag,$x);
    }
    
    if($inScript){
        // before the return, put the script tags back in. (I was having problems when there was
        // javascript that had image tags for PNGs in it when using this function...
        $x=str_replace($placeholders,$saved_scripts,$x);
    }
    
    return $x;
}
?>

All it does is search for png tags and replaces them with a transparent placeholder into tricking IE not to show that corny gray border. It doesn't do anything with the <head> or <body> tags...

I merged my CSS files as well.

It all looks ok - lol - but I still have that damned "powered by" at the top...

Paver · June 06, 2006, 12:34:41 AM

At this point, you might find the answer by doing what TranzNDance said and comparing your template.html file with the default Project_VII file. Unless you have other customizations, reverting to the default file might do the trick.

Nibbler · June 06, 2006, 01:15:50 AM

The plugin system already has the capability to filter the html output. Use the attached plugin and save yourself some troubles later on.

jr1001 · June 06, 2006, 05:04:53 AM

Wow Nibbler! Awesome! thanks!! That plugin (almost) solved my problem...

The copyright is in the right place. But now my transparent shadow borders on the left and right sides don't tile (expand) properly anymore for some reason. I know this goes way beyond the coppermine help but if could you look at this and tell me if my code is wrong?

This is the original table cell which worked without the plugin:

Code (left border body shadow) Select


		<td>
			<img src="images/body_left.png" height="100%" width="31" alt=""></td>

I tried defining a CSS value and setting the border as a background value. I added these ID's to the CSS:

Code (css ID's) Select


#leftback {
                background-image: url('images/body_left.png');
					 background-repeat: repeat-y;
					 width: 31px;
					 height: 100%;
        }		  
#rightback {
                background-image: url('images/body_right.png');
					 background-repeat: repeat-y;
					 width: 31px;
					 height: 100%;
        }

and I updated my td's like this:

Code Select

		<td id="rightback">
			<img src="images/body_right.png" width="28" height="100%" alt=""></td>
	</tr>

That didn't work either since the plugin doesnt seem to read the background-image var, like my old replacePngTag script did.

Any ideas?

jr1001 · June 06, 2006, 06:23:30 AM

hmm that's odd...

I compared your plugin code to the one I used before, and aside from that coppermine disclaimer code and the html call at the top - everything else is identical. I wonder why my original script could parse the background-image png file and not the plugin?

freaky stuff...

Paver · June 06, 2006, 06:32:20 AM

I assume the CSS IDs are in the document and not linked through an external file?

It might be that the output buffer is flushed sometime early and so the plugin filter only gets *most* but not all of the page's HTML. Try moving your CSS IDs lower on the page to see if that works. I might be wrong about the output buffer though - I just remember a few other ob_ calls here & there and would need to check if it's relevant (which I don't have time to do right now).

Nibbler · June 06, 2006, 02:43:25 PM

The script doesn't look at the stylesheet, only the html. The background-image would need to be in the source code as an inline style.

jr1001 · June 06, 2006, 07:46:26 PM

Nibbler - you are worth your weight in gold! Thanks buddy! It now works perfectly..

http://gallery.robitzsch.com

As documentation for anyone who is doing anything similar to this. I changed my TD value to this:

Code Select


		<td style="background-image:url(images/body_right.png); background-repeat:repeat-y; width:31; height:100%">
			</td>

for each side resepctively.

coppermine-gallery.com/forum

News:

"Powered By" on top of page (?)

jr1001

Tranz

jr1001

Paver

jr1001

Paver

jr1001

Paver

Nibbler

jr1001

jr1001

Paver

Nibbler

jr1001