Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Creating comment from admin - disable JQueryRotate in that particular comment

Hi all,

Firstly, apologies if this has been asked before I could not find my answer upon searching.

I have JQueryRotate & rotate90 javascript files, running through the ImageUpload plugin (see thread: http://vanillaforums.org/discussion/24908/image-upload-orientation-changer/p1)
What I want to achieve is for admin to post banner ads in the comments section which will be linked to a company product for that particular category, but I have the JQueryRotate files running (which means when the banner is clicked, even though the link html works, it rotates the banner). I would like to be able to write (in html) those particular comments, either disabling the JQueryRotate or creating a new class - which I have really struggled to make either work). This is if it is even possible.

I am using Vanilla 2.0.18.8. I am using GrayScale Blue custom theme (heavily modified) - http://vanillaforums.org/addon/grayscale+blue-theme.

I can find my way around the files to add/change/adapt, but I am not a coder by any means.

I've already been helped so much by this community, and once the forum is up and running I intend to be making donations (and hopefully plugin contributions once my knowledge increases).

Thanks again,
Lisa.

«1

Comments

  • Options
    hgtonighthgtonight ∞ · New Moderator

    Do you now what formatter you are using? (E.g. Markdown, Html, BBCode)

    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.

  • Options

    html - please :)

  • Options
    hgtonighthgtonight ∞ · New Moderator

    The biggest issue you will run into is that HTMLawed strips out inline declarations by default, if I recall correctly. You want to insert images that are not picked up by your rotate plugin but want to choose which images through some means, and you want to restrict this ability to admins. Is this correct?

    Do you have a live site I could check out just to get my head wrapped around your rotating solution?

    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.

  • Options

    Sorry, I confused myself just typing out my question! :)

    It doesn't have to be html (the easiest and/or most effective way will be great).
    I'm just a little more comfortable using html.

    Basically, I am forum admin, and will be posting banner adverts in each model category that I do not want the rotate click function attached to.
    It doesn't have to be restricted to admin permissions. It's not secure content.

    I would just like to be able to comment with a banner, which so far I have been doing through html.

    The live site is http://www.rrcuk.com (I will message you the admin login details & page info).

    Thanks @hgtonight, I appreciate your help.

  • Options

    I would make more sense to prevent the event from happening, by excluding your case from the logic.

    You might be able to prevent the event from being reached too.

    Better solution would to create short tag for you banners or a special type of post, through a plugin.

    I expect you are adding these manually for a reason.

    grep is your friend.

  • Options

    Hi @x00,

    I am open to whichever works easiest. If it means all images on that particular page cannot rotate then that would not be a problem, as the pages I want this on would tend to have just admin ad banners.

    I want to add them manually as I am already using Pockets for my main banner, and the ads I will be posting will be constantly changing (and I would like them to remain on the thread too). The easiest way I could see was to insert the image code into a comment.
    But again, I am no expert.

    Thankyou.

  • Options

    My view this a usability issue where any image in comments is rotated indiscriminately when clicked on, especially within an anchor.

    I would the plugin maker should refine this idea.

    grep is your friend.

  • Options
    hgtonighthgtonight ∞ · New Moderator
    edited October 2013

    EDIT - Please don't use this solution! @peregrine provided a better one below

    After looking in to this (thanks for the PM), this is my recommended action.

    Use theme hooks to add a class on discussions/comments created by admins and update your jquery selector to not include elements with this class.

    In your theme hooks file, add this:

    public function DiscussionController_BeforeCommentDisplay_Handler($Sender) {
      $this->_InjectCssClass($Sender);
    }
    
    public function PostController_BeforeCommentDisplay_Handler($Sender) {
      $this->_InjectCssClass($Sender);
    }
    
    private function _InjectCssClass($Sender) {
      $Object = GetValue('Object', $Sender->EventArguments);
      $CssRoles = $Object ? GetValue('Roles', $Object, array()) : FALSE;
      if(!$CssRoles)
        return;
    
      foreach($CssRoles as &$RawRole)
        $RawRole = 'role-' . str_replace(' ', '_', strtolower(Gdn_Format::Url($RawRole)));
    
      if(count($CssRoles))
        $Sender->EventArguments['CssClass'] .= ' ' . implode(' ', $CssRoles);
    }
    
    /**
     * Add the insert user's roles to the comment data so we can visually
     * identify different roles in the view.
     */
    public function DiscussionController_Render_Before($Sender) {
      $Session = Gdn::Session();
      if($Session->IsValid()) {
        $JoinUser = array($Session->User);
        RoleModel::SetUserRoles($JoinUser, 'UserID');
      }
      if(property_exists($Sender, 'Discussion')) {
        $JoinDiscussion = array($Sender->Discussion);
        RoleModel::SetUserRoles($JoinDiscussion, 'InsertUserID');
        RoleModel::SetUserRoles($Sender->CommentData->Result(), 'InsertUserID');
      }
    }
    
    public function PostController_Render_Before($Sender) {
      if(property_exists($Sender, 'CommentData') && is_object($Sender->CommentData))
        RoleModel::SetUserRoles($Sender->CommentData->Result(), 'InsertUserID');
    }
    
    public function Setup() {
    
    }
    

    Then modify your /ImageUpload/js/rotate90.js file:

    var value = 0;
    $( 'li:not("role-administrator") div.Message img').live( "click", function() {
      value +=90;
      $(this).rotate({ animateTo:value})
    }); 
    

    NOTE - I couldn't test this on your site, so let me know if that doesn't work. Also, I shamelessly copied the code for your theme hooks file from Role Title by Lincoln. You could use that plugin if you don't mind the roles being inserted by the usernames.

    P.S. The rotate90.js code saves the rotation value so all subsequent rotations (even on different images) will rotate by 90 degrees more than the last one. Not sure if you noticed that.

    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.

  • Options
    hgtonighthgtonight ∞ · New Moderator

    The only issue with my solution is that no images will ever be rotated on click if they are posted by an administrator.

    You could modify the jQuery selector to only rotate images that aren't wrapped in a link (a tag).

    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.

  • Options

    I can't get into your site to see.

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

  • Options

    all of this is very backwards. /ImageUpload/js/rotate90.js shouldn't rotate on click anyway, that is just poor IMO, they should come up with an interface for rotating images, or make a specific class for uploaded images.

    better still rotate in the author interface on the client then do the equivalent on the server and insert the correctly orientated image. or save the orientation to be applied on display.

    grep is your friend.

  • Options
    peregrineperegrine MVP
    edited October 2013

    @marthajane77

    when inserting image - just use class .norotate

    <img class="norotate" alt="image" src="https://us.v-cdn.net/5018160/uploads/userpics/797/n19R2RA82NXE7.jpg">

    and change the rotate90

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

    worked for me.

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

  • Options
    hgtonighthgtonight ∞ · New Moderator

    I thought HTMLawed stripped out classes.

    I learn something new everyday!

    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.

  • Options

    I learn something new everyday!

    hg - is that harvard grad

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

  • Options

    hg is Mercurial SCM

    grep is your friend.

  • Options
    peregrineperegrine MVP
    edited October 2013

    @x00 said:
    hg is Mercurial SCM

    he said he wasn't mercurial in a previous discussion. I'm still trying to guess the meaning of hg, maybe something to do with htmlawed :).

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

  • Options
    vrijvlindervrijvlinder Papillon-Sauvage MVP

    I think hg is short for high, hightonight and every night after that ;) lol

    when inserting image - just use class .norotate

    how Brilliant !

  • Options

    I'd like to point out this is a model discussion by the OP.

    • version mentioned.
    • good description
    • gratitude expressed
    • new post with new issue.
    • and a link for reference.

      follow in the footsteps of @marthajane77 and you will be fine.

    for new posters let me recommend

    http://vanillaforums.org/discussion/23130/forum-post-ettikett-etiquette

    http://vanillaforums.org/discussion/17954/food-for-thought-forum-etiquette

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

  • Options

    Yet again you guys have all given me lots to implement :)

    Thank you!

    @peregrine - you're giving me a big head! :)

  • Options

    Sorry for the delayed reply too, something came up.
    I shall let you all know how I get on!
    I will try @peregrine's solution first and then yours @hgtonight. I appreciate the hard work you've put in for me.

Sign In or Register to comment.