forum.coppermine-gallery.net
Support => cpg1.5 themes (visuals) => cpg1.5.x Support => cpg1.5 theme contributions => Topic started by: Jeff Bailey on August 04, 2012, 05:31:07 am
-
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
-
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.
-
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.
-
Is there a demo of this anywhere?
-
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)
-
Seems like it only displays the first page of thumbnails (no pages shown at the bottom)
-
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.
-
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 position: absolute; from cpg_pin_sub_bar as a quick & dirty fix.
-
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
-
Thats technically the point of this theme. The easiest way is probably to convert everything back to tables.
-
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.
-
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:
<div class="tabDiv">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
{TABS}
</tr>
</table>
</div>
3.and in style.css:
.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 --> :
<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 --> :
<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>
-
File information,Rating,Filmstrip
1. DELETED from theme.php all this functions:
/******************************************************************************
** 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) ? '' : '&cat=' . $cat;
$date_link = $date=='' ? '' : '&date=' . $date;
if ($superCage->get->getInt('uid')) {
$uid_link = '&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)) ? "&page=$page" : '';
$target = "displayimage.php?album=$aid$cat_link$date_link&pid={$thumb['pid']}$uid_link&msg_id={$thumb['msg_id']}$page#comment{$thumb['msg_id']}";
} else {
$target = "displayimage.php?album=$aid$cat_link$date_link&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":
/******************************************************************************
** 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:
<li>
<a href="{TOPRATED_TGT}" title="{TOPRATED_LNK}" rel="nofollow"><span>{TOPRATED_LNK}</span></a>
</li>
-
In style.css I added:
#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).
-
I hope I did not forgot something.
DEMO: http://www.allvip.us/cpg/test/index.php?theme=pinmine (http://www.allvip.us/cpg/test/index.php?theme=pinmine)
-
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.
-
Compare to my curve masonry this theme is so much better.
AWESOME!
-
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.
-
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)
-
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.
-
OK.
stills some problems with file information after closing pic info and refresh and open pic info again.
-
fix it: on refresh is looking ok now but I can not make picinfo div to show 100% height all the time.
sometimes the div loads with a smaller height and the text is out of the div.
As a quick fix I added min-width and oveflow:scroll for div picinfo.
I also updated the code I posted on page 1 ( I only edited the post about style.css)
I just deleted the zip file (is attached to first post)
-
Please use meaningful file names. The latest version was "cpg1.5.x_theme_pinmine_v1.4.zip", so the file you attached should be named "cpg1.5.x_theme_pinmine_v1.5.zip".
-
done.
albums admin buttons are missing but album properties,edit files,delete album can be access from Files - Albums.
-
I just added version 1.6 to the initial post, which mainly removes the theme select list.
-
Nice Theme, but it appears a problem on my page.
When Windopw is Restored and change size, the Columns decrease and thumbs wrap Responsively. That's fine :)
But When I maximize the Window again, the thumbs are not alligned and the Thumbs of the Columns that were wraped Are some Dozens of pixels Higher than those of the First Columns.
See for YourSelves.
http://mobilephonesphotography.gr/cpm/index.php
CanNot think what might cause that.
Am I Doing Something Wrong ?
-
No.You are not doing anything wrong.
The theme looks fine on all sizes monitors but when window is restored masonry ignores for some reason the 100% width of title div and positions 2 thumbnails on the same row like the title.Same happens even for category list and other.
Since that happens only on browser resize and then restore I don't think is a problem.Users don't usually play with the browser.
The initial theme (first zip file) had a fixed width (see reply#15) that fixed that problem but that makes the theme not responsive.
I also noticed that empty categories (has no subcategory or albums) are not showing in the category list and I forgot to enable album list pagination (tabs).
I will work on the theme and post a new version in max two days.I do not have time to do it now.
-
For the problem:browser resize and then restore is nothing I can do.I tryed masonry reload or bindResize but nothing.
The only way that worked is to use the latest jquery version jquery-1.11.1.min because coppermine has a old version of jquery : jquery-1.3.2.
Andre made a plugin that replaces jquery-1.3.2.js with jquery-1.11.1.min.js on every page (coppermine works fine with 1.11.1) :
Jqeury.min.js conflict thread Reply #48 http://forum.coppermine-gallery.net/index.php/topic,76858.40.html (http://forum.coppermine-gallery.net/index.php/topic,76858.40.html)
I made some edits to the theme because I forgot: album list pagination (tabs),pagination for albums when Config - Album list view - Show first level album thumbnails in categories is ON and empty categories were not showing.Details:I updated Reply #11.
I even forgot some extra wrong code (colspan="{THUMB_COLS}" style="padding: 0px;"> in theme.php $template_thumbnail_view) in version 1.5 and 1.6 so please delete zip 1.5 and 1.6.
I delete the zip because was attached by coppermine dev team to first post.
Thanks Jeff.
-
Updated first post with version 1.7 (changed the title from 1.5 in allvip's post).
-
Please don't yell at me because I know this is a stupid question but I just can not find the answer in any of the documentation or in other threads. I am using this template and I want to change the text header to an image header. I know I go to the stylesheet.css but I'm not sure where and what code to put in. Any help would be greatly appreciated!
-
I want to change the text header to an image header.
Open style.css and:
find (http://find) :
#cpg_logo_block_logo {
text-align: center;
}
replace with:
#cpg_logo_block_logo {
text-align: center;
background-image: url(images/1.jpg);
background-repeat: no-repeat;
height: 5rem;
}
find:
#cpg_pin_sub_bar {position: absolute; top: 44px; right: 0; left: 0; text-align: center; font-size: 13px; color: #8c7e7e; background-color: #faf7f7; border-top: 1px solid #cfcaca; z-index: 102; box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);}
replace with:
#cpg_pin_top_bar {
#cpg_pin_sub_bar {position: absolute; top: 5rem; right: 0; left: 0; text-align: center; font-size: 13px; color: #8c7e7e; background-color: #faf7f7; border-top: 1px solid #cfcaca; z-index: 102; box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);}
Put the image you want to use in the images folder and replace background-image: url(images/1.jpg); in the above code with your image name.
Also replace 5rem in both code with your desired number like 8rem to be bigger.
You also can remove from template.html to remove text header:
<a href="index.php" style="text-decoration:none;"><span class="spanh1">{GAL_NAME}</span></a>
or position to the left:
change in #cpg_logo_block_logo style text-align: center; with text-align: left;
-
Another way because I don't exactly what you want.
Open template.html and:
find:
<a href="index.php" style="text-decoration:none;"><span class="spanh1">{GAL_NAME}</span></a>
replace with: (http://replace with:)
<img src="themes/pinmine/images/1.jpg" border="0" width="260" height="60" alt="" /><a href="index.php" style="text-decoration:none;"><span class="spanh1">{GAL_NAME}</span></a>
Open style.css:
find:
#cpg_logo_block_logo {
text-align: center;
}
replace with: (http://replace with:)
#cpg_logo_block_logo {
text-align: left;
height: 5rem;
padding: 2%;
}
find
#cpg_pin_sub_bar {position: absolute; top: 44px; right: 0; left: 0; text-align: center; font-size: 13px; color: #8c7e7e; background-color: #faf7f7; border-top: 1px solid #cfcaca; z-index: 102; box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);}
replace with:
#cpg_pin_sub_bar {position: absolute; top: 8rem; right: 0; left: 0; text-align: center; font-size: 13px; color: #8c7e7e; background-color: #faf7f7; border-top: 1px solid #cfcaca; z-index: 102; box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);}
You also can remove from template.html :
<a href="index.php" style="text-decoration:none;"><span class="spanh1">{GAL_NAME}</span></a>
to remove text header