Take a look at:
Blankstrap - Bootstrap based theme v0.2
http://forum.coppermine-gallery.net/index.php/topic,76309.0.htmlTheme Pinmine for cpg1.5.x
http://forum.coppermine-gallery.net/index.php/topic,75270.0.html Curve masonry theme ( JavaScript grid layout theme) + bounceIn css
http://forum.coppermine-gallery.net/index.php/topic,76859.0.htmlGoogle images grid ( flickr images grid ). Responsive coppermine theme.
http://forum.coppermine-gallery.net/index.php/topic,78310.0.htmlIf you don't like any of the theme.STEP 1Paste this code in themes/your_theme_name/theme.php (first make sure function $template_thumbnail_view and function theme_display_thumbnails are not already in your theme.php)
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/
// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT
<!-- BEGIN header -->
<!-- END header -->
<!-- BEGIN thumb_cell -->
<div class="thumb" width ="{CELL_WIDTH}" align="center">
<div class="tbwrap">
<a href="{LINK_TGT}">{THUMB} <br /></a>
<div class="caption">{CAPTION}</div>
{ADMIN_MENU}
</div>
</div>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
<div valign="top" class="thumbnails" align="center"> </div>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
<tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
</tr>
<!-- END footer -->
<!-- BEGIN tabs -->
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
{TABS}
</tr>
</table>
<!-- END tabs -->
<!-- BEGIN spacer -->
<img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->
EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - START
******************************************************************************/
function theme_display_thumbnails(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $page, $total_pages, $sort_options, $display_tabs, $mode = 'thumb', $date='')
{
global $CONFIG, $CURRENT_ALBUM_DATA;
global $template_thumb_view_title_row,$template_fav_thumb_view_title_row, $lang_thumb_view, $lang_common, $template_tab_display, $template_thumbnail_view, $lang_album_list, $lang_errors;
$superCage = Inspekt::makeSuperCage();
static $header = '';
static $thumb_cell = '';
static $empty_cell = '';
static $row_separator = '';
static $footer = '';
static $tabs = '';
static $spacer = '';
if ($header == '') {
$thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell');
$tabs = template_extract_block($template_thumbnail_view, 'tabs');
$header = template_extract_block($template_thumbnail_view, 'header');
$empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
$row_separator = template_extract_block($template_thumbnail_view, 'row_separator');
$footer = template_extract_block($template_thumbnail_view, 'footer');
$spacer = template_extract_block($template_thumbnail_view, 'spacer');
}
$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 = '';
}
$album_types = array(
'albums' => array('lastalb')
);
$album_types = CPGPluginAPI::filter('theme_thumbnails_album_types', $album_types);
$theme_thumb_tab_tmpl = $template_tab_display;
if ($mode == 'thumb') {
$theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => in_array($aid, $album_types['albums']) ? $lang_album_list['album_on_page'] : $lang_thumb_view['pic_on_page']));
$theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'thumbnails.php?album=' . $aid . $cat_link . $date_link . $uid_link . '&page=%d'));
} else {
$theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => $lang_thumb_view['user_on_page']));
$theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'index.php?cat=' . $cat . '&page=%d'));
}
$thumbcols = $CONFIG['thumbcols'];
$cell_width = ceil(100 / $CONFIG['thumbcols']) . '%';
$tabs_html = $display_tabs ? create_tabs($nbThumb, $page, $total_pages, $theme_thumb_tab_tmpl) : '';
if (!GALLERY_ADMIN_MODE && stripos($template_thumb_view_title_row, 'admin_buttons') !== false) {
template_extract_block($template_thumb_view_title_row, 'admin_buttons');
}
// The sort order options are not available for meta albums
if ($sort_options) {
if (GALLERY_ADMIN_MODE) {
$param = array(
'{ALBUM_ID}' => $aid,
'{CAT_ID}' => ($cat > 0 ? $cat : $CURRENT_ALBUM_DATA['category']),
'{MODIFY_LNK}' => $lang_common['album_properties'],
'{MODIFY_ICO}' => cpg_fetch_icon('modifyalb', 1),
'{PARENT_CAT_LNK}' => $lang_common['parent_category'],
'{PARENT_CAT_ICO}' => cpg_fetch_icon('category', 1),
'{EDIT_PICS_LNK}' => $lang_common['edit_files'],
'{EDIT_PICS_ICO}' => cpg_fetch_icon('edit', 1),
'{ALBUM_MGR_LNK}' => $lang_common['album_manager'],
'{ALBUM_MGR_ICO}' => cpg_fetch_icon('alb_mgr', 1),
);
} else {
$param = array();
}
$param['{ALBUM_NAME}'] = $album_name;
// Plugin Filter: allow plugin to modify or add tags to process
$param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
$title = template_eval($template_thumb_view_title_row, $param);
} elseif ($aid == 'favpics' && $CONFIG['enable_zipdownload'] > 0) { //Lots of stuff can be added here later
$param = array(
'{ALBUM_ID}' => $aid,
'{ALBUM_NAME}' => $album_name,
'{DOWNLOAD_ZIP}' => cpg_fetch_icon ('zip', 2) . $lang_thumb_view['download_zip'],
);
// Plugin Filter: allow plugin to modify or add tags to process
$param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
$title = template_eval($template_fav_thumb_view_title_row, $param);
} else {
$title = $album_name;
}
CPGPluginAPI::action('theme_thumbnails_wrapper_start', null);
echo '<div class="thumbTitle">';
echo $title;
echo '</div>';
echo '<div class="AllThumbWrapper">';
echo $header;
$i = 0;
global $thumb; // make $thumb accessible to plugins
foreach($thumb_list as $thumb) {
$i++;
if ($mode == 'thumb') {
if (in_array($aid, $album_types['albums'])) {
$params = array(
'{CELL_WIDTH}' => $cell_width,
'{LINK_TGT}' => "thumbnails.php?album={$thumb['aid']}",
'{THUMB}' => $thumb['image'],
'{CAPTION}' => $thumb['caption'],
'{ADMIN_MENU}' => $thumb['admin_menu'],
);
} else {
// 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 == 'random') {
$target = "displayimage.php?pid={$thumb['pid']}$uid_link#top_display_media";
} 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(
'{CELL_WIDTH}' => $cell_width,
'{LINK_TGT}' => $target,
'{THUMB}' => $thumb['image'],
'{CAPTION}' => $thumb['caption'],
'{ADMIN_MENU}' => $thumb['admin_menu'],
);
}
} else { // mode != 'thumb'
// Used for mode = 'user' from list_users() in index.php
$params = array(
'{CELL_WIDTH}' => $cell_width,
'{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
'{THUMB}' => $thumb['image'],
'{CAPTION}' => $thumb['caption'],
'{ADMIN_MENU}' => '',
);
}
// Plugin Filter: allow plugin to modify or add tags to process
$params = CPGPluginAPI::filter('theme_display_thumbnails_params', $params);
echo template_eval($thumb_cell, $params);
} // foreach $thumb
unset($thumb); // unset $thumb to avoid conflicting with global
$footer = CPGPluginAPI::filter('theme_thumbnails_footer', $footer);
echo $footer;
if ($display_tabs) {
$params = array(
'{THUMB_COLS}' => $thumbcols,
'{TABS}' => $tabs_html,
);
echo template_eval($tabs, $params);
}
echo '</div>';
CPGPluginAPI::action('theme_thumbnails_wrapper_end', null);
echo $spacer;
}
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - END
******************************************************************************/
STEP 2Paste this code to themes/your_theme_name/your_file.css
.thumbTitle {
clear:both;
}
.thumb {
display: inline-block;
}
.tbwrap{
position: relative;
}
.caption {
display: none; .
}
.thumb:hover .caption {
width: 100%;
background-color: rgba(0,0,0,0.5);
color: #ffffff;
position: absolute;
bottom: 2px;
display: block; .
}
.thumb .image,
.thumb a:link .image {
padding: 0px;
margin: 0px;
}
STEP 3Go to Config - Thumbnail view and disable Display file caption (in addition to title) below the thumbnail and
Display file name below the thumbnail.
For this layout to work you need to have equal thumbnails (is not really working with diffrent size thumbnails). If you want diffrent size thumbnail then you need Curve masonry theme that also has link to tutorial about how to use masonry in a coppermine theme. Same if you want to display the title or description under the thumbnails and not on hover the thumnail like on the site you posted.
Go to Config - Thumbnails settings - Use dimension (width or height or max aspect for thumbnail)* - choose Exact.
For Config - Thumbnails settings - Max dimension of a thumbnail (width, if you use "exact" in "Use dimension") * and Height of a thumbnail (only applies if you use "exact" in "Use dimension")* use the same number for both.
To update all your gallery thumbnails of already uploaded images:
Go to Files - Admin Tools - click Update thumbs and/or resized photos - click Only thumbnails and Number of processed images per click 10 not 25 or more. Scroll down and click Submit.
LET ME KNOW IF I CAN HELP MORE.