Site icon Osclass Documentation & Knowledge Base

Integrate user image uploader to user profile

Osclass now provides built-in profile (avatar) image uploader feature, however most of themes does not leverage it as they were built on profile picture or avatar plugins.

Let’s take a look how to quickly integrate built-in image uploader to your theme as well. We will use “your_theme” as sample, replace it with folder name of theme you are using (i.e. alpha, beta, gamma, delta, epsilon, veronika, stela, …)

There are 2 versions of this guide – more complex for Osclass 8.1.2 or lower and simplified for Osclass 8.2.0 and higher versions.

Osclass 8.2.0 and higher

  • Go to file oc-content/themes/your_theme/user-profile.p
  •  <?php if(osc_profile_img_users_enabled()) { ?>
      <div class="control-group">
        <label class="control-label" for="name"><?php _e('Picture', 'sigma'); ?></label>
        <div class="controls">
          <div class="user-img">
            <div class="img-preview">
              <img src="<?php echo osc_user_profile_img_url(osc_logged_user_id()); ?>" alt="<?php echo osc_esc_html(osc_logged_user_name()); ?>"/>
            </div> 
          </div> 
    
          <div class="user-img-button">
            <?php UserForm::upload_profile_img(); ?>
          </div>
        </div>
      </div>
    <?php } ?>
    

    That’s it, all should be setup now. You may want to adjust CSS styling in your theme for buttons.

    Osclass 8.1.2 and lower

    if(osc_profile_img_users_enabled() == '1') {
      osc_enqueue_script('cropper');
      osc_enqueue_style('cropper', osc_assets_url('js/cropper/cropper.min.css'));
    }
    <?php if(osc_profile_img_users_enabled()) { ?>
      <div class="control-group">
        <label class="control-label" for="name"><?php _e('Picture', 'sigma'); ?></label>
        <div class="controls">
          <div class="user-img">
            <div class="img-preview">
              <img src="<?php echo osc_user_profile_img_url(osc_logged_user_id()); ?>" alt="<?php echo osc_esc_html(osc_logged_user_name()); ?>"/>
            </div> 
          </div> 
    
          <div class="user-img-button">
            <?php UserForm::upload_profile_img(); ?>
          </div>
        </div>
      </div>
    <?php } ?>

    That’s it! Now just remove code related to image uploader plugins (profile_picture, avatar, …).

    Your final code should look like this (removing not important parts):

    <?php
    /*
     * Copyright 2014 Osclass
     * Copyright 2021 Osclass by OsclassPoint.com
     *
     * Osclass maintained & developed by OsclassPoint.com
     * You may not use this file except in compliance with the License.
     * You may download copy of Osclass at
     *
     *     https://osclass-classifieds.com/download
     *
     * Do not edit or add to this file if you wish to upgrade Osclass to newer
     * versions in the future. Software is distributed on an "AS IS" basis, without
     * warranties or conditions of any kind, either express or implied. Do not remove
     * this NOTICE section as it contains license information and copyrights.
     */
     
    
    if(osc_profile_img_users_enabled() == '1') {
      osc_enqueue_script('cropper');
      osc_enqueue_style('cropper', osc_assets_url('js/cropper/cropper.min.css'));
    }
    
    
    
    // meta tag robots
    osc_add_hook('header','sigma_nofollow_construct');
    
    sigma_add_body_class('user user-profile');
    osc_add_hook('before-main','sidebar');
    function sidebar(){
      osc_current_web_theme_path('user-sidebar.php');
    }
    osc_add_filter('meta_title_filter','custom_meta_title');
    function custom_meta_title($data){
      return __('Update account', 'sigma');
    }
    osc_current_web_theme_path('header.php') ;
    $osc_user = osc_user();
    ?>
    
    <h1><?php _e('Update account', 'sigma'); ?></h1>
    <?php UserForm::location_javascript(); ?>
    <div class="form-container form-horizontal">
      <div class="resp-wrapper">
        <ul id="error_list"></ul>
        <form action="<?php echo osc_base_url(true); ?>" method="post">
          <input type="hidden" name="page" value="user" />
          <input type="hidden" name="action" value="profile_post" />
    
          <?php if(osc_profile_img_users_enabled()) { ?>
            <div class="control-group">
              <label class="control-label" for="name"><?php _e('Picture', 'sigma'); ?></label>
              <div class="controls">
                <div class="user-img">
                  <div class="img-preview">
                    <img src="<?php echo osc_user_profile_img_url(osc_logged_user_id()); ?>" alt="<?php echo osc_esc_html(osc_logged_user_name()); ?>"/>
                  </div> 
                </div> 
    
                <div class="user-img-button">
                  <?php UserForm::upload_profile_img(); ?>
                </div>
              </div>
            </div>
          <?php } ?>
    
    
          <div class="control-group">
            <label class="control-label" for="name"><?php _e('Name', 'sigma'); ?></label>
            <div class="controls">
              <?php UserForm::name_text(osc_user()); ?>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="user_type"><?php _e('User type', 'sigma'); ?></label>
            <div class="controls">
              <?php UserForm::is_company_select(osc_user()); ?>
            </div>
          </div>
    
    ......
    

    Your user profile picture should look like this now.

    Select and customize picture
    Save picture

    Enjoy!