Users running a non-download version of Vanilla (pulled from github), on branch release/2019.016 or master from the last 2 weeks should upgrade to release/2019.017 or latest master for security reasons. Downloaded official open sources releases are not affected.
Please upgrade here. These earlier versions are no longer being updated and have security issues.

Image Upload Orientation Changer

This discussion is related to the ImageUpload addon.

Hi there,

Firstly, thanks for an awesome plugin!
Is there a way that I can add a function for users (especially mobile) to change the orientation of the image before file upload?

Many thanks,
Lisa

«13

Comments

  • hgtonighthgtonight ∞ · New Moderator

    Probably not, but @chuck911 can tell you if he wants to add that feature.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    That plugin uses a JS library and I've found that: https://github.com/moxiecode/plupload/issues/60
    It's 3 years old, so maybe the author changed his mind, but neither in the feature list nor in the forum of the plugins homepage is any hint for a rotation feature.

    I'd assume adding such a feature on top of a third party library would be an immense effort...


    marthajane77
  • hgtonighthgtonight ∞ · New Moderator

    That is just the frontend image upload script, the backend still uses core Vanilla classes (Gdn_Upload and Gdn_UploadImage). These don't support rotation after upload.

    Image rotation is supported by GD (the common php image manipulation library), so it could be done. But it would require forking Gdn_UploadImage, adding the rotation capability, adding an interface to rotate the image, and then packaging it up nicely.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    UnderDogmarthajane77
  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    I have to admit that I have not tested that plugin by myself. Could something like that help: http://www.cropzoom.com.ar/demo/ ?

    It has to be wrapped into the plugin but it already has the crop & rotate logic. Letting the core classes rotate and crop the image doesn't seem to be useful in this case, for you'd need a preview for it. And if the preview already has altered the picture, there's no need for the core class to do it again.


    marthajane77
  • hgtonighthgtonight ∞ · New Moderator

    Looking at that plugin, it still does the rotation through imagerotate() after upload.

    The plugin would give you the guts to put in your forked class, and the interface. Just have to massage it into Garden.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    R_J
  • Thanks guys, your help is very much appreciated.

  • Rotation before upload is quit difficult, mobile devices don't support flash.

    We could just leave a "rotation mark", and rotate in backend(php), it's easy.

    But, when and how does the users deside to change the orientation of image uploaded(or to be upload) ? It's seems break the simplicity of interactivity. (and I am lazy !)

    So I won't add this feature, others may fork my plugin

    what's more? there's "image-orientation" css attribute, but it's not supported by any browser now. https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation

    peregrinehgtonightmarthajane77
  • hgtonighthgtonight ∞ · New Moderator

    @chuck911 said:
    But, when and how does the users deside to change the orientation of image uploaded(or to be upload) ? It's seems break the simplicity of interactivity. (and I am lazy !)

    UI is always the difficult part it seems. :D

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Thanks to all for your help & looking into this for me.

    Is there no way I could get this to work by adding to my existing code? I'm sorry for the lack of experience, I have some, but limited experience with .php, .css, .js, etc.
    Users on my beta forum are complaining that when they upload images they are sideways. I've tried looking into this, and think it's an android/Samsung orientation issue when the pictures are taken. However, trying to explain this to everyone seems to be falling on deaf ears, and there are multiple requests for an image orientation changer.

    Thanks again,
    Lisa

  • peregrineperegrine MVP
    edited September 2013

    @marthajane77

    An alternate idea....

    AFTER IMAGE IS UPLOADED inline (not for attachments) a user could click on image to rotate by 90 degrees.

    you could do something with jquery.

    • 1 download this code.

    http://code.google.com/p/jqueryrotate/

    add it to the js folder of the plugin - name the file

    plugins/ImageUpload/js/jQueryRotate.js


    you could change the "click" to "mouseover" and put a duration or timer in it as well.

    • 2 add this code called in plugins/ImageUpload/js/rotate90.js

      var value = 0
      $( "img" ).live( "click", function() { 
                  value +=90;
                  $(this).rotate({ animateTo:value})
              });
      

    3 - look for this line in default.php

            $Sender->AddJsFile('imageupload.js', 'plugins/ImageUpload');
    

    and add these two lines below it.

        $Sender->AddJsFile('jQueryRotate.js', 'plugins/ImageUpload');   
        $Sender->AddJsFile('rotate90.js', 'plugins/ImageUpload');    
    

    it worked for me you click on the img and it rotates 90 degrees. with each click.

    not sure how well it interacts with the thumbnails and file upload plugin.
    but if you added a special class to the files you want to rotate - you could get it going.

    just offering this as another option for user viewing. may not be great - but it is what it is

    hg said:
    Looking at that plugin, it still does the rotation through imagerotate() after upload.

    The plugin would give you the guts to put in your forked class, and the interface. Just have to massage it into Garden.

    or you could test for mobile device and imagerotate (but you would need to guess which way to rotate 90% clockwise or 90 degree counter-clockwise :).

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    marthajane77hgtonight
  • x00x00 MVP
    edited September 2013

    That has no influence on uploads.

    grep is your friend.

  • peregrineperegrine MVP
    edited September 2013

    That has no influence on uploads.

    correct the viewer has the influence by clicking to view the orientation after upload.

    //for mouse click
    var value = 0
    $( ".Item img" ).live( "click", function() {
    value +=90;
    $(this).rotate({ animateTo:value})
    });

     // mouse over
    
     $( ".Item img" ).live( "mouseover", function() {  
                $(this).rotate({animateTo:90})
    });
    
     $( ".Item img" ).live( "mouseout", function() {        
                $(this).rotate({animateTo:0})
            });
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    marthajane77
  • x00x00 MVP
    edited September 2013

    @peregrine said:
    correct the viewer has the influence by clicking to view the orientation after upload.

    This isn’t good solution with hundreds of avatars.

    grep is your friend.

  • @peregrine said:
    correct the viewer has the influence by clicking to view the orientation after upload.

    Despite that, you can also use the CSS3 transform property to rotate images. http://www.cssrotate.com/

    Add Pages to Vanilla with the Basic Pages app

    peregrinemarthajane77hgtonightUnderDog
  • Unfortunately people are getting more an more lazy with image editing, which used to be an essential skill. Even now people don't expect to resize there images nor know how to, they just expect it to "work".

    grep is your friend.

  • peregrineperegrine MVP
    edited September 2013

    . removed.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • Hi @peregrine

    Thank you; yours will be the first solution I try, seeing as you explained it easily for me to understand :) The code examples really help.
    I'm not fussed whether people end up with sideways avatars (I shall just display a message advising them of avatar requirements).

    @x00 I completely agree about the laziness of pic editing, but I am faced with the problem of a bunch of users that can just about take the pics, let alone upload correctly. The first thing they want in a forum is to be able to show off their latest RC models, so there's no way around an image ban I'm afraid :(

    Many thanks to everyone else (@hgtonight, @R_J & @Shadowdare) who have contributed to this thread, and to @chuck911 too for the original plugin.

    Lisa.

  • Once I'm done meddling with with the test forum I'll post a link so you can all see your hard work in place :)

  • peregrineperegrine MVP
    edited September 2013

    @marthajane77

    @Shadowdare said

    Despite that, you can also use the CSS3 transform property to rotate images. http://www.cssrotate.com/

    Please leave an "insightful" or "awesome" like on my posts if you find them helpful!

    your link for transform and css proved easiest. ok tagged it as insightful :)
    and once again http://vanillaforums.org/discussion/comment/193045/#Comment_193045

    alot simpler just doing 6 lines or so lines of css and does the same as the jquery code.

    .Message img:hover { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg); 
    }
    

    but the jQuery just for the sake of it should be corrected to if it was used and would prevent avatars from spinning.

     $( 'div.Message img').live( "mouseover", function() {  
                $(this).rotate({animateTo:90})
    });
    
     $('div.Message img' ).live( "mouseout", function() {        
                $(this).rotate({animateTo:0})
            });
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    marthajane77
  • Thankyou :)

Sign In or Register to comment.