Thirteen : Theme for cpg1.4.x and WordPress 2.x

[Gizmo]

Hi All,

Here is Thirteen, another theme that I've ported from a WordPress theme designed by Beccary - http://beccary.com/. She's also the designer of the Ocadia theme that I ported here - http://forum.coppermine-gallery.net/index.php?topic=36598.0. I think she designs some really nice themes and given time, I will try to port some of the others.

This is a fixed width theme and is fully compatible with most of the major browsers (I tested it on Mac with FF 2.0 & Safari 2.0.4 and on the PC with FF 1.5, FF 2.0, IE 6.0x & IE 7.0x at various monitor resolutions). The width will accomodate monitor sizes from 800x600 on up.

The usual stuff applies such as I've overwritten some of the configuration settings by using variables in the theme.php file. The reason for this is to prevent the standard settings in the Configuration tables set by you from "breaking" the theme. These changes are:

Code Select Expand

$CONFIG['max_film_strip_items'] = 4; //overrides the number of thumbnails.
$CONFIG['thumbcols'] = 4; //overrides the number of columns for thumbnails.
$CONFIG['main_table_width'] = '100%'; //overrides the Width of the main table (pixels or %).
$CONFIG['picture_table_width'] = '100%'; //overrides the Width of the table for file display (pixels or %).
$CONFIG['album_list_cols'] = 1; // sets "Number of columns for the album list = 1"
$CONFIG['first_level'] = 0; //sets "Show first level album thumbnails in categories = no".

This theme has the first level of album thumbnails turned off to make large (as well as small) galleries look move attractive. This will prevent the main page from being cluttered with thumbnails and easier to chose a particular category. Also, this theme is geared towards intermediate photos sizes of 440 pixels or less but the theme will reduce the size automatically for intermediate images larger than this. The popup size can be any size though.

In the theme folder you will find 2 css files. This is because I wanted to preserve the WP style sheet so that if you decide to use this theme with WordPress and make any changes, you can just move the complete style sheet over and get the same customizations in Coppermine. If I merged them then you'd have to do a lot of copying and pasting which isn't necessary.

Also, if you have a lot of albums not assigned to categories and they don't have a lot of description text, you can change

Code Select Expand

$CONFIG['album_list_cols'] = 1; // sets "Number of columns for the album list = 1"
to

Code Select Expand

$CONFIG['album_list_cols'] = 2; // sets "Number of columns for the album list = 2" which will give you 2 colums of albums instead of one and shorten the length of the gallery page. I set it to one to make it look it's best on the Coppermine demo site with the long album description text. 

Let me know what you think and enjoy!

Cheers,

Gizmo 

[Joachim Müller]

Demo - Download

[Fabrian]

Priceless you giving all of us these wonderful wp/cpg themes Gizmo.  I say christmas gifts from all tbh

[Joachim Müller]

@Gizmo: I agree with Frabrian - if I were you, I'd consider publishing my amazon wishlist url in my signature *hint*

[Gizmo]

Thanks you guys but the day I can create or port a theme that's 99% error free with good clean code, I'll publish that list. I do this to learn and better myself (at 47 I'm still trying!) and the only way I can do that is by trying. I'm not very good at reading how-to's and then going off and doing it right the first try or even the second but rather by tearing something apart and seeing the guts and since I'm doing this anyway, why not share the results of my exploring with others. It's my pleasure and to be honest, I get a "real" kick out of seeing my name at the bottom of someone's gallery using a theme that I submitted. Thank you for your praise and encouragement.

[Sista]

Very nice, Thirteen has always been one of my favorite WP themes.

[kenjadams]

Hi Billy, i really like this one but however when I switched to it, i got an error and i dont know how to deal with it. first it worked fine but now when I visit my gallery all I get is this;

"Template error
Failed to find block 'my_gallery'(#(<!-- BEGIN my_gallery -->)(.*?)(<!-- END my_gallery -->)#s) in :

                                        <ul>


<!-- BEGIN allow_memberlist -->
                                                <li><a href="{MEMBERLIST_TGT}" title="{MEMBERLIST_TITLE}">{MEMBERLIST_LNK}</a></li>
<!-- END allow_memberlist -->

<!-- BEGIN faq -->
                                                <li><a href="{FAQ_TGT}" title="{FAQ_TITLE}">{FAQ_LNK}</a></li>
<!-- END faq -->


<!-- BEGIN upload_pic -->
                                                <li><a href="{UPL_PIC_TGT}" title="{UPL_PIC_TITLE}">{UPL_PIC_LNK}</a></li>
<!-- END upload_pic -->
<!-- BEGIN register -->
                                                <li><a href="{REGISTER_TGT}" title="{REGISTER_TITLE}">{REGISTER_LNK}</a></li>
<!-- END register -->
<!-- BEGIN login -->
                                                <li><a href="{LOGIN_TGT}" title="{LOGIN_LNK}">{LOGIN_LNK}</a></li>
<!-- END login -->

                                        </ul>

"

[Gizmo]

Ummmm.... did you edit $template_sys_menu in the theme.php?

[kenjadams]

No I didnt edit anything, I just switched to this theme, I was using the Connections one. It worked at first but later I got this error. What should I do, should I edit that file?

[Gizmo]

Download the theme again as it's possible a file is corrupted. I also assume you are using the latest gallery version.

[kenjadams]

Thanks, i downloaded it again and now its working.

[Fabrian]

I don't know if it's me or not, but it seems that intermediate photos look a bit choppy with this theme.  Looking at the same intermediate image with any other theme I use, for example Orange Sky, it's smooth and clear. 

[Gizmo]

Hi Fabrian,

In the theme.php are 2 functions that I've edited to force intermediate images wider than 440 pixels to be scaled down to this size. The problem could be that images smaller than this may be scaled up which may be your issue. The reason for this is because this is a fixed narrow theme and if you try to full large intermediate images at full scale, it would break the theme. If you haven't any large intermediate images in your gallery, you can delete these functions which are below.

Code Select Expand


/* Image scaled version
* Uses new function: compute_img_size_max() to set max intermediate image size for narrow themes
*/

function theme_html_picture()
{
    global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER;
    global $album, $comment_date_fmt, $template_display_media;
    global $lang_display_image_php, $lang_picinfo;

    $pid = $CURRENT_PIC_DATA['pid'];
    $pic_title = '';

    if (!isset($USER['liv']) || !is_array($USER['liv'])) {
        $USER['liv'] = array();
    }
    // Add 1 to hit counter
    if (!USER_IS_ADMIN && !in_array($pid, $USER['liv']) && isset($_COOKIE[$CONFIG['cookie_name'] . '_data'])) {
        add_hit($pid);
        if (count($USER['liv']) > 4) array_shift($USER['liv']);
        array_push($USER['liv'], $pid);
    }

    if($CURRENT_PIC_DATA['pwidth'] > $CONFIG['picture_width']){
      $condition = true;
    }else{
     $condition = false;
    }

    if ($CURRENT_PIC_DATA['title'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['title'] . "\n";
    }
    if ($CURRENT_PIC_DATA['caption'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['caption'] . "\n";
    }
    if ($CURRENT_PIC_DATA['keywords'] != '') {
        $pic_title .= $lang_picinfo['Keywords'] . ": " . $CURRENT_PIC_DATA['keywords'];
    }

    if (!$CURRENT_PIC_DATA['title'] && !$CURRENT_PIC_DATA['caption']) {
        template_extract_block($template_display_media, 'img_desc');
    } else {
        if (!$CURRENT_PIC_DATA['title']) {
            template_extract_block($template_display_media, 'title');
        }
        if (!$CURRENT_PIC_DATA['caption']) {
            template_extract_block($template_display_media, 'caption');
        }
    }

    $CURRENT_PIC_DATA['menu'] = html_picture_menu(); //((USER_ADMIN_MODE && $CURRENT_ALBUM_DATA['category'] == FIRST_USER_CAT + USER_ID) || ($CONFIG['users_can_edit_pics'] && $CURRENT_PIC_DATA['owner_id'] == USER_ID && USER_ID != 0) || GALLERY_ADMIN_MODE) ? html_picture_menu($pid) : '';

    if ($CONFIG['make_intermediate'] && $condition ) {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'normal');
    } else {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    }

    $image_size = compute_img_size_max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']);

    $pic_title = '';
    $mime_content = cpg_get_type($CURRENT_PIC_DATA['filename']);


    if ($mime_content['content']=='movie' || $mime_content['content']=='audio') {

        if ($CURRENT_PIC_DATA['pwidth']==0 || $CURRENT_PIC_DATA['pheight']==0) {
            $CURRENT_PIC_DATA['pwidth']  = 320; // Default width

            // Set default height; if file is a movie
            if ($mime_content['content']=='movie') {
                $CURRENT_PIC_DATA['pheight'] = 240; // Default height
            }
        }

        $ctrl_offset['mov']=15;
        $ctrl_offset['wmv']=45;
        $ctrl_offset['swf']=0;
        $ctrl_offset['rm']=0;
        $ctrl_offset_default=45;
        $ctrl_height = (isset($ctrl_offset[$mime_content['extension']]))?($ctrl_offset[$mime_content['extension']]):$ctrl_offset_default;
        $image_size['whole']='width="'.$CURRENT_PIC_DATA['pwidth'].'" height="'.($CURRENT_PIC_DATA['pheight']+$ctrl_height).'"';
    }

    if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
            $winsizeX = $CURRENT_PIC_DATA['pwidth']+5;  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight']+3; //the +'s are the mysterious FF and IE paddings
            $pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
            $pic_title = $lang_display_image_php['view_fs'] . "\n==============\n" . $pic_title;
            $pic_html .= "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"intermed_image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"intermed_image\" border=\"0\" alt=\"\" /><br />\n";
        }
    } elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"intermed_image\" /></a>\n<br />";
    } else {
        $autostart = ($CONFIG['media_autostart']) ? ('true'):('false');

        $players['WMP'] = array('id' => 'MediaPlayer',
                                'clsid' => 'classid="" ',
                                'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ',
                                'mime' => 'type="application/x-mplayer2" ',
                               );
        $players['RMP'] = array('id' => 'RealPlayer',
                                'clsid' => 'classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" ',
                                'codebase' => '',
                                'mime' => 'type="audio/x-pn-realaudio-plugin" '
                               );
        $players['QT']  = array('id' => 'QuickTime',
                                'clsid' => 'classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
                                'codebase' => 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" ',
                                'mime' => 'type="video/x-quicktime" '
                               );
        $players['SWF'] = array('id' => 'SWFlash',
                                'clsid' => ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ',
                                'codebase' => 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ',
                                'mime' => 'type="application/x-shockwave-flash" '
                               );
        $players['UNK'] = array('id' => 'DefaultPlayer',
                                'clsid' => '',
                                'codebase' => '',
                                'mime' => ''
                               );

        if (isset($_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'])) {
            $user_player = $_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'];
        } else {
            $user_player = $mime_content['player'];
        }

                // There isn't a player selected or user wants client-side control
        if (!$user_player) {
            $user_player = 'UNK';
        }

        $player = $players[$user_player];

        $pic_html  = '<object id="'.$player['id'].'" '.$player['clsid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';
        $pic_html .= "<param name=\"autostart\" value=\"$autostart\" /><param name=\"src\" value=\"". $picture_url . "\" />";
        $pic_html .= '<embed '.$image_size['whole'].' src="'. $picture_url . '" autostart="'.$autostart.'" '.$player['mime'].'></embed>';
        $pic_html .= "</object><br />\n";
    }

    $CURRENT_PIC_DATA['html'] = $pic_html;
    $CURRENT_PIC_DATA['header'] = '';
    $CURRENT_PIC_DATA['footer'] = '';

    $CURRENT_PIC_DATA = CPGPluginAPI::filter('file_data',$CURRENT_PIC_DATA);

    $params = array('{CELL_HEIGHT}' => '100',
        '{IMAGE}' => $CURRENT_PIC_DATA['header'].$CURRENT_PIC_DATA['html'].$CURRENT_PIC_DATA['footer'],
        '{ADMIN_MENU}' => $CURRENT_PIC_DATA['menu'],
        '{TITLE}' => bb_decode($CURRENT_PIC_DATA['title']),
        '{CAPTION}' => bb_decode($CURRENT_PIC_DATA['caption']),
        );

    return template_eval($template_display_media, $params);
}

function compute_img_size_max($width, $height)
{
         global $CONFIG;
        $thumb_use=$CONFIG['thumb_use'];
        $max = 440;
        if($thumb_use=='ht') {
          $ratio = $height / $max;
        } elseif($thumb_use=='wd') {
          $ratio = $width / $max;
        } else {
          $ratio = max($width, $height) / $max;
        }
        if ($ratio > 1.0) {
                $image_size['reduced'] = true;
        }
        $ratio = max($ratio, 1.0);
        $image_size['width'] = ceil($width / $ratio);
        $image_size['height'] = ceil($height / $ratio);
        $image_size['whole'] = 'width="'.$image_size['width'].'" height="'.$image_size['height'].'"';
        if($thumb_use=='ht') {
          $image_size['geom'] = ' height="'.$image_size['height'].'"';
        } elseif($thumb_use=='wd') {
          $image_size['geom'] = 'width="'.$image_size['width'].'"';
        } else {
          $image_size['geom'] = 'width="'.$image_size['width'].'" height="'.$image_size['height'].'"';
        }



        return $image_size;
}


[Fabrian]

That did it Gizmo.  I commented out the code you stated above and my intermediate image in the theme got a bit smaller, so it looks like the code was forcing it larger.  Thanks man