Advertisement:

Author Topic: TIP Use fineuploader in twitter  (Read 1760 times)

Adyyda

  • Sr. Member
  • ****
  • Posts: 435
TIP Use fineuploader in twitter
« on: April 28, 2016, 11:50:12 pm »
If you want to replace the old upload feature when posting a new listing with the new fineuploader which allows multiple images to be selected and uploaded in one step, here is what you have to do:

1. go to functions.php and after first  <?php (line 1)   add
Code: [Select]
    if(!OC_ADMIN) {
        osc_enqueue_style('fine-uploader-css', osc_assets_url('js/fineuploader/fineuploader.css'));
        osc_enqueue_style('twitter-fine-uploader-css', osc_current_web_theme_url('css/ajax-uploader.css'));
    }
    osc_enqueue_script('jquery-fineuploader');

2. go to item-post / item-edit and replace the code for photos with
Code: [Select]
                            <?php if( osc_images_enabled_at_items() ) { ?>
<div class="imagebox">
                    <h2><?php _e('Photos''vindeurgent'); ?></h2>
                    <?php if( osc_images_enabled_at_items() ) {
                        
ItemForm::ajax_photos();
                     
?>

                </div>
                            <?php ?>

3. make a file ajax-uploader.css with code
Code: [Select]
.ajax_preview_img img {
    max-width: 120px;
    max-height: 120px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#restricted-fine-uploader {
    padding-top: 1em;
    padding-left: 30px;
    margin-bottom: 20px;
}

.photos_div div, .ajax_preview_img {
    margin-right: 15px;
    padding: 10px;
    border: 1px black solid;
    width: 125px;
    height: 125px;
    background: white;
    margin-top: 10px;
}
.qq-upload-success div.ajax_preview_img img {
    width: initial;
}

.qq-upload-list li {
    background-color: #dff0d8!important;
    color: #333333!important;
    display: inline-block;
    min-height: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
    height: 200px;
    overflow: hidden;
}

.qq-upload-button {
    background-color: #f2dede;
    color: #333333;
    margin-bottom: 10px;
}

.qq-upload-file {
    width: 145px;
    height: 1em;
    display: block;
    overflow: hidden;
}

.qq-uploader {
    width: 100%;
}

.qq-upload-fail .qq-upload-status-text {
    background-color: #F2DEDE;
    padding: 5px 10px;
    display: block;
    border: solid 1px #D5B3B3;
    font-size: 14px;
    color: #7E0000;
    border-radius: 4px;
}
.qq-upload-status-text {
    display:none
}

and upload it into the css folder
« Last Edit: April 29, 2016, 12:08:03 am by Adyyda »