scale full size images to match window/display? scale full size images to match window/display?
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

scale full size images to match window/display?

Started by faramir66103, March 07, 2007, 12:59:59 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

faramir66103

March 07, 2007, 12:59:59 AM Last Edit: March 11, 2007, 10:31:19 AM by GauGau
Hi All, I'm new to all this, but am enjoying it a great deal.  Coppermine is a great replacement for building so many html pages more or less by hand!  My only trouble is that my full size images are bigger than my the window they open in, and my monitor for that matter.  I really don't want to have to scale down my images before I upload them because then my end users don't get as large an image as possible.  Is there a way to modify Coppermine so that the window that opens is a particular size (say 640x480) with the full size image scaled to fit and with that little magnifying glass that allows you to see the full size image? 

Many Thanks,
Adam

Hein Traag

#1
March 07, 2007, 09:14:26 AM
Did a quick search but could not find anything which does automatic scaling of fullsize images to fit on the screen of the visiting user.

Would be a nice option though, not sure if this can be coded or not.

Nibbler

#2
March 07, 2007, 02:39:51 PM
That's a browser feature. You should be able to do that by making the image open by itself instead of inside the fullsize window that pops up.

faramir66103

#3
March 07, 2007, 06:43:12 PM
Nibbler, thanks for the info.  I'm new to a lot of this coding stuff.  Could you tell me which file to modify and how it should be changed?  I really appreciate your help.

Thanks,
Adam

glenc

#4
March 07, 2007, 08:27:02 PM
check out HighSlide plugin By BMossavari I cant find the link tho ???
QuoteFind a common need and do it uncommonly well.

Joachim Müller

#5
March 08, 2007, 08:45:03 AM
Highslide (Skip Intermediate Page and show full image ), although it's not what the thread starter requested.

faramir66103

#6
March 09, 2007, 02:43:53 AM
Ok, if the little magnifying glass cursor isn't really an option as that's a browser feature, how about just having the image in the full size window scaled to fit that window when it opens?  Could that image resize as the window is resized by the end user?  I'm thinking about something like using a height or width attribute set to 100%. 

Thanks,
Adam

Joachim Müller

#7
March 09, 2007, 07:55:09 AM
Edit themes/yourtheme/theme.php, find
Code Select
function theme_display_fullsize_pic()and modify as suggested below. If the function definition doesn't exist in your custom theme, copy
Code Select
// Display the full size image
function theme_display_fullsize_pic()
{
    global $CONFIG, $THEME_DIR, $ALBUM_SET;
    global $lang_errors, $lang_fullsize_popup, $lang_charset;

    if (isset($_GET['picfile']))
    {
        if (!GALLERY_ADMIN_MODE) cpg_die(ERROR, $lang_errors['access_denied'], __FILE__, __LINE__);

    $picfile = $_GET['picfile'];
    $picname = $CONFIG['fullpath'] . $picfile;
    $imagesize = @getimagesize($picname);
    $imagedata = array('name' => $picfile, 'path' => path2url($picname), 'geometry' => $imagesize[3]);
    }
    elseif (isset($_GET['pid']))
    {
    $pid = (int)$_GET['pid'];
    $sql = "SELECT * " . "FROM {$CONFIG['TABLE_PICTURES']} " . "WHERE pid='$pid' $ALBUM_SET";
    $result = cpg_db_query($sql);

    if (!mysql_num_rows($result)) cpg_die(ERROR, $lang_errors['non_exist_ap'], __FILE__, __LINE__);

    $row = mysql_fetch_array($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);
    }

?>
<!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=<?php echo $CONFIG['charset'] == 'language file' ? $lang_charset : $CONFIG['charset'] ?>" />
  <title><?php echo $CONFIG['gallery_name'] ?>: <?php echo $lang_fullsize_popup['click_to_close'];
      ?></title>
  <script type="text/javascript" src="scripts.js"></script>
  <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; height:100%; width:100%; border-collapse:collapse}
  td {         vertical-align: middle; text-align:center; }
  </style>
  </head>
  <body>
    <script language="JavaScript" type="text/JavaScript">
      adjust_popup();
    </script>
    <table>
      <tr>
            <td>
          <div id="content">
              <?php     echo  '<a href="javascript: window.close()"><img src="'
                . htmlspecialchars($imagedata['path']) . '" '
                . $imagedata['geometry']
                . 'alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . "\n" . $lang_fullsize_popup['click_to_close']
                . '" /></a><br />' ."\n";
               ?>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
<?php
}
from themes/sample/theme.php into a new line before
Code Select
?>of the file themes/yourtheme/theme.php

Basically, you'll need to modify the width and height attributes of the image tag. Sadly, you can't use a percentage, but only a pixel value. You'll need to look into
Code Select
              <?php     echo  '<a href="javascript: window.close()"><img src="'
                . htmlspecialchars($imagedata['path']) . '" '
                . $imagedata['geometry']
                . 'alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . "\n" . $lang_fullsize_popup['click_to_close']
                . '" /></a><br />' ."\n";
               ?>, this should give you an idea what to modify: the width and height attributes are being inserted using the $imagedata['geometry']-section. So basically, find the section that defines this var:
Code Select
$geom = 'width="' . $row['pwidth'] . '" height="' . $row['pheight'] . '"';is the line you need to modify. Add some by-case code that checks if the width and height are greater than a certain limit (e.g. 1024/768 pixels) and re-scale the values accordingly.

Nibbler

#8
March 09, 2007, 12:46:12 PM
If you want to try my suggestion, then change this line

Code Select
$pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";


to

Code Select

$pic_html = '<a href="' . get_pic_url($CURRENT_PIC_DATA, 'fullsize') . '">';


in your theme's theme.php. If you don't have it then copy the theme_html_picture() function from the sample theme and modify your copy.

glenc

#9
March 10, 2007, 04:04:09 AM
Hello all, I had recommened Highslide because on
my cpg it does what I thought was asked. When a thumb is clicked it opens to the size of window if big enough. If bigger, when I put my mouse over it, it shows a button to go full image.
QuoteFind a common need and do it uncommonly well.

faramir66103

#10
March 10, 2007, 08:11:47 PM
glenc, I looked at your site, and I think that the Highslide plugin may accomplish the goal.  I think I was getting too hung up on methodology and loosing sight of that.  I went to the Highslide homepage, and downloaded the files, but am confused as to which files to actually upload to the Coppermine pluging folder. Could you tell me which files I need to upload, or do I need to code something?

Thanks,
Adam

faramir66103

#12
March 10, 2007, 08:42:30 PM
I feel like a real fool, but I just can't seem to get this to work  ???.  I downloaded the Highslide .zip from here http://vikjavev.no/highslide/.  I tried both upload methods described in the documentation and it doesn't show up in the Plugin Manager using either method.  I tried refreshing the page and logging out and logging in again, but still no joy.  Have I downloaded the wrong file perhaps?

Thanks for all the help and patience,
Adam

Nibbler

#13
March 10, 2007, 08:44:09 PM
You need to download the plugin that is attached to this thread: http://forum.coppermine-gallery.net/index.php?topic=36558.0

faramir66103

#14
March 10, 2007, 08:53:21 PM
Nibbler, thank you so much.  I missed the attached version of Highslide when I read that thread.  I really appreciate your help and patience.  I'm loving Coppermine and it's going to make managing and sharing pics for my friends and family quick and easy. 

Thanks,
Adam
Print
Go Up Pages1
User actions