Issue with resizing, cropping, and rotating.

[ghost]

As has been mentioned in issue #1380 a similar issue is persistent with my installation of elFinder.

So far, I've checked that GD2 is installed, installed image-magick, added 'imgLib'=>'gd' to my connector options as per @nao-pon suggestion on getting thumbnails to work as mention in another issue. Thumbnails are created when images are uploaded, so that issue is gone.

Issue now, is when wishing to edit an image, the dialog opens, and all the options except the width, height, and quality fields are disabled.

The width and height are editable, but when clicking apply, the confirmation dialog works, but when applied another dialog is displayed with 'Invalid parameters for command "resize".'.

I also update to the nightly build as per @nao-pon suggestion from issue #1380.

Below is the Connector File, Nothing else except the CSS has been edited, but that shouldn't affect any of the script functionality I would assume.

<?php
error_reporting(0);
define('DS',DIRECTORY_SEPARATOR);
include_once dirname(__FILE__).DS.'elFinderConnector.class.php';
include_once dirname(__FILE__).DS.'elFinder.class.php';
include_once dirname(__FILE__).DS.'elFinderVolumeDriver.class.php';
include_once dirname(__FILE__).DS.'elFinderVolumeLocalFileSystem.class.php';
$settings=parse_ini_file('..'.DS.'..'.DS.'..'.DS.'core'.DS.'config.ini',TRUE);
if((!empty($_SERVER['HTTPS'])&&$_SERVER['HTTPS']!=='off')||$_SERVER['SERVER_PORT']==443)
    define('PROTOCOL','https://');
else
    define('PROTOCOL','http://');
define('URL',PROTOCOL.$_SERVER['HTTP_HOST'].$settings['system']['url'].'/');
function access($attr,$path,$data,$volume){
    return strpos(basename($path),'.')===0?!($attr=='read'||$attr=='write'):null;
}
$opts=array(
    'roots'=>array(
        array(
            'imgLib'=>'gd',
            'driver'=>'LocalFileSystem',
            'path'=>$_SERVER["DOCUMENT_ROOT"].DS.$settings['system']['url'].DS.'media'.DS,
            'URL'=>URL.'media/',
            'uploadDeny'=>array(
                'all'
            ),
            'uploadAllow'=>array(
                'image',
                'text/plain'
            ),
            'uploadOrder'=>array(
                'deny',
                'allow'
            ),
            'accessControl'=>'access',
            'attributes'=>array(
                array(
                    'pattern'=>'',
//                    'pattern'=>'!^/orders|backup|avatar!',
                    'hidden'=>true
                )
            )
        )
    )
);
$connector=new elFinderConnector(new elFinder($opts));
$connector->run();

This happens on a local machine, as well as a live server.
Local Machine is Linux Mint, Apache, PHP 5.9.4
Server is CentOS, Apache, PHP 5.9.4

[nao-pon]

@StudioJunkyard This looks like a client side of trouble. Please check with plain elfinder.html, or elfinder.src.html.

[ghost]

Having a look at the generated dialog content for resizing in Chrome's Dev Tools. The Resize, Crop and Rotate Radio Input's have disabled attributes by default. Am I right in assuming that if the dependency requirement's are met (i.e. installed system libraries to perform those actions) then elFinder would enable those radio buttons. I'm also thinking that may be why even the resize isn't working as elFinder isn't getting back expected results to allow resizing to work.
As mentioned above, I have checked that GD is installed, Image-magick is installaed, and I tried it with that as well.

[ghost]

Not sure if this helps you track down the issue, this is what's sent when the resize is requested to elFinder:
GET http://localhost/LibreCMS/core/elfinder/php/connector.php?cmd=resize&target=l1_dGVzdC5qcGc&quality=80&mode=&_=1463542313093 200 OK 60ms

This is the response:
{"error":["errCmdParams","resize"]}

Is it me? I entered 300 for the width, the height was auto generated (not an issue). Shouldn't there also be sent the width, and height in the url?

EDIT: Issue is also persistent in Firefox.

[nao-pon]

Did you check with elfinder.html or elfinder.src.html?

And, Can you show me your screen shot?

[ghost]

The elfinder.html after modifying the connector to access the correct folder works.
I did notice that the selectors in the dialog aren't using the Radio button itself, I assume they've been restyled to use labels?

[ghost]

Looks like it's something to do with the styling, as you've pointed out. But elF shouldn't be affected by other styles, or they shouldn't interfere, so something is overriding.
I also tried removing all the unnecessary css includes, and only allowed what elF require's and uses in the sample, and even tried including them last in the hopes the elF CSS would override styles that come before hand. No luck the radio button selector's through out elF get overridden. This is something that shouldn't happen, would it be an idea that elF uses it's own classes for these, that way other CSS Frameworks won't interfere with elF's styles.

As you can see the dialog doesn't have the styled radio buttons like the default elF does using the sample .html file.

NOTE: I did try it with the elfinder.html, and everything worked. Hence why the image in the screen shot is rotated.

[ghost]

As you can see below, I've called the elfinder.html from within my CMS's folder structure where elF is located, and the styling is fine, and the image editing works.

[ghost]

The more I look at the source, the more I think it's got more to do with how the dialog and elements have been implemented.

Anybody should be able to override the style of the elements, without interfering with the functionality.
For e.g., there's styles that are injected into the elements that aren't exposed in the stylesheet, and the id's for elements look very random resize-elfinder-l1_dGVzdC5qcGc-resize. I get that the label has the for=resize-elfinder-l1_dGVzdC5qcGc-resize and the radio button has that id, and the radio button should be hidden, and clicking the label activates the associated radio button. But why is the javascript adding an attribute to disable those radio buttons?

Plus, I've gone through the full and minified, and theme.css to try and determine what bootstrap styles are interfering, can't find any direct styling for the radio button and it's associated label elements.

[ghost]

I just tried a little experiment, I added all the classes and javascript to the elfinder.html file so I could remove each reference until I find which file has whatever is affecting the dialog adversely. At this stage I haven't removed any of the added classes.

However, when I removed the bootstrap.js, everything works fine again. So something with Bootstrap's JS is interfering with elFinder's script. Exactly what, I don't know yet.

[ghost]

Ok, I came across issue #740 and added:

var btn = $.fn.button.noConflict(); // reverts $.fn.button to jqueryui btn
$.fn.btn = btn; // assigns bootstrap button functionality to $.fn.btn

Which fixes it, completely. Bloody Bootstrap.
Thanks for you assistance on this.

[nao-pon]

Ah! I got it. Congratulations!

[ghost]

Cheers for your help. Two of my client's are really happy that it works now. Now to fix the bootstrap theme for elF.