Ocadia - Theme for cpg1.4.x and WordPress 2.0

[Gizmo]

Hi All,

Here is the Ocadia theme that I've ported from a WordPress theme designed by Beccary - http://beccary.com/. If you're interested in starting (or have a blog) and want to integerate Coppermine to it then check this out.

Now for the technical stuff. In order to handle the width of some of the Configuration items (groups, users, ecards) in the main table, a scroll bar is needed but hidden for all other uses in the theme if the following criteria are met. To prevent the scroll bar from being visible in the gallery, it's best to use 4 columns for thumbnails (Config => Thumbnail view => Number of columns on thumbnail page = 4) and 4 items in the film strip (Config => Image view => Number of items in film strip = 4). The default thumbnail size of 100 pixels is also recommended (Config => Files and thumnails settings => Max dimension of a thumbnail ** = 100). Also, this theme is really geared towards intermediate photos sizes of less than 460 pixels and since the default in Coppermine is 400, it works great but if you try to go above 460 or so, you will get the scroll bar as when viewing the Coppermine demo. This setting is in Config => Files and thumbnails settings => Max width or height of an intermediate picture/video ** = 400 (default). The popup size can be any size though. Most generally everyone has these set by the defaults and therefore should have no problem.

I've tested this theme on FF v1.5x and IE v6.0x with screen resolutions of 1400x1050 & 1024x768 and found no visual issues. If you do, please post here.

Please enjoy this theme and make all the changes you need to suit your gallery.

Cheers,

Billy   

[Gizmo]

Well, that didn't take long. After many hours of testing and fine tuning, I thought it was good but then after downloading my own theme, I found a visual issue with the scrollbar showing all the time in FF. Wasn't there beore so I fixed the issue and upload the lasted version in my initial post. It's called ocadia v1.01.

Sorry for those who had already downloaded it. 

[Joachim Müller]

Demo - Download - Screenshot

(Sidenote: make sure that the folder name is "ocadia". May not be obvious for everyone, as the folder name in the original zip differs)

[Gizmo]

My mistake. I should have removed the version number from the folder before zipping it up. One could remove it after unzipping the file and before uploading.

[Fabrian]

Is it me, or is anyone else having problems with IE7 breaking this theme?  I get scroll bars in the main content area that I can't seem to get rid of in IE7.  BTW, hope all is well with Gizmo, haven't seem him around in quite a while.

[Fabrian]

I believe this issue follows with the original Ocadia for WP since embedding a youtube video breaks that one as well (only when not logged in for WP).

[artefatta]

Gizmo,
have you fixed that issue with a scrollbar?
It comes on intermediate image page. Looks not really good.  :-\
Relaxing theme, really cute, but..
www.artefatta.biz

[Hein Traag]

Using this for my own personal cpg/wordpress combo. Works very nice. It amazed some friends of mine who had to look twice when switching from wordpress to cpg and back again.

Nice work Gizmo

Hein

[Gizmo]

Hi All,

Here is a updated version of the Ocadia theme. A list of upgrade and fixes are:

• fixed user gallery issue where the albums are not displayed correctly
• fixed bbcode issue when used in album description
• fixed the scroll bar issue that appeared on the some pages namely the intermediate viewing page
• commented theme.php to make understanding easier for new users
• added a picture frame around the images displayed on the intermediate page
• added variables in the theme.php to force the needed changes so the theme doesn't break. See below.
• added a truncation script to shorten long album descriptions in the categories pages but will display full description when viewing album. This will make the categories much cleaner looking.

Code Select Expand


// These parameters overide what the user inputs in the Configuration setup to prevent the theme from breaking.
$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'] = 2; // sets "Number of columns for the album list = 3"
$CONFIG['first_level'] = 0; //sets "Show first level album thumbnails in categories = no".


From the first post, remember this theme has a script for resizing images so they fit correctly on the intermediate page. The images are currently set for a width of 400px. This means any image with a width larger than 400px will be resized down. But an image less than 400px wide will be increased to 400 which may distort the image some. Most people leave the default set to 400 so it shouldn't be a problem in most cases but you are now aware of this.

I've tested this theme without issue on FireFox 3.0.1 (Mac & PC), Safari 3.1.2 and IE 7.0.5.X (PC). Sorry I do not have IE 6.X on my PC and will not test this browser version. As always let me know here if you encounter any problems.

Enjoy!

Billy

[Update - Aug. 10, 2008] I've posted a new improved version here with additional details.

[Joachim Müller]

Thanks for the fix. I have uploaded the package to the downloads section and the demo and changed the link in my first posting on this thread accordingly.

Joachim

[Gizmo]

Hi All,

The fix for truncating large image descriptions has been found and fixed. I had to remove it as this issue was what was causing the user galleries to display all messed up. I spent a lot of time looking for the error and testing to make sure it's correct now so I've incorporated into this new upload (Ocadia version 1.2). Now if you have long image descriptions, they will be truncated when displaying within an album or on the strip of latest uploads or randon files but displayed in full when viewing the image on the intermediate page. This will make the albums look cleaner without all the text underneath the image.

Cheers and thanks for your patience.

Billy

[Joachim Müller]

This must have been a productive weekend for you, with so many themes overhauled . Thanks for your contributions. However, there are some issues with the version numbering scheme of Ocadia: the version that is in the downloads repository is already named cpg1.4.x_theme_ocadia_v1.3.zip, so a newer version should be 1.4, not 1.2. The readme.txt contained leaves me none the wiser - please review.
If possible, could you rename your files when attaching to avoid confusion for end users: the naming scheme for themes is "cpgX.Y.Z_theme_ThemeName_ThemeVersion.zip" (e.g. "cpg1.4.x_theme_ocadia_v1.3.zip") - thanks.
Additionally, your Mac leaves system files in the archives (that are probably hidden when you view them on your Mac), but they are visible for Windows and Linux users, which might lead newbies into believing that they need to upload those folders to their webserver as well. This in turn will make those folders show up on coppermine's theme selector, which is not a good thing. Is there any way to stop your Mac adding such files into the zip archives? If not, that's no great deal, since I can remove them easily before uploading the files to the sf.net repository - I just wanted to let you know in case users download your attachments here instead of the copies on sf.net (side note to end users: please try to use sf.net to download, not the copies here, as sf.net have a load balancing system which we don't have here).

Cheers

Joachim

[Gizmo]

Hey Joachim,

With the Olympics on, I had lots of time during commercials to work on these themes. I finally figured out the user gallery issue so from there it was full speed ahead to get all the other themes updated. Most were done early on in my CPG days and being fixed width most didn't look all that good with the standard CPG layouts so I wanted to clean them up. I took note of all the downloads and I was rather surprised to see that they were quite high so I wanted to make them even better (I hope everyone comes back and gets those numbers back up  ). I've fix the version numbering on Ocadia and will start to use your suggested method from here on. Thanks for letting me know that my Mac is adding extra files so I will either find a solution or use Windows for zipping. It's not a problem because I run Windows in a VM which is quite fast (faster than my Dell that even has a faster processor  ). I have a couple more themes finished so I'll get them posted soon. Thanks for your support and getting these posted up on the demo site.

Cheers,

Billy

[Hein Traag]

Looks to me like the Gizmo train is back on track and at full speed  . Good to have you back Gizmo.

[Gizmo]

Many thanks Hein!  After all this time it's like coming back to a big comfy chair.

[Hein Traag]

Gizmo could you help out. I am trying to get the admin menu in the right column instead of on top of the gallery. Can't figure out what needs to be changed.

[Gizmo]

Hi Hein,

To move the admin menu to the right sidebar follow these instructions. When in admin mode there are a couple of pages that are wide such as the Users and Groups pages so I've added my tweak to keep these pages from extending over the right sidebar blocking the links. I've also attached the updated theme here. This is going to be long!

1. In the template.html file after

Code Select Expand


<!-- Start Sidebar -->
   <div id="sidebar">

      <ul>


add

Code Select Expand

{ADMIN_MENU}

to get this

Code Select Expand


<!-- Start Sidebar -->
   <div id="sidebar">

      <ul>

{ADMIN_MENU}


2. In template.html
replace

Code Select Expand

<div class="post">

with

Code Select Expand

{SCROLLBAR} <!--custom token for setting conditional CSS style for scrollbar in content area-->

3. In the style_wp.css file
add

Code Select Expand


.post_scrollbar {
padding: 1.2em 0 0 0;
overflow-x: auto; /* CPG Edit: handle CPG User & Group Managers overflow with scrollbar and custom token "{SCROLLBAR}" */
}


4. In the theme.php
replace

Code Select Expand


// HTML template for gallery admin menu
$template_gallery_admin_menu = <<<EOT

                <div align="center">
                <table cellpadding="0" cellspacing="1">
                        <tr>
<!-- BEGIN admin_approval -->
                                <td class="admin_menu" id="admin_menu_anim"><a href="editpics.php?mode=upload_approval" title="{UPL_APP_TITLE}">{UPL_APP_LNK}</a></td>
<!-- END admin_approval -->
                                <td class="admin_menu"><a href="admin.php" title="{ADMIN_TITLE}">{ADMIN_LNK}</a></td>
                                <td class="admin_menu"><a href="catmgr.php" title="{CATEGORIES_TITLE}">{CATEGORIES_LNK}</a></td>
                                <td class="admin_menu"><a href="albmgr.php{CATL}" title="{ALBUMS_TITLE}">{ALBUMS_LNK}</a></td>
                                <td class="admin_menu"><a href="groupmgr.php" title="{GROUPS_TITLE}">{GROUPS_LNK}</a></td>
                                <td class="admin_menu"><a href="usermgr.php" title="{USERS_TITLE}">{USERS_LNK}</a></td>
                                <td class="admin_menu"><a href="banning.php" title="{BAN_TITLE}">{BAN_LNK}</a></td>
                                <td class="admin_menu"><a href="reviewcom.php" title="{COMMENTS_TITLE}">{COMMENTS_LNK}</a></td>
                                </tr><tr>
<!-- BEGIN log_ecards -->
                                <td class="admin_menu"><a href="db_ecard.php" title="{DB_ECARD_TITLE}">{DB_ECARD_LNK}</a></td>
<!-- END log_ecards -->
                                <td class="admin_menu"><a href="picmgr.php" title="{PICTURES_TITLE}">{PICTURES_LNK}</a></td>
                                <td class="admin_menu"><a href="searchnew.php" title="{SEARCHNEW_TITLE}">{SEARCHNEW_LNK}</a></td>
                                <td class="admin_menu"><a href="util.php" title="{UTIL_TITLE}">{UTIL_LNK}</a></td>
                                <td class="admin_menu"><a href="profile.php?op=edit_profile" title="{MY_PROF_TITLE}">{MY_PROF_LNK}</a></td>
<!-- BEGIN documentation -->
                                <td class="admin_menu"><a href="{DOCUMENTATION_HREF}" title="{DOCUMENTATION_TITLE}" target="cpg_documentation">{DOCUMENTATION_LNK}</a></td>
<!-- END documentation -->
                        </tr>
                </table>
                </div>
EOT;


with

Code Select Expand


// HTML template for gallery admin menu
$template_gallery_admin_menu = <<<EOT

<li id="admin_menu">
<h2>Admin Menu</h2>
            <ul>
<!-- BEGIN admin_approval -->
                                <li><a href="editpics.php?mode=upload_approval" title="{UPL_APP_TITLE}">{UPL_APP_LNK}</a></li>
<!-- END admin_approval -->
                                <li><a href="admin.php" title="{ADMIN_TITLE}">{ADMIN_LNK}</a></li>
                                <li><a href="catmgr.php" title="{CATEGORIES_TITLE}">{CATEGORIES_LNK}</a></li>
                                <li><a href="albmgr.php{CATL}" title="{ALBUMS_TITLE}">{ALBUMS_LNK}</a></li>
                                <li><a href="groupmgr.php" title="{GROUPS_TITLE}">{GROUPS_LNK}</a></li>
                                <li><a href="usermgr.php" title="{USERS_TITLE}">{USERS_LNK}</a></li>
                                <li><a href="banning.php" title="{BAN_TITLE}">{BAN_LNK}</a></li>
                                <li><a href="reviewcom.php" title="{COMMENTS_TITLE}">{COMMENTS_LNK}</a></li>
<!-- BEGIN log_ecards -->
                                <li><a href="db_ecard.php" title="{DB_ECARD_TITLE}">{DB_ECARD_LNK}</a></li>
<!-- END log_ecards -->
                                <li><a href="picmgr.php" title="{PICTURES_TITLE}">{PICTURES_LNK}</a></li>
                                <li><a href="searchnew.php" title="{SEARCHNEW_TITLE}">{SEARCHNEW_LNK}</a></li>
                                <li><a href="util.php" title="{UTIL_TITLE}">{UTIL_LNK}</a></td>
                                <li><a href="profile.php?op=edit_profile" title="{MY_PROF_TITLE}">{MY_PROF_LNK}</a></li>
<!-- BEGIN documentation -->
                                <li><a href="{DOCUMENTATION_HREF}" title="{DOCUMENTATION_TITLE}" target="cpg_documentation">{DOCUMENTATION_LNK}</a></li>
<!-- END documentation -->
                        </ul>
</li>
EOT;


5. In theme.php
add

Code Select Expand


function scrollbar()
{
if ($_SERVER['PHP_SELF'] == 'usermgr.php' || $_SERVER['PHP_SELF'] == 'groupmgr.php') {
$content = '<div class="post_scrollbar">';
} else {
$content = '<div class="post">';
}
return $content;
}

// Function for writing a pageheader
function pageheader($section, $meta = '')
{
    global $CONFIG, $THEME_DIR;
    global $template_header, $lang_charset, $lang_text_dir;

    $custom_header = cpg_get_custom_include($CONFIG['custom_header_path']);
    $charset = ($CONFIG['charset'] == 'language file') ? $lang_charset : $CONFIG['charset'];

    header('P3P: CP="CAO DSP COR CURa ADMa DEVa OUR IND PHY ONL UNI COM NAV INT DEM PRE"');
        header("Content-Type: text/html; charset=$charset");
    user_save_profile();

    $template_vars = array('{LANG_DIR}' => $lang_text_dir,
        '{TITLE}' => $CONFIG['gallery_name'] . ' - ' . strip_tags(bb_decode($section)),
        '{CHARSET}' => $charset,
        '{META}' => $meta,
        '{GAL_NAME}' => $CONFIG['gallery_name'],
        '{GAL_DESCRIPTION}' => $CONFIG['gallery_description'],
        '{SYS_MENU}' => theme_main_menu('sys_menu'),
        '{SUB_MENU}' => theme_main_menu('sub_menu'),
        '{ADMIN_MENU}' => theme_admin_mode_menu(),
        '{CUSTOM_HEADER}' => $custom_header,
'{SCROLLBAR}' => scrollbar(),
        );

    echo template_eval($template_header, $template_vars);
}


If the pageheader function is already in your theme.php then add as above:

Code Select Expand

'{SCROLLBAR}' => scrollbar(),

This should do it! 

[Hein Traag]

Awesome Billy. I thank you once again for doing this. Makes the theme look that much nicer.