Theme Pinmine for cpg1.5.x

[Jeff Bailey]

This is a theme based on Pintrest.

A word of warning:
Some features have been disabled or removed to keep the theme from breaking.
Some examples are:

• File information
• Rating
• Filmstrip

Attached

Update:
Added placeholder for the contact button if the admin has it turned on for guests.
Please read the thread for updates made by allvip in v1.7

[nickelas]

Thank you, looks like  a great theme, really appreciate the minimalistic interface!

It looks like the contact button (and panel) is only displayed when logged in. I would put the panel as a submenu to album and the contact button at the top, next to Login.

[Jeff Bailey]

Not sure what you mean by

I would put the panel as a submenu to album

Added the contact button as requested. Attached to initial post.

[St. Anger]

Is there a demo of this anywhere?

[phill104]

http://coppermine-gallery.net/demo/cpg15x/?theme=pinmine

*edit - It currently breaks our header. Maybe Andre could take a look as I have no tools to do so this week (ipad only)

[nickelas]

Seems like it only displays the first page of thumbnails (no pages shown at the bottom)

[Jeff Bailey]

pagination wasn't something I took the time too complete. That's what the warning in the first post is about

This was more of a proof of concept. If you look though the code I believe I only commented out pagination, I don't have the time to work on that know. Of course, anyone is welcome to edit it and upload improved versions.

[Αndré]

http://coppermine-gallery.net/demo/cpg15x/?theme=pinmine

*edit - It currently breaks our header. Maybe Andre could take a look as I have no tools to do so this week (ipad only)

I just removed the z-index from cpg_pin_top_bar and cpg_pin_sub_bar and also removed

Code Select Expand

position: absolute; from cpg_pin_sub_bar as a quick & dirty fix.

[harky]

hi, this theme is nice but than the external box is not standardize as it set according to my thumbnail

is  there anyway to make the external box standardize? so it can displayed neatly?

e.g like this
http://i.imgur.com/E0Tgt.jpg

[Jeff Bailey]

Thats technically the point of this theme. The easiest way is probably to convert everything back to tables.

[allvip]

I want to such much work to make masonry work with coppermine but a masonry theme already exists and is much better.

I don't understand why fixed width for main block and logo.
I will remove it.hope it will work the same without it.

[allvip]

File information,Rating,Filmstrip,pagination (tabs) ON

UPDATED 1,2 AND 3 May 17, 2014

pagination (tabs) for album thumbnails and album list.
I did not enabled the albums thumbnails for album_list_cat (that shows when in config is enabled:Album list view - Show first level album thumbnails in categories).

1.in theme.php function theme_display_thumbnails and theme_display_album_list  end_pin_div();  was after /*endtable();*/. moved it after   echo $footer;


2.in theme.php function $template_thumbnail_view after <!-- BEGIN tabs --> and in function $template_album_list after <!-- BEGIN tabs --> I added:

Code Select Expand


                <div class="tabDiv">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>       
                                       {TABS}
                                </tr>
                        </table>
                </div>



3.and in style.css:

Code Select Expand


.tabDiv {
        width:100%;
        margin:10px 0 10px 0;
}
.tabDiv .tableh1{
        font-size:1em;
}


May 17, 2014 - Reason for editing:  I forgot to enable even album list pagination (code number 1 and code number 2) and to remove from code number 2 (colspan="{THUMB_COLS}" style="padding: 0px;">.

May 21, 2014- Updated style.css code number 3

Added May 21, 2014: if you want pagination for albums when Config - Album list view - Show first level album thumbnails in categories is ON then add in function $template_album_list_cat after <!-- BEGIN c_tabs --> :

Code Select Expand


                <div class="tabDiv cpg_pin_cell cpg_pin_table_cell">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>       
                                       {TABS}
                                </tr>
                        </table>
                </div>



Added May 21, 2014:  Empty categories (has no subcategory or albums) are not showing in the category list.
Add in function $template_cat_list after <!-- BEGIN catrow_noalb --> :

Code Select Expand


<div class="cpg_pin_cell cpg_pin_table_cell">
<table border="0" width="100%">
<tr>
<td><span style="display:inline;">{CATEGORY}: </span><span class="catlink" style="display:inline;">{CAT_TITLE}</span>{CAT_DESC}</td>
</tr>
</table>
</div>


[allvip]

File information,Rating,Filmstrip

1. DELETED from theme.php all this functions:

Code Select Expand



/******************************************************************************
** Section <<<theme_display_film_strip>>> - START
******************************************************************************/
// Function to display the film strip
function theme_display_film_strip(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $pos, $sort_options, $mode = 'thumb', $date='', $filmstrip_prev_pos, $filmstrip_next_pos,$max_block_items,$thumb_width)
{
    global $CONFIG, $THEME_DIR;
    global $template_film_strip, $lang_film_strip, $lang_common, $pic_count,$mar_pic;

    $superCage = Inspekt::makeSuperCage();

    static $template = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $spacer = '';

    if ((!$template)) {
        $template = $template_film_strip;
        $thumb_cell = str_replace('<td', '<td align="center"', template_extract_block($template, 'thumb_cell')); // center thumbnails
        $empty_cell = template_extract_block($template, 'empty_cell');
    }

    $cat_link = is_numeric($aid) ? '' : '&amp;cat=' . $cat;
    $date_link = $date=='' ? '' : '&amp;date=' . $date;

    if ($superCage->get->getInt('uid')) {
        $uid_link = '&amp;uid=' . $superCage->get->getInt('uid');
    } else {
        $uid_link = '';
    }

    $i = 0;
    $thumb_strip = '';
    foreach($thumb_list as $thumb) {
        $i++;
        if ($mode == 'thumb') {
            if ($thumb['pos'] == $pos && !$superCage->get->keyExists('film_strip')) {
                $thumb['image'] = str_replace('class="image"', 'class="image middlethumb"', $thumb['image']);
            }
            // determine if thumbnail link targets should open in a pop-up
            if ($CONFIG['thumbnail_to_fullsize'] == 1) { // code for full-size pop-up
                if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
                    $target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['login_needed'],'','','','').'\');';
                } elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
                    $target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['access_intermediate_only'],'','','','').'\');';
                } else {
                    $target = 'javascript:;" onclick="MM_openBrWindow(\'displayimage.php?pid=' . $thumb['pid'] . '&fullsize=1\',\'' . uniqid(rand()) . '\',\'scrollbars=yes,toolbar=no,status=no,resizable=yes,width=' . ((int)$thumb['pwidth']+(int)$CONFIG['fullsize_padding_x']) .  ',height=' .   ((int)$thumb['pheight']+(int)$CONFIG['fullsize_padding_y']). '\');';
                }
            } elseif ($aid == 'lastcom' || $aid == 'lastcomby') {
                $page = cpg_get_comment_page_number($thumb['msg_id']);
                $page = (is_numeric($page)) ? "&amp;page=$page" : '';
                $target = "displayimage.php?album=$aid$cat_link$date_link&amp;pid={$thumb['pid']}$uid_link&amp;msg_id={$thumb['msg_id']}$page#comment{$thumb['msg_id']}";
            } else {
                $target = "displayimage.php?album=$aid$cat_link$date_link&amp;pid={$thumb['pid']}$uid_link#top_display_media";
            }
            $params = array(
                '{LINK_TGT}' => $target,
                '{THUMB}' => $thumb['image'],
                '{ONE_WIDTH}'  => "width:".$thumb_width."px; float: left" ,
                );
        } else {
            $params = array(
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{ONE_WIDTH}'  => "width:".$thumb_width."px; float: left" ,
                );
        }
        $thumb_strip .= template_eval($thumb_cell, $params);
    }

    if (defined('THEME_HAS_FILM_STRIP_GRAPHICS')) {
        $tile1 = $THEME_DIR . 'images/tile1.gif';
        $tile2 = $THEME_DIR . 'images/tile2.gif';
    } elseif (defined('THEME_HAS_FILM_STRIP_GRAPHIC')) {
        $tile1=$tile2=$THEME_DIR . 'images/tile.gif';
    } else {
        $tile1=$tile2= 'images/tile.gif';
    }

    if (defined('THEME_HAS_NAVBAR_GRAPHICS')) {
        $location = $THEME_DIR;
    } else {
        $location= '';
    }
    $max_itme_width_ul = $max_block_items;
    if(($max_block_items%2)==0){
        $max_itme_width_ul = $max_block_items +1;
    }
    $set_width_to_film = "width:".($max_block_items*($thumb_width+4))."px; position:relative;";

    $params = array('{THUMB_STRIP}' => $thumb_strip,
        '{COLS}' => $i,
        '{TILE1}' => $tile1,
        '{TILE2}' => $tile2,
        '{SET_WIDTH}'  => $set_width_to_film,
        );

    ob_start();
    /*echo '<div id="filmstrip">';
    starttable($CONFIG['picture_table_width']);
    echo template_eval($template, $params);
    endtable();
    echo '</div>';*/
    $film_strip = ob_get_contents();
    ob_end_clean();

    return $film_strip;
}
/******************************************************************************
** Section <<<theme_display_film_strip>>> - END
******************************************************************************/



/******************************************************************************
** Section <<<$template_film_strip>>> - START
******************************************************************************/
// HTML template for filmstrip display
$template_film_strip = <<<EOT
<!-- BEGIN thumb_cell -->
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
<!-- END empty_cell -->

EOT;
/******************************************************************************
** Section <<<$template_film_strip>>> - END
******************************************************************************/

/******************************************************************************
** Section <<<theme_display_image>>> - START
******************************************************************************/
function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
    global $CONFIG, $LINEBREAK;

    $superCage = Inspekt::makeSuperCage();

    $width = $CONFIG['picture_table_width'];

    echo '<a name="top_display_media"></a>'; // set the navbar-anchor
    starttable();
    echo $nav_menu;
    endtable();

    starttable();
    echo $picture;
    endtable();
    /*if ($CONFIG['display_film_strip'] == 1) {
        echo $film_strip;
    }



    echo $votes;

    $picinfo = $superCage->cookie->keyExists('picinfo') ? $superCage->cookie->getAlpha('picinfo') : ($CONFIG['display_pic_info'] ? 'block' : 'none');
    echo $LINEBREAK . '<div id="picinfo" style="display: '.$picinfo.';">' . $LINEBREAK;
    starttable();
    echo $pic_info;
    endtable();
    echo '</div>' . $LINEBREAK;*/
        echo '<a name="comments_top"></a>';
starttable();
    /*echo '<div id="comments">' . $LINEBREAK;*/
        echo $comments;
        /*echo '</div>' . $LINEBREAK;*/
endtable();
echo $LINEBREAK;
}
/******************************************************************************
** Section <<<theme_display_image>>> - END
******************************************************************************/

/******************************************************************************
** Section <<<$template_image_rating>>> - START
******************************************************************************/
// HTML template for the image rating box
$template_image_rating = <<<EOT
EOT;
/******************************************************************************
** Section <<<$template_image_rating>>> - END
******************************************************************************/
/******************************************************************************
** Section <<<$template_image_rating_oldstyle>>> - START
******************************************************************************/
// HTML template for the image rating box (old-style)
$template_image_rating_oldstyle = <<<EOT
EOT;
/******************************************************************************
** Section <<<$template_image_rating_oldstyle>>> - END
******************************************************************************/

/******************************************************************************
** Section <<<$template_img_navbar>>> - START
******************************************************************************/
// HTML template for the image navigation bar
$template_img_navbar = <<<EOT

        <tr>
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="{LOCATION}images/navbar/thumbnails.png" align="middle" border="0" alt="{THUMB_TITLE}" /></a></td>
<!-- BEGIN pic_info_button -->
<!-- END pic_info_button -->
<!-- BEGIN slideshow_button -->
                <!-- button will be added by displayimage.js -->
                <td id="slideshow_button" align="center" valign="middle" class="navmenu" width="48"></td>
<!-- END slideshow_button -->
                <td align="center" valign="middle" class="navmenu" width="100%">{PIC_POS}</td>
<!-- BEGIN report_file_button -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}" rel="nofollow"><img src="{LOCATION}images/navbar/report.png" border="0" align="middle" alt="{REPORT_TITLE}" /></a></td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}" rel="nofollow"><img src="{LOCATION}images/navbar/ecard.png"  border="0" align="middle" alt="{ECARD_TITLE}" /></a></td>
<!-- END ecard_button -->
<!-- BEGIN nav_start -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{START_TGT}" class="navmenu_pic" title="{START_TITLE}"><img src="{LOCATION}images/navbar/{START_IMAGE}" border="0" align="middle" alt="{START_TITLE}" /></a></td>
<!-- END nav_start -->
<!-- BEGIN nav_prev -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}"><img src="{LOCATION}images/navbar/{PREV_IMAGE}" border="0" align="middle" alt="{PREV_TITLE}" /></a></td>
<!-- END nav_prev -->
<!-- BEGIN nav_next -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}"><img src="{LOCATION}images/navbar/{NEXT_IMAGE}" border="0" align="middle" alt="{NEXT_TITLE}" /></a></td>
<!-- END nav_next -->
<!-- BEGIN nav_end -->
                <td align="center" valign="middle" class="navmenu" width="48"><a href="{END_TGT}" class="navmenu_pic" title="{END_TITLE}"><img src="{LOCATION}images/navbar/{END_IMAGE}" border="0" align="middle" alt="{END_TITLE}" /></a></td>
<!-- END nav_end -->

        </tr>

EOT;
/******************************************************************************
** Section <<<$template_img_navbar>>> - END
******************************************************************************/



2.Added in theme.php the original functions $template_image_rating and $template_image_rating_oldstyle.The only thing I changed is class="maintable" to class="maintableRate":

Code Select Expand


/******************************************************************************
** Section <<<$template_image_rating>>> - START
******************************************************************************/
// HTML template for the image rating box
$template_image_rating = <<<EOT
<table align="center" width="{WIDTH}" cellspacing="1" cellpadding="0" class="maintableRate">
    <tr>
        <td colspan="6" class="tableh2" id="voting_title"><strong>{TITLE}</strong> {VOTES}</td>
    </tr>
    <tr id="rating_stars">
        <td class="tableb" id="star_rating"></td>
    </tr>
    <tr class="noscript">
      <td class="tableb" colspan="6" align="center">
        <noscript>
           {JS_WARNING}
        </noscript>
      </td>
    </tr>
</table>
EOT;
/******************************************************************************
** Section <<<$template_image_rating>>> - END
******************************************************************************/



/******************************************************************************
** Section <<<$template_image_rating_oldstyle>>> - START
******************************************************************************/
// HTML template for the image rating box (old-style)
$template_image_rating_oldstyle = <<<EOT
<table align="center" width="{WIDTH}" cellspacing="1" cellpadding="0" class="maintableRate">
    <tr>
        <td colspan="6" class="tableh2" id="voting_title"><strong>{TITLE}</strong> {VOTES}</td>
    </tr>
    <tr id="rating_stars">
        <td class="tableb" id="star_rating">
            <table width="100%">
                <tr>
                    {RATING_IMAGES}
                </tr>
            </table>
        </td>
    </tr>
</table>
EOT;
/******************************************************************************
** Section <<<$template_image_rating_oldstyle>>> - END
******************************************************************************/


3.in theme.php after <!-- BEGIN toprated --> function // HTML template for sub menu and <!-- BEGIN toprated --> function $template_sub_menu I added:

Code Select Expand


                        <li>
                            <a href="{TOPRATED_TGT}" title="{TOPRATED_LNK}" rel="nofollow"><span>{TOPRATED_LNK}</span></a>
                        </li>


[allvip]

In style.css I added:

Code Select Expand


#filmstrip {
    position:relative;
    top:0;
    left:0;
    height:300px;
}
.maintableRate {
    position:relative;
    top:0;
    left:0;
}
#picinfo .masonry[style]{
    margin-left:0px!important;
    width:100%!important;
}
#picinfo{
    position:relative;
    top:0;
    left:0;
    min-height:300px;
    overflow:scroll;
}
#comments {
    position:relative;
    top:0;
    left:0;
    padding:50px 10px 0 10px;
}


AND  I added   word-wrap:break-word; to .thumb_filename (long file names go out of the div sometimes).

[allvip]

I hope I did not forgot something.

DEMO:  http://www.allvip.us/cpg/test/index.php?theme=pinmine

[allvip]

I also deleted  min-width: 933px;  width: 1200px; from .cpg_starttable_outer and .cpg_starttable_outer in style.css and style="width: 1170px;" from template.html.

It was a personal choice.I like more responsive layout for small scrrens and masonry to reposition on smaller monitors.

[allvip]

Compare to my curve masonry this theme is so much better.

AWESOME!

[Jeff Bailey]

Looks good, feel free to take over development of this.
When you have a release I (or another Dev or you if you have the rights) will edit the first post to include it and a credit to you.

[allvip]

Is think I said what is missing.
the dev team edits and reuploads the theme.
I do not want credit for it.
The hard and most important part was done by you.

THANKS A LOT for this theme.(even the categories have masonry-I love it)

[Αndré]

I personally won't apply the edits you posted. If you think you're done, please attach the new version to your thread and a dev will attach it to the initial post.