1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Looking to modify the attachment editor

Discussion in 'Styling and Customization Questions' started by franklee628, Jul 9, 2015.

  1. franklee628

    franklee628 Member

    I've been searching for this for a while, as members who creating a thread with a lot of pictures, let's say 100+, they will have to scrolling up and down to insert the attached pictures, which is a pain. I've tried to make the attachment editor position fixed so it will help a little, now I am thinking it would be nice to make it as overlay effects and draggable.

    After being searching over the internet for many days, I thought this could be a good option:

    Dialog | jQuery UI
    Draggable | jQuery UI

    These two links give good examples so I was trying to modify the code myself, I managed to find the template "thread_create" "PAGE_CONTAINER" and add/change the css and script accordingly, but the attachment editor won't showing up afterwards.

    I think it would be nice to have this feature implemented in the up coming version of Xenforo as it's really handy.

    Any help are much appreciated.
     
  2. franklee628

    franklee628 Member

    Guys after searching for a while I found this solution, works good on my site, I thought I should share this with others so I wrote the following guide, give a try if you are interested and let me know the result. For easier references I've highlighted codes in color so it will help when copy and paste. I've tested this on the Xenforo 1.4.8 default theme as well as UI.X, both working with no problems.

    Make sure you have a backup before doing following changes, I am not responsible for any problem caused.

    How to make Xenforo attachment editor draggable:


    1.Download tiynDraggable code from jQuery:
    tinyDraggable | jQuery Plugin Registry

    2.Extract and place jquery.tiny-draggable.min on your server folder xenforoinstallation/js/jquery or anywhere you like, if different please make sure you change the path accrodingly on section 3.

    3. Go to backend, appearance, template search, do the following changes:
    =====================================================
    page_container_js_body , add following to top of it:
    =====================================================
    <script>
    $(function() {
    $('#draggable').tinyDraggable({ handle: 'p' });
    });
    </script>


    =====================================================
    attachment_editor , add following to top of it:
    =====================================================

    <xen:require js="js/jquery/jquery.tiny-draggable.min.js" />

    Find the code <div class="AttachmentEditor">, change to <div id="draggable" class="AttachmentEditor">, which add id="draggable".

    =====================================================
    EXTRA.css , add following to top of it:
    =====================================================

    #draggable {
    position: fixed;
    top: 200px;
    right: 200px;
    width: 30%;
    height: 60%;
    overflow: scroll;
    z-index: 999999;
    background-color: white;
    opacity: initial;
    display: block;
    }


    4. You will need to add a title bar of the new attachment editor window to make sure it's only draggable via the title bar, not the window itself. Go to backend again, appearance, template search, do the following changes:

    =====================================================
    attachment_editor , add following to top of it:
    =====================================================

    <dl class="attachmentwindow">
    <dd class="main">
    <span><p>Attachment Editor</p></span>
    </dd>
    </dl>


    =====================================================
    EXTRA.css , add following to top of it:
    =====================================================

    .attachmentwindow {
    cursor: move;
    background-color: rgb(251, 228, 200);
    }


    Save all changes and test.

    ============================================================================================================================================
    ============================================================================================================================================

    I know it's not looking perfect but at least I got a good start, I am quite new to CSS, xenforo, as well as js, I wish someone experienced could help to make this better.

    I am planning to make the window more functional:
    Re-sizable
    Responsive
    Semi-transparent when mouse left
    Can be closed and reopened by clicking the "upload a file" button.
    Maybe more............
     

Share This Page