Thumbnail Sizing

[bdhnet]

Hello there! I've been trying to research as much as I can on this topic, but the more I read, the more confused I get. I apologize for my ignorance or if this is impossible with coppermine, but I was wondering if it's possible to display thumbs like in the ideal option in the attachment. Currently my thumbs are 125x125 and it makes all the full body images look identical. I would be happy with changing the universal thumb size to 115x135 (even on horizontal images) as it alleviates this problem, even slightly. However, ideally I would love to display the full image in the thumb without cropping, just sized down to a certain universal height or width. I'm stuck and don't know how to do either. I tried changing the dimensions in the config, but it wouldn't make all thumbs uniformly 115x135. Is there maybe a plugin that will do this? I'm really stuck on this and would love any help anyone can provide, thank you!

[bdhnet]

Oh! Here's my gallery if you need that info http://www.brycedallashoward.co/gallery/index.php

[Αndré]

ideally I would love to display the full image in the thumb without cropping, just sized down to a certain universal height or width.

According to your picture you need to set "Thumbnails settings → Use dimension" to "max aspect" and "Thumbnails settings → Max dimension of a thumbnail" to "135". When done, don't forget to run the admin tools to re-create all thumbnails.

[bdhnet]

Thank you so much for your reply, I was still having the same issues until I changed computers. Now everything's working fine. I cleared my cache and everything, but it wouldn't work on my laptop. Doing the exact same thing on a different computer, it's working! However, is there a way to keep the album list view thumbs to 100x100? I changed all the thumbs inside the album to 105x125 and I'm happy with that, but this also changed my main album photo.

Here's an example (I only updated the thumbs in 2 albums, just as a test, and the album list thumbs changed too which I don't want)
http://brycedallashoward.co/gallery/index.php?cat=73&page=4

In config I have the album list view "Size of album thumbnails" set to 100px.

Also, I went into admin tools and updated all thumbs one album at a time for starters just to test it, but not every page is changing my on screen. I'm guessing it's a cache/temp files situation and it will switch over eventually?

Thank you again!

[Αndré]

is there a way to keep the album list view thumbs to 100x100?

Do you want to crop or distort them?

[bdhnet]

I'm not sure the difference, but I believe they were cropped before and that's fine.

[bdhnet]

Never mind, after updating all thumbs, the 105x125 album list thumbs don't look as off as I thought. However, I would like change the thumb view from 5 columns to 6 columns. I made the adjustment in config, but once again it's not changing on screen. Do I need to go into the css and edit the padding? Could that be stopping it?

[Αndré]

Please have a look at your theme's theme.php file. Maybe there's a hard-coded value. If you don't know what to look for, please attach it to your next reply.

[bdhnet]

Found it! You have been INSANELY helpful. Thank you!! I have one last problem: how do I make the spacing between the thumbs equal, control that amount of spacing, and center the full set within the table?

The 5th and 6th columns are closer than the rest, I'd like to equally lessen the space between each column, and the center is off a tad after changing the columns count
http://www.brycedallashoward.co/gallery/thumbnails.php?album=705

thank you again SO much for all the help you've given me!

Theme.php

<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2010 Coppermine Dev Team
  v1.0 originally written by Gregory Demar

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 3
  as published by the Free Software Foundation.
 
  ********************************************
  Coppermine version: 1.5.8
  $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/themes/water_drop/theme.php $
  $Revision: 7805 $
**********************************************/

define('THEME_HAS_PROGRESS_GRAPHICS', 1);

// HTML template for template sys_menu spacer
$template_sys_menu_spacer = '';
$template_sub_menu_spacer = '';
$CONFIG['thumbcols'] = 6; //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".




/******************************************************************************
** Section <<<theme_display_fullsize_pic>>> - START
******************************************************************************/
// Display the full size image
function theme_display_fullsize_pic()
{
    global $CONFIG, $THEME_DIR, $FORBIDDEN_SET, $LINEBREAK, $pid;
    global $lang_errors, $lang_fullsize_popup, $lang_charset;

    $superCage = Inspekt::makeSuperCage();

    if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
        printf($lang_errors['login_needed'],'','','','');
        die();
    } elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
        printf($lang_errors['access_intermediate_only'],'','','','');
        die();
    }
    if ($superCage->get->keyExists('picfile')) {
        if (!GALLERY_ADMIN_MODE) {
            cpg_die(ERROR, $lang_errors['access_denied'], __FILE__, __LINE__);
        }
        //$picfile = $_GET['picfile'];
        //$picfile = $superCage->get->getPath('picfile'); // doesn't work with HTML entities
        $matches = $superCage->get->getMatched('picfile', '/^[0-9A-Za-z\/_.-]+$/');
        $picfile = $matches[0];
        $picname = $CONFIG['fullpath'] . $picfile;
        $imagesize = @getimagesize($picname);
        $imagedata = array('name' => $picfile, 'path' => path2url($picname), 'geometry' => $imagesize[3]);
    } elseif ($pid) {
        $sql = "SELECT filepath, filename, url_prefix, pwidth, pheight FROM {$CONFIG['TABLE_PICTURES']} AS p " . "WHERE pid='$pid' $FORBIDDEN_SET";
        $result = cpg_db_query($sql);
        if (!mysql_num_rows($result)) {
            cpg_die(ERROR, $lang_errors['non_exist_ap'], __FILE__, __LINE__);
        }
        $row = mysql_fetch_assoc($result);
        $pic_url = get_pic_url($row, 'fullsize');
        $geom = 'width="' . $row['pwidth'] . '" height="' . $row['pheight'] . '"';
        $imagedata = array('name' => $row['filename'], 'path' => $pic_url, 'geometry' => $geom);
    }
    if ((!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) || (USER_ID && USER_ACCESS_LEVEL <= 2)) {
        // adjust the size of the window if we don't have to catter for a full-size pop-up, but only a text message
        $row['pwidth'] = 200;
        $row['pheight'] = 100;
    }

    $charset = ($CONFIG['charset'] == 'language file' ? $lang_charset : $CONFIG['charset']);
    $fullsize_html = <<<EOT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=$charset" />
        <title>{$CONFIG['gallery_name']}: {$lang_fullsize_popup['click_to_close']}</title>
        <style type="text/css">
            body { margin: 0; padding: 0; background-color: gray; }
            img { margin:0; padding:0; border:0; }
            #content { margin:0 auto; padding:0; border:0; }
            table { border:0; width:{$row['pwidth']}px; height:{$row['pheight']}px; border-collapse:collapse}
            td { vertical-align: middle; text-align:center; }
        </style>

        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
     
    </head>
    <body style="margin:0px; padding:0px; background-color: gray;">

EOT;
    if ($CONFIG['transparent_overlay'] == 1) {
        $fullsize_html .= <<<EOT
        <table cellpadding="0" cellspacing="0" align="center" style="padding:0px;">
            <tr>

EOT;
        $fullsize_html .=  '<td align="center" valign="middle" background="' . htmlspecialchars($imagedata['path']) . '" ' . $imagedata['geometry'] . ' class="image">';
        $fullsize_html .=  '<div id="content">';
        $fullsize_html .=  '<a href="javascript: window.close()" style="border:none"><img src="images/image.gif?id='
                . floor(rand()*1000+rand())
                . '&amp;fullsize=yes" '
                . $imagedata['geometry']
                . ' alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . $LINEBREAK . $lang_fullsize_popup['click_to_close']
                . '" /></a><br />' . $LINEBREAK;
        $fullsize_html .=  <<<EOT
                    </div>
                </td>
            </tr>
        </table>

EOT;
    } else {
        $fullsize_html .=  '        <div id="content">'.$LINEBREAK;
        $fullsize_html .=  '<a href="javascript: window.close()"><img src="'
        . htmlspecialchars($imagedata['path']) . '" '
        . $imagedata['geometry']
        . 'id="fullsize_image" alt="'
        . htmlspecialchars($imagedata['name'])
        . '" title="'
        . htmlspecialchars($imagedata['name'])
        . $LINEBREAK . $lang_fullsize_popup['click_to_close']
        . '" /></a><br />' . $LINEBREAK
        . '        </div>'.$LINEBREAK;
    }
    $fullsize_html .= <<<EOT
  </body>
</html>

EOT;

    $fullsize_html = CPGPluginAPI::filter('fullsize_html', $fullsize_html);
    echo $fullsize_html;
}
/******************************************************************************
** Section <<<theme_display_fullsize_pic>>> - END
******************************************************************************/

?>

[Αndré]

Try to increase the max-width of "container".

[bdhnet]

It just spaces the gallery out to the sides while keeping the same spacing ratio in-between as before. The same problems remain; full set uncentered within table and unequal spacing between columns

[ron4mac]

One way that should ease the problem is to copy the template_thumbnail_view section from include/themes.inc.php into your theme.php file, removing the cell width attribute (as marked with REMOVE THIS below).

Code Select Expand


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

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

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" [REMOVE THIS>>] width ="{CELL_WIDTH}" [<<REMOVE THIS] align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->

<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
        </tr>
        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

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


The above is from CPG v1.5.38 (that you are using). You should consider updating your version.

[bdhnet]

I tried copying that to my theme.php, but nothing happened just {CAPTION}{ADMIN_MENU} appeared at the top of the page.

I'm always afraid to update because if it changes something, I never know enough to fix it and it becomes an even bigger mess. 

[ron4mac]

I tried copying that to my theme.php, but nothing happened just {CAPTION}{ADMIN_MENU} appeared at the top of the page.

If you copied from my above post, you need to remove all where I indicated to remove (including the REMOVE THIS pointers).  If you copied from include/themes.inc.php, you need to remove the bit that I pointed to.

Another more simple solution (that at least works on my browser) would be to modify your style.css around line 372 where .thumbnails is declared and add width:auto; That may not, however, work with all browsers.  Best method would be to get the theme.php method working correctly.