Some cool TVImageResizer changes

I wanted to make TVImageResizer script more flexible, by customizing image TV’s with own ’width’ and ’height’ properties.

Therefore i decide to use some TV fields that images don’t proceed at all. This 2 fields was:
1. Input Option Values (field ’elements’ in ’modx_site_tmplvars’ table)
2. Default Value (field ’default_text’ in ’modx_site_tmplvars’ table)
You can see these in the image attached.

After this i have to make some changes in "TVimageResizer.inc.php" file (the blue text):

if ($e->name == ’OnDocFormRender’) {

$result = $modx->db->select(’id,name,elements,default_text’, $tb_tmplvars, "type=’image’");
$tvs = ’’;
$tvs_width = ’’;
$tvs_height = ’’;

while ($row = $modx->db->getRow($result))
{
$tvs .= ",’" . $row[’id’] . "’";
$w = (intval($row[’elements’])>0) ? intval($row[’elements’]) : $th_width;
$tvs_width .= ",’" . $w . "’";
$h = (intval($row[’default_text’])>0) ? intval($row[’default_text’]) : $th_height;
$tvs_height .= ",’" . $h . "’";
}

$tvs = substr($tvs, 1);
$tvs_width = substr($tvs_width, 1);
$tvs_height = substr($tvs_height, 1);

$output = <<< OUT
<!-- TVimageResizer -->
<script type="text/javascript">
var trImgNames = [$tvs];
var trImgWidth = [$tvs_width];
var trImgHeight = [$tvs_height];
window.onDomReady(function(){
for (var i=0;i<trImgNames.length;i++){
var elem = $(’tv’ + trImgNames[ i]);
if(elem!=null){
var br = new Element(’br’);
var field1 = new Element(’input’,{type:’checkbox’, name:’rsz[]’, id:’rsz’+(i+1), value:trImgNames[ i]});
var label = new Element(’label’,{’for’:’rsz’+(i+1)});
var field2 = new Element(’input’,{type:’text’, size:’5’, name:’rszwidth[]’, value:trImgWidth[ i], ’styles’: {’width’:’20px’}});
var field3 = new Element(’input’,{type:’text’, size:’5’, name:’rszheight[]’, value:trImgHeight[ i], ’styles’: {’width’:’20px’}});
elem.getParent()
.adopt(br,field1,label.appendText(’resize’))
.adopt(field2).appendText(’x’,’after’)
.adopt(field3);
}
}
});
</script>
<!-- /TVimageResizer -->
OUT;

$e->output($output);

This way i have done customizable TV images with very own WIDTH and HEIGHT properties, witch you can see on second attachment.

I hope this will be useful for other people, who have same as my problems with TV images

After this i was thinking how can i automate the process, when the user select some image, the system (MODx) to make automatically ’resize’ on it.

I search in manager SOURCE CODE and found where have to do some changes - in the file "manager/includes/tmplvars.inc.php" (the blue text):

case "image": // handles image fields using htmlarea image manager
global $_lang;
global $ResourceManagerLoaded;
global $content,$use_editor,$which_editor;
if (!$ResourceManagerLoaded && !(($content[’richtext’]==1 || $_GET[’a’]==4) && $use_editor==1 && $which_editor==3)){
$field_html .="
<script type=\"text/javascript\">
var lastImageCtrl;
var lastImageNumber;
var lastFileCtrl;
function OpenServerBrowser(url, width, height ) {
var iLeft = (screen.width - width) / 2 ;
var iTop = (screen.height - height) / 2 ;

var sOptions = ’toolbar=no,status=no,resizable=yes,dependent=yes’ ;
sOptions += ’,width=’ + width ;
sOptions += ’,height=’ + height ;
sOptions += ’,left=’ + iLeft ;
sOptions += ’,top=’ + iTop ;

var oWindow = window.open( url, ’FCKBrowseWindow’, sOptions ) ;
}
function BrowseServer(ctrl) {
lastImageCtrl = ctrl;
lastImageNumber = ’rsz’+ctrl.substr(2);
var w = screen.width * 0.7;
var h = screen.height * 0.7;
OpenServerBrowser(’".$base_url."manager/media/browser/mcpuk/browser.html?Type=images&Connector=".$base_url."manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=".$base_url."’, w, h);
}

function BrowseFileServer(ctrl) {
lastFileCtrl = ctrl;
var w = screen.width * 0.7;
var h = screen.height * 0.7;
OpenServerBrowser(’".$base_url."manager/media/browser/mcpuk/browser.html?Type=files&Connector=".$base_url."manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=".$base_url."’, w, h);
}

function SetUrl(url, width, height, alt){
if(lastFileCtrl) {
var c = document.mutate[lastFileCtrl];
if(c) c.value = url;
lastFileCtrl = ’’;
} else if(lastImageCtrl) {
var c = document.mutate[lastImageCtrl];
if (c && c.value != url)
{
c.value = url;
var n = document.forms[’mutate’].elements[lastImageNumber];
if (n) n.checked = true;
}
lastImageCtrl = ’’;
lastImageNumber = ’’;
} else {
return;
}
}
</script>";
$ResourceManagerLoaded = true;
}
$field_html .=’<input type="text" id="tv’.$field_id.’" name="tv’.$field_id.’" value="’.$field_value .’" ’.$field_style.’ onchange="documentDirty=true;" />&nbsp;<input type="button" value="’.$_lang[’insert’].’" onclick="BrowseServer(\’tv’.$field_id.’\’)" />’;
break;

By doing these changes i have what i want!
Now every time when user selects some new image, the resize checkbox is automatically checked, and on Save document - a thumb of the new image was generated and used

You can see how it works on attached pictures.

Креативно и полезно, Благодаря Ако имаш желание сподели го и с Бългаското общество

//nice work thanks!