forum.coppermine-gallery.net
Support => cpg1.5 plugins => cpg1.5.x Support => cpg1.5 plugin contributions => Topic started by: Timos-Welt on December 16, 2009, 02:23:34 pm
-
This plugin allows the visitor to non-destructively manipulate pictures using new buttons on displayimage.php. Depending on the plugin configuration, the settings for each picture may be saved in a cookie on the visitor's computer (so if a picture is visited again, the old settings will be applied), and the URL may change accordingly (so if the visitor passes on the link, the recepient will see the pic just as the visitor likes it). Check the demo to see what all this means. The plugin will add ~30 kbyte of javascript to the page (slightly less in compatible mode).
Available effects in all browsers including Internet Explorer 5.5-8:
- Brightness (LED slider)
- Reset
- B/W
- Invert
- Emboss
- Flip vertically
- Flip horizontally
- Blur
Available effects in all actual browsers but not in Microsoft's IE before version 9:
- Contrast (LED slider)
- Saturation (LED slider)
- Sharpness (LED slider)
- Sepia (replacing B/W)
Browser compatibility:
The effects work fine with
- IE 5.5+
- Opera 9.5+
- Firefox 2+
- Chrome 3+
- most other browsers should work, too or fall back nicely
Please note:
- This plugin will only work if 'Insert a transparent overlay to minimize image theft' is deactivated.
- This plugin and the plugin 'mirror' may not be used at the same time.
- The buttons will only be available for visitors with javascript turned on. Others won't notice a thing.
- It is highly recommended to only use controls that are available in all browsers (including IE < 9). If you don't, it depends on the visitor's browser which effects will be available.
- Use the config page to set up the plugin.
- Read the documentation!
Demo (http://cpg15xdev.spaetbier.de/displayimage.php?pid=535&theme=timoswelt&lang=english#top_display_media)
SVN (https://coppermine.svn.sourceforge.net/svnroot/coppermine/branches/cpg1.5.x/plugins/image_manipulation/)
Download latest SVN snapshot (http://coppermine.svn.sourceforge.net/viewvc/coppermine/branches/cpg1.5.x/plugins/image_manipulation.tar.gz?view=tar) (use at own risk)
Download: http://sourceforge.net/projects/coppermine/files/Plugins/1.5.x/cpg1.5.x_plugin_image-manipulation_v2.1.zip/download
This plugin uses the great Pixastic Javascript library (http://www.pixastic.com) by Jacob Seidelin (MIT License).
Workaround for transparent overlay
If you like to have a transparent overlay over your images and don't use the annotate plugin, you may paste this to your theme.php to get it back (leave the setting on config page turned off when using this workaround). Use at your own risk and test carefully, especially with other plugins you use at the same time:
/******************************************************************************
** Section <<<theme_html_picture>>> - START
******************************************************************************/
// Displays a picture
function theme_html_picture()
{
global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER, $LINEBREAK;
global $album, $lang_date, $template_display_media;
global $lang_display_image_php, $lang_picinfo, $lang_common, $lang_errors;
$superCage = Inspekt::makeSuperCage();
$pid = $CURRENT_PIC_DATA['pid'];
$pic_title = '';
if (!isset($USER['liv']) || !is_array($USER['liv'])) {
$USER['liv'] = array();
}
// Add 1 to hit counter
if ((!USER_IS_ADMIN && $CONFIG['count_admin_hits'] == 0 || $CONFIG['count_admin_hits'] == 1) && !in_array($pid, $USER['liv']) && $superCage->cookie->keyExists($CONFIG['cookie_name'] . '_data')) {
add_hit($pid);
if (count($USER['liv']) > 4) array_shift($USER['liv']);
array_push($USER['liv'], $pid);
}
// The weird comparision is because only picture_width is stored
if ($CONFIG['thumb_use']=='ht' && $CURRENT_PIC_DATA['pheight'] > $CONFIG['picture_width'] ) {
$condition = true;
} elseif ($CONFIG['thumb_use']=='wd' && $CURRENT_PIC_DATA['pwidth'] > $CONFIG['picture_width']) {
$condition = true;
} elseif ($CONFIG['thumb_use']=='any' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']) {
$condition = true;
//thumb cropping
} elseif ($CONFIG['thumb_use']=='ex' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']) {
$condition = true;
} else {
$condition = false;
}
if ($CURRENT_PIC_DATA['title'] != '') {
$pic_title .= $CURRENT_PIC_DATA['title'] . $LINEBREAK;
}
if ($CURRENT_PIC_DATA['caption'] != '') {
$pic_title .= $CURRENT_PIC_DATA['caption'] . $LINEBREAK;
}
if ($CURRENT_PIC_DATA['keywords'] != '') {
$pic_title .= $lang_common['keywords'] . ": " . $CURRENT_PIC_DATA['keywords'];
}
if (!$CURRENT_PIC_DATA['title'] && !$CURRENT_PIC_DATA['caption']) {
template_extract_block($template_display_media, 'img_desc');
} else {
if (!$CURRENT_PIC_DATA['title']) {
template_extract_block($template_display_media, 'title');
}
if (!$CURRENT_PIC_DATA['caption']) {
template_extract_block($template_display_media, 'caption');
}
}
$CURRENT_PIC_DATA['menu'] = html_picture_menu(); //((USER_ADMIN_MODE && $CURRENT_ALBUM_DATA['category'] == FIRST_USER_CAT + USER_ID) || ($CONFIG['users_can_edit_pics'] && $CURRENT_PIC_DATA['owner_id'] == USER_ID && USER_ID != 0) || GALLERY_ADMIN_MODE) ? html_picture_menu($pid) : '';
$image_size = array();
if ($CONFIG['make_intermediate'] && $condition ) {
$picture_url = get_pic_url($CURRENT_PIC_DATA, 'normal');
} else {
$picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
}
list($image_size['width'], $image_size['height'], , $image_size['geom']) = cpg_getimagesize(urldecode($picture_url));
$pic_title = '';
$mime_content = cpg_get_type($CURRENT_PIC_DATA['filename']);
if ($mime_content['content']=='movie' || $mime_content['content']=='audio') {
if ($CURRENT_PIC_DATA['pwidth']==0 || $CURRENT_PIC_DATA['pheight']==0) {
$CURRENT_PIC_DATA['pwidth'] = 320; // Default width
// Set default height; if file is a movie
if ($mime_content['content']=='movie') {
$CURRENT_PIC_DATA['pheight'] = 240; // Default height
}
}
$ctrl_offset['mov']=15;
$ctrl_offset['wmv']=45;
$ctrl_offset['swf']=0;
$ctrl_offset['rm']=0;
$ctrl_offset_default=45;
$ctrl_height = (isset($ctrl_offset[$mime_content['extension']]))?($ctrl_offset[$mime_content['extension']]):$ctrl_offset_default;
$image_size['whole']='width="'.$CURRENT_PIC_DATA['pwidth'].'" height="'.($CURRENT_PIC_DATA['pheight']+$ctrl_height).'"';
}
if ($mime_content['content']=='image') {
if ($CURRENT_PIC_DATA['mode'] != 'fullsize') {
$winsizeX = $CURRENT_PIC_DATA['pwidth'] + $CONFIG['fullsize_padding_x']; //the +'s are the mysterious FF and IE paddings
$winsizeY = $CURRENT_PIC_DATA['pheight'] + $CONFIG['fullsize_padding_y']; //the +'s are the mysterious FF and IE paddings
$pic_html_href_close = '</a>' . $LINEBREAK;
$pic_html = "<div style=\"text-align:center;\">";
$pic_html .= "<div style=\"position:relative;margin:auto auto;width:{$image_size['width']}px;height:{$image_size['height']}px;\">";
$pic_html .= "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" />";
if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
if ($CONFIG['allow_user_registration'] == 0) {
$pic_html_href_close = '';
} else {
$pic_html .= '<a href="javascript:;" onclick="alert(\''.sprintf($lang_errors['login_needed'],'','','','').'\');">';
}
} elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
$pic_html .= '<a href="javascript:;" onclick="alert(\''.sprintf($lang_errors['access_intermediate_only'],'','','','').'\');">';
} else {
$pic_html .= "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
}
$pic_title = $lang_display_image_php['view_fs'] . $LINEBREAK . '==============' . $LINEBREAK . $pic_title;
$pic_html .= "<img src=\"images/image.gif?id=".floor(rand()*1000+rand())."\" width=\"{$image_size['width']}\" height=\"{$image_size['height']}\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" style=\"position:absolute;left:0px;top:0px;margin:3px;";
if ($pic_html_href_close) $pic_html .= "cursor:pointer;";
$pic_html .= "\" />";
$pic_html .= $pic_html_href_close."</div></div><br />";
//PLUGIN FILTER
$pic_html = CPGPluginAPI::filter('html_image_reduced_overlay', $pic_html);
} else {
$pic_html = "<div style=\"text-align:center;\">";
$pic_html .= "<div style=\"position:relative;margin:auto auto;width:{$image_size['width']}px;height:{$image_size['height']}px;\">";
$pic_html .= "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />" . $LINEBREAK;
$pic_html .= "<img src=\"images/image.gif?id=".floor(rand()*1000+rand())."\" width=\"{$image_size['width']}\" height=\"{$image_size['height']}\" border=\"0\" alt=\"\" style=\"position:absolute;left:0px;top:0px;margin:3px;\" />";
$pic_html .= "</div></div><br />";
//PLUGIN FILTER
$pic_html = CPGPluginAPI::filter('html_image_overlay', $pic_html);
}
} elseif ($mime_content['content']=='document') {
$pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
$pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a><br />" . $LINEBREAK;
//PLUGIN FILTER
$pic_html = CPGPluginAPI::filter('html_document', $pic_html);
} else {
$autostart = ($CONFIG['media_autostart']) ? ('true'):('false');
if ($mime_content['player'] == 'HTMLA') {
$pic_html = '<audio controls="true" src="' . $picture_url . '" autostart="' . $autostart . '"></audio>';
} elseif ($mime_content['player'] == 'HTMLV') {
$pic_html = '<video controls="true" src="' . $picture_url . '" autostart="' . $autostart . '"' . $image_size['whole'] . '></video>';
} else {
$players['WMP'] = array('id' => 'MediaPlayer',
'clsid' => 'classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" ',
'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ',
'mime' => 'type="application/x-mplayer2" ',
);
$players['DIVX'] = array('id' => 'DivX',
'clsid' => 'classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616"',
'codebase' => 'codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab"',
'mime' => 'type="video/divx"'
);
$players['RMP'] = array('id' => 'RealPlayer',
'clsid' => 'classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" ',
'codebase' => '',
'mime' => 'type="audio/x-pn-realaudio-plugin" '
);
$players['QT'] = array('id' => 'QuickTime',
'clsid' => 'classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
'codebase' => 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" ',
'mime' => 'type="video/x-quicktime" '
);
$players['SWF'] = array('id' => 'SWFlash',
'clsid' => ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ',
'codebase' => 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ',
'mime' => 'type="application/x-shockwave-flash" '
);
$players['UNK'] = array('id' => 'DefaultPlayer',
'clsid' => '',
'codebase' => '',
'mime' => ''
);
$player = $players[$mime_content['player']];
if (!$player) {
$player = 'UNK';
}
$pic_html = '<object id="'.$player['id'].'" '.$player['classid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';
$pic_html .= "<param name=\"autostart\" value=\"$autostart\" /><param name=\"src\" value=\"". $picture_url . "\" />";
$pic_html .= '</object><br />' . $LINEBREAK;
}
//PLUGIN FILTER
$pic_html = CPGPluginAPI::filter('html_other_media', $pic_html);
}
$CURRENT_PIC_DATA['html'] = $pic_html;
$CURRENT_PIC_DATA['header'] = '';
$CURRENT_PIC_DATA['footer'] = '';
$CURRENT_PIC_DATA = CPGPluginAPI::filter('file_data',$CURRENT_PIC_DATA);
$params = array('{CELL_HEIGHT}' => '100',
'{IMAGE}' => $CURRENT_PIC_DATA['header'].$CURRENT_PIC_DATA['html'].$CURRENT_PIC_DATA['footer'],
'{ADMIN_MENU}' => $CURRENT_PIC_DATA['menu'],
'{TITLE}' => bb_decode($CURRENT_PIC_DATA['title']),
'{CAPTION}' => bb_decode($CURRENT_PIC_DATA['caption']),
);
return template_eval($template_display_media, $params);
}
/******************************************************************************
** Section <<<theme_html_picture>>> - END
******************************************************************************/
/******************************************************************************
** 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>
<script type="text/javascript" src="js/displayimage.fullsize.js"></script>
</head>
<body style="margin:0px; padding:0px; background-color: gray;">
EOT;
$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())
. '&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>
</body>
</html>
EOT;
$fullsize_html = CPGPluginAPI::filter('fullsize_html', $fullsize_html);
echo $fullsize_html;
}
/******************************************************************************
** Section <<<theme_display_fullsize_pic>>> - END
******************************************************************************/
-
Nice plugin.
I suggest to move the 'Reset' button to the right, as people who just 'play' with the buttons will start from the left and nothing will happen ;)
-
Turn off 'add transparent overlay to avoid image theft' to make this plugin work.
This should automatically be done at plugin installation imo.
-
Is there a reason why you only have built in these effects
- reset
- blur
- b/w
- invert
- emboss
- flip vert (IE only)
- flip hori (IE only)
- lighten (not in IE)
- darken (not in IE)
- solarize (not in IE)
?
There are more available effects, that should be configurable by the admin:
Blend
Blur
Blur Fast
Brightness/Contrast
Color Adjust
Color Histogram
Crop
Desaturate
Edge Detection
Edge Detection 2
Emboss
Flip
Flip Horizontally
Flip Vertically
Glow
Histogram
Hue/Saturation/Lightness
Invert
Laplace Edge Detection
Lighten
Mosaic
Noise
Posterize
Pointillize
Remove Noise
Resize
Rotate
Sepia
Sharpen
Solarize
Unsharp Mask
-
Just released 0.2 that fixes a lot of display bugs at cost of performance and enables Lighten/Darken buttons for IE, too.
Andre:
Most of the effects are not compatible with all browsers or versions. Flip should work in Firefox, too, but it doesn't ATM (that's why the buttons are only available in IE). I think I'll contact the developer about that issue.
What works everywhere is blur, b/w, invert, emboss, flip, lighten and darken. I think I'll remove solarize as soon as flip works with any browser.
-
Found the flip bug - v0.3 works identically in any modern browser.
-
WoW I'm speechless :-)))))) Amazing plugin Tim ;D
-
v0.4:
- fixed: buttons were visible for non-images
- improvement: toggle buttons show their state
-
Feedback from the developer of the Pixastic Javascript library Jacob Seidelin:
"Pixastic is currently licensed under the MPL but I plan to extend that to a MPL/GPL dual license when I get around to updating the necessary files/pages - so, there shouldn't be a problem with you bundling it with your plugin. Just make sure the copyright and license information for Pixastic is included as well (the commented part in the top)."
:)
-
v0.5 adds a slider for pic brightness
-
Nice :) But I still miss at least the Sepia effect ;)
-
No problem to code, but where's the sense in implementing something that won't work with every mainstream browser? There's a Google project (http://code.google.com/p/explorercanvas/) implementing canvas functions into IE - feel free to add it and test it out.
-
We could determine by whitelist or blacklist to add buttons for effects that don't work in the user's browser.
-
Potential source for misunderstandings and frustration. User A visits your gallery and writes a comment 'have a look at the image in sepia, it's great'. User B visits your gallery using a different browser and can't find the button for the sepia effect... A perfect way to make support effort appear from nowhere.
The current implementation focuses on compatibility. IE 5.5+, FF 2+, Opera 9.5+, Chrome 3+ will all work the same way, so >90% of the visitors should see the gallery as it is meant to be seen, including some nice new controls to play with. Do you want to have jam on it, too?
-
Okay I can see your point. But can't we add a config panel where the admin can choose which buttons he want to display (if the user's browser supports that effect) and add some explanation like "This effect works only on the following browsers: xyz. It's a potential source for misunderstandings and frustration if your users talk about the effects using different browsers."?
-
Ok, ok, v0.6 has a compatibility mode, and if you turn it off, it will give new effects in other browsers than IE (contrast, saturation, sharpness, sepia). It is not recommended to turn it off. See demo in IE or FF to see the difference.
-
Thank you so much, Timo :-*
-
V0.7 adds dynamic URL manipulation, so if you find you preferred settings for a pic and pass the URL to someone else, he/she will see the pic as you liked it.
-
v0.8 adds cookie support, so if a visitor visits the same pic later, his settings will be remembered and applied automatically.
-
This plugin has finally reached v1.0 and is now a genuine cpg plugin. Have fun with it.
Localisations are welcome!
-
french lang file attached
-
Thanks François!
v1.1 adds french localization and HTML docs
-
Added various improvements to version 1.3 of the plugin in the subversion repository.
Timo, please let me know what you think of my edits.
Cheers
-
Version 1.3 doesn't display the status of the toggle buttons (they became red in earlier versions).
-
Settings on config page cannot be saved with v1.3.
Toggle button borders don't work anymore (Andre already said this).
The icon thing is really nice.
-
Settings on config page cannot be saved with v1.3.
False alarm, this works as it should. One has to uninstall 1.2 first before installing 1.3.
V1.4 (see first post) fixes the toggle button issue.
-
Thanks for your feedback. I have added some more gimmicks; attached is v1.5, which features some more improvements including to toggle each control individually (this is what I wanted to achieve in the first place for my personal needs). This replaces the compatibility mode setting (which I found confusing in the first place). Anyway, in the end the compatibility mode sort-of survived: the proper JS lib is included depending on the admin's preferences and the visitor's browser.
During development of a plugin it's mandatory to uninstall, then perform the SVN checkout, then re-install.
Thanks for resolving the issues you brought up.
-
V1.5 is really nice.
We often assess the importance of keeping things as small as possible very differently (and in the end one reason for compatibility mode was to keep the JS files as small as possible). I am really glad that you kept it 'under the hood' - it saves 5,6 Kbyte of stuff to load.
V1.6 adds the missing icons for the LED sliders. Was a bit 'tricky' to make this work. ;-)
-
v1.7 includes the latest changes.
-
v1.7 includes a bug ;) Instead of the sharpness image 'undefined' is displayed. See attachment.
-
No bug. Clear your browser cache.
-
Indeed bug. Will be fixed with 1.8.
-
Fixed.
-
Okay works now (nice sword 8)).
You use <button>s as labels for the sliders. Nothing happens if you click on that buttons (neither in my local testbed nor in your online testbed). Will these buttons get a function in a future release? If not, I suggest not to use buttons, as people like me click madly on that buttons and wonder why nothing happens ;D
-
Yep, I did the same as Andre
-
It must be buttons to make it work.
-
That's not true. It works very well if you replace
function im_makeled(im_buttonstring,im_idstring,im_valstring,im_iconblub)
{
var im_tempstr = '';
if (im_buttonstring)
{
im_tempstr += '<button class="admin_menu" style="border:none;background-color:transparent;background-image:none;">'+im_buttonstring+' '+im_iconblub+' – </button><span></span>';
for(var im_i=-9;im_i<10;im_i++)
{
im_tempstr += '<a style="height:10px;border-bottom-width:1px;border-left-width:1px;border-top-width:1px;border-right-width:0px;border-style:solid;text-decoration:none;border-color:#222233;cursor:pointer" id="'+im_idstring+im_i+'" onclick="'+im_valstring+' = parseInt(this.id.substr(4)); im_setit();"> </a>';
}
im_tempstr += '<a style="height:10px;border-width:1px;border-style:solid;text-decoration:none;border-color:#222233;cursor:pointer" id="'+im_idstring+'10" onclick="'+im_valstring+' = parseInt(this.id.substr(4)); im_setit();"> </a>';
im_tempstr += '<button class="admin_menu" style="border:none;background-color:transparent;background-image:none;"> + '+im_iconblub+' '+im_buttonstring+'</button><br />';
}
return im_tempstr;
}with
function im_makeled(im_buttonstring,im_idstring,im_valstring,im_iconblub)
{
var im_tempstr = '';
if (im_buttonstring)
{
im_tempstr += '<span class="admin_menu" style="border:none;background-color:transparent;background-image:none;">'+im_buttonstring+' '+im_iconblub+' – </span><span></span>';
for(var im_i=-9;im_i<10;im_i++)
{
im_tempstr += '<a style="height:10px;border-bottom-width:1px;border-left-width:1px;border-top-width:1px;border-right-width:0px;border-style:solid;text-decoration:none;border-color:#222233;cursor:pointer" id="'+im_idstring+im_i+'" onclick="'+im_valstring+' = parseInt(this.id.substr(4)); im_setit();"> </a>';
}
im_tempstr += '<a style="height:10px;border-width:1px;border-style:solid;text-decoration:none;border-color:#222233;cursor:pointer" id="'+im_idstring+'10" onclick="'+im_valstring+' = parseInt(this.id.substr(4)); im_setit();"> </a>';
im_tempstr += '<span class="admin_menu" style="border:none;background-color:transparent;background-image:none;"> + '+im_iconblub+' '+im_buttonstring+'</span><br />';
}
return im_tempstr;
}
-
Please test very carefully in all browsers. In some FF and Opera versions the effects havent been applied in one step but one after each other with screen redraws inbetween using span instead of buttons. That's as well the reason for the empty span tag. If your change works everywhere, feel free to commit it!
-
In some FF and Opera versions the effects havent been applied in one step but one after each other with screen redraws inbetween
I can confirm that behavior, but cannot replicate it reliably. But it exists in the current version, too. I've tested it on my local testbed and my gallery. It seems that it occurs after a page reload (ctrl+shift+r in Firefox). Your online testbed currently returns a blank page, so I cannot test it there.
I'll try to investigate.
Edit: just tested at your production gallery. Problems also occurs there if I press ctrl+shift+r in Firefox.
-
Okay here is what I found out using v1.8.
View an intermediate sized picture. Everything works fine.
Then (using Firefox) press ctrl+shift+r or ctrl+f5 (with that shortcuts you reload the page without loading data from the cache). Now the different effects will be applied after each other.
Now press f5 or call the page again. Everything works fine.
I cannot replicate that behavior in Chrome, as I don't know the correct shortcuts or the bug doesn't exist there.
-
@Joachim:
Your changes in install/uninstall functions seems to have introduced a bug for me, see screen shot. I assume it's again a wrong cr/lf thing (see screen shot), but even if I correct it, I get
While executing query 'UPDATE cpg15x_config SET value= WHERE name='transparent_overlay'' in plugins/image_manipulation/codebase.php on line 171
mySQL error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'WHERE name='transparent_overlay'' at line 1
everytime trying to uninstall the plugin.
-
Not sure what went wrong. Please try rev 7066.
-
Fixed in SVN
-
Okay here is what I found out using v1.8.
View an intermediate sized picture. Everything works fine.
Then (using Firefox) press ctrl+shift+r or ctrl+f5 (with that shortcuts you reload the page without loading data from the cache). Now the different effects will be applied after each other.
Now press f5 or call the page again. Everything works fine.
I cannot replicate that behavior in Chrome, as I don't know the correct shortcuts or the bug doesn't exist there.
Can someone confirm that behavior? I cannot reproduce it without the mentioned page reload, even if I remove the <button> tags.
-
That's correct, behaves here the same way, but only after force reload.
-
I removed the <button> tags from the sliders in r7080. I cannot determine any unexpected behavior. Can everyone please test if the effects are applied simultaneously and not one after each other? Thanks.
-
Works, but doesn't look nice with my skin (or classic) because you removed the button class and now the font of the LED description is different from the button description.
-
You're right. I hadn't noticed that. Changed in r7081.
-
Released v2.0. I don't think there's much more room for improvement to be honest.
-
nothing happen... something wrong?
-
nothing happen... something wrong?
Is that supposed to be a test report? You should be aware that there is currently no support for CPG1.5.x. Additionally you should read the board rules - http://forum.coppermine-gallery.net/index.php/topic,55415.msg270616.html#msg270616
-
That guy is a board spammer. I'm just currently deleting his postings and banning him.
-
I noticed an issue.
Set 'Use cookies' to 'Yes' and login as admin or user. Now view some pictures (in my case I try to view a whole album, start at the first image and click 'next', 'next', 'next', ...).
After a few pictures (sometimes 1, sometimes >50) I get logged out. Reason: the session cookie will be updated (or a new one is created and the old one deleted, I'm not sure). The client_id (cookie name) stays the same, but the session_id (cookie value) differs.
I haven't figured out why it happens. Everything works fine if you disable the cookie usage in the plugin configuration.
Can someone confirm that issue? I tested it with Firefox 3.5, Chrome 3, IE6 and IE8 on my online gallery (updated from 1.3.x -> 1.4.x -> 1.5.x) with lots of plugins and on a new local installation without any other plugin installed.
I've attached 3 screen shots of my Firefox cookie console (if you keep it opened while surfing, it doesn't remove 'old' cookies. If I re-open my cookie console, only one cookie (the latest) exists).
Edit: I've traced it back to that function
function im_createCookie(im_name,im_value) {
var im_date = new Date();
im_date.setTime(im_date.getTime()+62208000000);
var im_expires = "; expires="+im_date.toGMTString();
document.cookie = im_name+"="+im_value+im_expires+"; path=/";
}Maybe it's better to save only one cookie that consists an encoded array instead of saving one cookie per image?
-
Please check the current SVN version, try it out and give some feedback if it improves things for you and if it works correctly.
It is impossible to save all data to just one cookie (max cookie size is 4096 byte). So the script will now use one cookie per 100 files, meaning
0 <= pid < 100 is saved in cookie im_0
100 <= pid < 200 is saved in cookie im_1
200 <= pid < 300 is saved in cookie im_2
...
So the number of cookies has dropped to a hundredth. Hopefully this won't overstrain Firefox anymore. ;)
-
BTW:
Number of cookies per domain allowed in modern browsers are
IE7/IE8 => 50
Firefox => 50
Opera => 30
Safari => no limit
If you set more cookies, the oldest ones will be deleted. So the new cookie solution will work for galleries with 4500 files without a problem in most browsers, but afterwards we're in trouble again... In the long run, it would be sensible to save the value in the database via PHP / AJAX.
-
What do you propose, adding it to the users table? Could lead to some very big databases. Maybe have an admin tool to clear data for any user that has not visited for x days.
-
Seems to work better now. I've viewed about 400 pictures and didn't get logged out.
I suggest adding the data to the cookie only if the user has manipulated the image (value != 0). Currently I have cookie contents like
_87753_0_87754_0_87755_0_87756_0_87757_0_87758_0_87759_0_87760_0_87761_0_87762_0_87763_0_87764_0_87765_0_87766_0_87767_0_87768_0_87769_0_87770_0_87771_0_87772_0_87773_0_87774_0_87775_0_87776_0_87777_0_87778_0_87779_0_87780_0_87781_0_87782_0_87783_0_87784_0_87785_0_87786_0_87787_0_87788_0_87789_0_87790_0_87792_0_87793_0_87794_0_87795_0_87796_0_87797_0_87798_0_87799_0_87701_0_87703_0_87705_0_87707_0_87709_0_87711_0_87713_0_87715_0_87717_0_87719_0_87721_0_87723_0_87725_0_87727_0_87729_0_87730_0_87731_0_87732_0_87733_0_87734_0_87735_0_87736_0_87737_0_87738_0_87739_0_87740_0_87741_0_87742_0_87744_0_87745_0_87746_0_87747_0_87748_0_87749_0_87750_0_87751_0_87752_0
Furthermore you could store only the pid%100 instead of the whole pid (i.e. if the pid is 87753 and the cookie name is im_877 you store only '53') and then drop one underscore to save some space.
Example.
Now:
_87753_0_87754_0_87755_0_87756_0_87757_0
With my suggestion:
530_540_550_560_570
What do you propose, adding it to the users table? Could lead to some very big databases.
Yes. That should be configurable in the plugin config. First we need to change the code in a way, that it don't stores unmanipulated images (value = 0).
If you think of exif data and hit/voting stats tables, we already have some space consumer. But that's the decision of the webmaster.
-
Just did that and encoded the values with toString / parseInt so we have now 400 pids per cookie. Meaning it will work in galleries with up to 18000 pid's. Values of 0 are not saved anymore. I think that's enough for most purposes.
-
I second Phill's suggestion to store stuff inside the database and not inside the cookie. Pruning old records in the database is of course mandatory. This should take care of registered users, which is our target audience imo. The feature to store something is not that important for guests imo - we could store some stuff inside a cookie for the guests, but ideally only a unique visitor ID that correlates to the database table that actually stores the per pic preferences.
If you decide to implement storage inside the database I suggest to ask the admin on the plugin's config screen what amount of records should be kept before the pruning of older records (the database garbage collection) kicks in. You could provide an estimate there as well about the space consumption of those records inside the database.
However, I suggest coming up with a database table of it's own instead of using the user table - to keep our table clean. Additional benefit would be that the unique ID for the guest and subsequently storage of the guest records inside the database could be implemented that way as well.
Using more than one cookie is bad design imo and should be discarded.
-
Might be a good way to handle it, but this would produce one AJAX request everytime a button or LED slider is touched. :o
I think that's just plain overkill for many servers, and it certainly would drop the performance of the plugin in a negative way.
-
Then use the cookie as a temporary storage: write the data you need to write to the cookie. On the next pageload, read the data from the cookie and write that to the database. You end up with "delayed" storage, but the result would be the same imo.
-
I probably won't, sorry. I am absolutely sure that my gallery will not come beyond 18,000 files in the next ten years, so I have time untill cpg 2.7.x I think (and I love JS, but I hate php/sql). ;)
I'll add a remark to the docs that use of cookies should be turned off if there are PIDs in the gallery > 10,000 to make sure everything works fine. If anyone is interested => feel free, this is GPL! ;D
-
Then use the cookie as a temporary storage: write the data you need to write to the cookie. On the next pageload, read the data from the cookie and write that to the database. You end up with "delayed" storage, but the result would be the same imo.
The result is a different one, if the user closes the page after image manipulation.
-
Released v2.2.
-
I'll add a remark to the docs that use of cookies should be turned off if there are PIDs in the gallery > 10,000 to make sure everything works fine.
You could even add a check to the install function in codebase.php for that number of images.
-
I slept on it. I think it's better to make the number of cookies to be used configurable, merge all data to one array and save them in packets of 300 to the cookies. This way, the limit wouldn't be PIDs < 18000, but the visitor would have to actively change the settings of 6,000 images in the gallery before a problem might occur (if number of cookies is set to 20 which is very save). Further we'd have only the number of cookies we really need (in 99% of all cases 1) instead of 1 per 100 PIDs. And we could implement a FIFO mechanism, so if the visitor clicks on the buttons of the 6,001st pic, the oldest data would get deleted. Shouldn't be too much work, and I think it's very unlikely that a visitor really modifies the settings of more than 6000 images of a gallery.
-
Version 2.2 attached in initial post.
Changelog:
- Removed buttons and sliders from documents
- Apply plugin hook only if DISPLAYIMAGE_PHP is set
-
Hello,
first of all, very nice plugin!
I tried to add a break between the buttons for flip vert. and flip horiz. because it breaks the table on the page where the filmstrip sits.
Can anybody help?
Thanx in advance
-
Open js/image_manipulation.js, find
im_btn.innerHTML += ' <button value="'+js_vars.im_strflipv+'" id="but_flipv" onclick="im_isflipv = (im_isflipv) ? 0 : 1; '+'im_setit();" class="button" style="cursor:pointer;margin-top:4px;" type="button">'+js_vars.im_icon_flipv+js_vars.im_strflipv+'</button>';and replace with
im_btn.innerHTML += ' <br /><button value="'+js_vars.im_strflipv+'" id="but_flipv" onclick="im_isflipv = (im_isflipv) ? 0 : 1; '+'im_setit();" class="button" style="cursor:pointer;margin-top:4px;" type="button">'+js_vars.im_icon_flipv+js_vars.im_strflipv+'</button>';
-
Thank you...it works!
-
I have attached a new version (2.3) to the first posting of this thread.
New:
Support for IE 9 in standards mode - no more limitations in the newest Internet Explorer, because it finally supports the canvas browser element that is needed to make all features (contrast, saturation, sharpness, sepia) work. Please give me a feedback if it works like expected. For older IE versions there should be no difference.