How to integrate Free Wall jQuery plugin into Coppermine's gallery?

[matheso]

I'm trying to integrate the jQuery plugin "Free Wall" into my Coppermine gallery, but I don't understand how to change the Free Wall code so that it's functionality is integrated into Coppermine's gallery. I'll show you the 2 files I'd like to combine, the first is my template.html file (homepage) found here http://taskbasket.net/gallery/ and the second is a Free Wall demo page which is how I want my gallery to display, I've hosted the demo here:   http://taskbasket.net/gallery/themes/matheso/freewall/demo.html

I want the images to be displayed in varying sizes just like my demo shows. I've been told by member 'allvip' to include

Code Select Expand

<script type="text/javascript" src="themes/matheso/js/freewall.js"></script>

in the head section, and this script under {JAVASCRIPT}

Code Select Expand

<script>
    $(function() {
      var wall = new freewall("#thumbWrapp");
      wall.fitWidth();
    });
  </script>


However, my Free Wall demo code has a different script, which calls on images from the "photo" folder in a loop from 1-49. I don't understand how to adapt this code so that it connects to Coppermine's gallery. For example, my current homepage shows a gallery that's integrated with Coppermine (I can search the gallery, etc...) but I need help incorporating this Free Wall code to do the same thing.

The script in my demo is:

Code Select Expand

<script type="text/javascript">
var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(i/photo/{index}.jpg)'></div>";
var w = 1, html = '', limitItem = 49;
for (var i = 0; i < limitItem; ++i) {
w = 200 +  200 * Math.random() << 0;
html += temp.replace(/\{height\}/g, 200).replace(/\{width\}/g, w).replace("{index}", i + 1);
}
$("#freewall").html(html);

var wall = new freewall("#freewall");
wall.reset({
selector: '.cell',
animate: true,
cellW: 20,
cellH: 200,
onResize: function() {
wall.fitWidth();
}
});
wall.fitWidth();
// for scroll bar appear;
$(window).trigger("resize");
</script>


Which code goes where?  What code should be changed?   Any help is excellent! Thank you

[allvip]

I do not know how dynamic freewall is. If I change the images name (1.jpg I named it baby.jpg) in their example. Frewall is not showing the image anymore. Should work with all images from the folder no matter what name they have.
Is harcoded in:

The script in my demo is:

Code Select Expand

<script type="text/javascript">
var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(i/photo/{index}.jpg)'></div>";
var w = 1, html = '', limitItem = 49;
for (var i = 0; i < limitItem; ++i) {
w = 200 +  200 * Math.random() << 0;
html += temp.replace(/\{height\}/g, 200).replace(/\{width\}/g, w).replace("{index}", i + 1);
}
$("#freewall").html(html);

var wall = new freewall("#freewall");
wall.reset({
selector: '.cell',
animate: true,
cellW: 20,
cellH: 200,
onResize: function() {
wall.fitWidth();
}
});
wall.fitWidth();
// for scroll bar appear;
$(window).trigger("resize");
</script>

Anyway I made it to work, but the script wants the images to be named 1.jpg, 2.jpg etc.
That's not a very dynamic code in their example at all if you ask me.
Even the images folder is harcoded in the code. Should work without like masonry does. Masonry does not need to have the path to the images. It works on all images or divs from the div that masonry is called on.

[matheso]

Cool thank you. I've found a masonry demo that I'm willing to use instead, can you help me integrate this code into my template file? The demo is found here:  http://tympanus.net/Development/GridLoadingEffects/index.html

The images in this demo however only cover about 60% of the screen width, I'd rather it cover 100% (no major white space around photos) ... I want the images to fill in the empty spaces with more photos (like my Free Wall demo shown here:  http://taskbasket.net/gallery/themes/matheso/freewall/demo.html

This masonry code seems more dynamic in that it allows you to specify the image paths. It has an unordered list with code like this:

Code Select Expand

<ul class="grid effect-1" id="grid">
<li><a href="http://drbl.in/fQdt"><img src="images/12.png"></a></li>
<li><a href="http://drbl.in/fHaa"><img src="images/13.png"></a></li>
<li><a href="http://drbl.in/gXMo"><img src="images/10.png"></a></li>
<li><a href="http://drbl.in/gXMn"><img src="images/11.png"></a></li>
<li><a href="http://drbl.in/fzYo"><img src="images/2.jpg"></a></li>
</ul>

But this seems to contradict what you say here: 

"Masonry does not need to have the path to the images. It works on all images or divs from the div that masonry is called on"

How do I make it works on all images in my Coppermine gallery, I must call on something...?

I simply want Masonry's functionality to be applied to my Coppermine gallery. Everything can stay the same, I just want images to be displayed like the Masonry demo above.

What do I do to my code? Thanks a lot!

[allvip]

I've found a masonry demo that I'm willing to use instead, can you help me integrate this code into my template file? The demo is found here:  http://tympanus.net/Development/GridLoadingEffects/index.html

You already have that. If you upload images with diffrent widths and heights (now all your images have 1920x1273) you will have thumbunails with difrrent height just like your demo. Your demo also uses AnimOnScroll.js or CSS to animate the divs on scroll.

Infinite scroll jquery plugin is very famous but I think is only for pagination (to replace pagination and all pages to load on scroll).

I want the images to fill in the empty spaces with more photos (like my Free Wall demo shown here:  http://taskbasket.net/gallery/themes/matheso/freewall/demo.html

I do not understand what you mean by that.

This masonry code seems more dynamic in that it allows you to specify the image paths...

Code Select Expand

<ul class="grid effect-1" id="grid">
<li><a href="http://drbl.in/fQdt"><img src="images/12.png"></a></li>
<li><a href="http://drbl.in/fHaa"><img src="images/13.png"></a></li>
<li><a href="http://drbl.in/gXMo"><img src="images/10.png"></a></li>
<li><a href="http://drbl.in/gXMn"><img src="images/11.png"></a></li>
<li><a href="http://drbl.in/fzYo"><img src="images/2.jpg"></a></li>
</ul>

But this seems to contradict what you say here...

If you download Project from freewall homepage with all their examples you will see that images layout example has only an empty div id freewall and the cell (thumbunails) div is created by the jquery code you posted. That code also ask for the images to be in 1 folder and be named 1.jpg, 2.jpg, etc.

Is just my amateur opinion. You can ask support on the freewall page https://github.com/kombai/freewall.
I am not good with jquery or php.

[allvip]

I simply want Masonry's functionality to be applied to my Coppermine gallery. Everything can stay the same, I just want images to be displayed like the Masonry demo above.

What do I do to my code? Thanks a lot!

I repeat: you already have that. That's what I did for you in the first thread.
Just upload even images with diffrent widths and heights so you will have diffrent thumbnails.
Now all thumnails are equal and you do not see the masonry effect.

[matheso]

Ok I've removed the FreeWall code from my template and uploaded different sized images to test the masonry effect. The result is not correct, as the images don't fit together like they should (see screenshot1). The template.html code includes

Code Select Expand

{JAVASCRIPT}
<script src="themes/matheso/js/masonry.pkgd.min.js"></script>
<script src="themes/matheso/js/imagesloaded.pkgd.min.js"></script>

What am I missing? Thanks vip

[allvip]

Is working: see attachment.

[matheso]

You beat me to it, I realized the problem was that I had multiple javascript versions called on within my template file (Thanks Andre).

Quick question though, when I make my browser window more narrow, a white space appears next to the photos (see screenshot1). I don't think this is because of my share bar (far right) because it still exists without that code removed. Screenshot #2 shows the gallery looking fine, screenshot#1 shows the white space.

Does this white space show for you at any width? Thank you

[matheso]

Note:    The whitespace is occurring because the thumbnails won't dynamically resize to fill the space. In other words, the whitespace seems to happen because the thumbnail's width is too large to fit in that space, so it only fills the space once the viewport is wide enough. This is not ideal, I'd rather thumbnails resize dynamically to always fill the space.

Thoughts? Thanks guys!

[allvip]

You have in style.css:

Code Select Expand


@media all and (min-width: 325px) {
    #thumbWrapp .thumbnails {
       width: 310px;
}


I belive you add it that because I said something diffrent here: http://forum.coppermine-gallery.net/index.php/topic,77968.msg376896.html#msg376896

[matheso]

Excellent, solved!

Thanks for your awesome help as always, vip.

[allvip]

Freewall style: http://collageplus.edlea.com/example.html and is easy to use like masonry. Has option to fill the gaps. No white space.
I will try it now on coppermine.
Check back tomorrow.
You can also try it.

[allvip]

1) Open themes/your_theme_name/template.html and paste after {JAVASCRIPT}:

Code Select Expand


<script type="text/javascript" src="themes/your_theme_name/js/collage/jquery.collagePlus.min.js"></script>
<script type="text/javascript" src="themes/your_theme_name/js/collage/jquery.removeWhitespace.min.js"></script>
<script type="text/javascript">

    // All images need to be loaded for this plugin to work so
    // we end up waiting for the whole window to load in this example
    $(window).load(function () {
        $(document).ready(function(){
            collage();
        });
    });


    // Here we apply the actual CollagePlus plugin
    function collage() {
        $('.Collage').removeWhitespace().collagePlus(
            {
                'fadeSpeed'     : 2000,
                'targetHeight'  : 80,
                'allowPartialLastRow' : true
            }
        );
    };

    // This is just for the case that the browser window is resized
    var resizeTimer = null;
    $(window).bind('resize', function() {
        // hide all the images until we resize them
        $('.Collage .Image_Wrapper').css("opacity", 0);
        // set a timer to re-apply the plugin
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(collage, 80);
    });

    </script>


2) Open themes/your_theme_name/theme.php and paste at the end before ?> (make sure functions $template_thumbnail_view and theme_display_thumbnails are not already in your theme.php) :

Code Select Expand


/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/

// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <div class="thumbnails Image_Wrapper" width ="{CELL_WIDTH}" align="center">
                                <div align="center" style="position: relative;">
                                        <a href="{LINK_TGT}">{THUMB}</a>
                                        <div id="caption">{CAPTION}</div>
                                        {ADMIN_MENU}
                                </div>
        </div>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <div valign="top" class="thumbnails" align="center">&nbsp;</div>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
<!-- END row_separator -->
<!-- BEGIN footer -->
<!-- END footer -->
<!-- BEGIN tabs -->
                <div id="tabWrapp">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </div>
<!-- END tabs -->
<!-- BEGIN spacer -->
<!-- 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) ? '' : '&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 = '';
    }

    $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 . '&amp;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 . '&amp;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 id="thumbWrapp" class="Collage">';

    $header = CPGPluginAPI::filter('theme_thumbnails_header', $header);
    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)) ? "&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(
                    '{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);

            if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;        }
    } // foreach $thumb

    unset($thumb);  // unset $thumb to avoid conflicting with global

    $footer = CPGPluginAPI::filter('theme_thumbnails_footer', $footer);
    echo $footer;
    echo '</div>';
echo '<div class="clearer"></div>';
    if ($display_tabs) {
        $params = array(
            '{THUMB_COLS}' => $thumbcols,
            '{TABS}'       => $tabs_html,
        );
        echo template_eval($tabs, $params);
    }

    CPGPluginAPI::action('theme_thumbnails_wrapper_end', null);
    echo $spacer;
}
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - END
******************************************************************************/


3) Open themes/your_theme_name/style.css and add:

Code Select Expand


.Collage {

    /* define how much padding you want in between your images */
    padding:12px;

    }

.Collage img{

    /* ensures padding at the bottom of the image is correct */
    vertical-align:bottom;
    }
.thumbTitle .statlink,
.thumbTitle .sortorder_options {
    color: #000000;
}
#thumbWrapp .thumbnails {
    position: relative;
}
.thumbnails #caption {
    display: none;
}
.thumbnails:hover #caption {
    position: absolute;
bottom: 0;
left: 0;
    display: inline;
z-index: 1000;
background: rgba(0,0,0,0.8);
width: 100%;
color: #FFFFFF;
text-align: left;
}
.thumb_caption,
.thumb_title,
.thumb_filename,
.thumb_num_comments {
font-size: 60%;
width: 98%;
padding: 0.5% 1% 0.5% 1%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
display: none;
}
.thumb_title_title {
font-size: 70%;
width: 98%;
padding: 0.5% 1% 0.5% 1%;
    white-space: nowrap;
text-overflow: ellipsis;
    overflow: hidden;
word-break: break-all;
display: block!important;
}
.thumb_title_owner {
    display: block!important;
}
.thumb_title_owner a:link {
    text-decoration: none;
    color: #B9AD84;
}


4) Open themes/your_theme_name/style.css, FIND and DELETE (the curve theme has all this style. I don't kow if your theme has them, but it should) :

Code Select Expand


.thumb_filename {
    font-size: 80%;
    display: block;
}

.thumb_title {
    font-weight : bold;
    font-size: 80%;
    padding: 2px;
    display : block;
}

.thumb_caption {
    font-size: 80%;
    padding: 1px;
    display : block;
}

.thumb_caption a {
    text-decoration: underline;
    color: #000000;
}

.thumb_num_comments {
    font-weight: normal;
    font-size: 80%;
    padding: 2px;
    font-style : italic;
    display : block;
}
.image {
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.thumbnails {
    background: #EFEFEF none repeat scroll 0% 0%;
    padding: 5px;
}


5) 4) Open themes/your_theme_name/style.css, FIND and REPLACE (the curve theme has all this style. I don't kow if your theme has them) :

Code Select Expand


/* pseudo-classes for image links */
a:link .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

a:visited .image{
    border-style:solid;
    border-width:1px;
    border-color:#840084;
    margin:2px;
}

a:focus .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

a:hover .image{
    border-style:solid;
    border-width:1px;
    border-color:#0033CC;
    margin:2px;
}

a:active .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}


with:

Code Select Expand


/* pseudo-classes for image links */
a:link .image,
a:visited .image,
a:focus .image,
a:hover .image,
a:active .image {
    background-color: transparent;
}


[allvip]

Make a folder named js in themes/your_theme_name and a folder named collage in themes/your_theme_name/js folder.

Download Collage Plusand removeWhitespace  0.3.1 (other versions don't work with internet explorer) from here https://github.com/ed-lea/jquery-collagePlus/releases, unzip and put in your themes/your_theme_name/js/collage folder only jquery.collagePlus.min and jquery.removeWhitespace.min.

At step 1) you can change 'targetHeight'  : 80, to 'targetHeight'  : 200, or 'targetHeight'  : 300, or 'targetHeight'  :100,
targetHeight is for the thumbs height.

I noticed that this kind of layout works with all setings but is best to have this settings:
Config - Thumbnails settings - Use dimension (width or height or max aspect for thumbnail)* - choose Height from the drop down menu
Max dimension of a thumbnail (width, if you use "exact" in "Use dimension") * - type 300 or whatever value you need. Depends what height you want for you thumbnails.
Height of a thumbnail (only applies if you use "exact" in "Use dimension")* - type 300 or whatever value you need. Depends what height you want for you thumbnails.

If you need to update the thumbnails for images that you already uploaded then go to FILES - Admin Tools - click Update thumbs and/or resized photos - click Only thumbnails - Select Album - from the drop down menu choose an album - click Submit.
You can also choose All Albums but if you have too many pictures in your gallery then Admin Tools will time out during the process.

If you use the default coppermine settings for thumbnails then you can only display thumbnail title and uploader. The thumbnail is to small so there is no place for caption, rating stars etc, but if you have big thumbnials then:

Open themes/your_theme_name/style.css FIND:

Code Select Expand


.thumb_caption,
.thumb_title,
.thumb_filename,
.thumb_num_comments {
font-size: 60%;
width: 98%;
padding: 0.5% 1% 0.5% 1%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
display: none;
}


AND REPLACE with:

Code Select Expand


.thumb_caption,
.thumb_title,
.thumb_filename,
.thumb_num_comments {
font-size: 60%;
width: 98%;
padding: 0.5% 1% 0.5% 1%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
display: inline;
}
.thumb_caption_caption {
display: block!important;
}
.thumb_title a::before {
  content:"Uploaded by ";
  color: #B9AD84;
}
.thumb_num_comments {
    font-style : italic;
}
.thumbnails #caption img {
    width: auto!important;
    max-width: 10px!important;
height: auto!important;
}


FOR MORE ADVANCED STYLING you can add (if you have coppermine version cpg1.5.26 or higher):

Code Select Expand


.thumb_title_views {
     YOUR STYLES HERE
}
.thumb_title_owner {
     YOUR STYLES HERE
}

.thumb_caption_caption {
     YOUR STYLES HERE
}

.thumb_caption_msg_date {
     YOUR STYLES HERE
}

.thumb_caption_author {
     YOUR STYLES HERE
}

.thumb_caption_ctime {
     YOUR STYLES HERE
}

.thumb_caption_rating {
     YOUR STYLES HERE
}
.thumb_caption_rating img {
     YOUR STYLES HERE
}

.thumb_caption_mtime {
     YOUR STYLES HERE
}

.thumb_filename {
     YOUR STYLES HERE
}

.thumb_num_comments {
     YOUR STYLES HERE
}
[code]


[allvip]

CollagePlus image preview: see attachments collagePlus.jpg and caption.jpg.
I used 300px thumnails.

[Αndré]

Impressive. Seems that allvip is the CSS guru in our board

[allvip]

Impressive. Seems that allvip is the CSS guru in our board

Thanks. Your compliment means a lot.
Theme here Google images grid ( flickr images grid ). Responsive coppermine theme.
http://forum.coppermine-gallery.net/index.php/topic,78310.0.html