Hosting Forums Market
Osclass

User Image Uploader (avatar)

Integrating the User Image Uploader (Avatar) into the User Profile

Osclass now includes a built-in profile (avatar) image uploader, removing the need for third-party plugins. However, many themes do not utilize this feature because they were developed before it was available. This guide will show you how to integrate the built-in image uploader into your theme.

We will use your_theme as a placeholder. Replace this with the actual folder name of your theme, such as alpha, beta, gamma, delta, epsilon, veronika, stela, etc.

Two Integration Methods

  • For Osclass 8.2.0 and higher (simplified method)
  • For Osclass 8.1.2 and lower (manual method with Cropper.js integration)

Method 1: Osclass 8.2.0 and Higher

Step 1: Modify the user profile file

  1. Open the file oc-content/themes/your_theme/user-profile.php
  2. Find the opening <form> tag and locate the last hidden input field
  3. Insert the following code right after the last hidden input field:
<?php if(osc_profile_img_users_enabled()) { ?>
  <div class="control-group">
    <label class="control-label" for="name"><?php _e('Picture', 'your_theme'); ?></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. The uploader should now appear in the user profile page. You may want to adjust CSS styling in your theme for buttons.

Method 2: Osclass 8.1.2 and Lower

For Osclass 8.1.2 and earlier, the integration requires additional JavaScript and CSS (Cropper.js).

Step 1: Enqueue Cropper.js

  1. Open the file oc-content/themes/your_theme/user-profile.php
  2. At the top of the file, right after the opening <?php tag, insert the following code:
if(osc_profile_img_users_enabled() == '1') {
  osc_enqueue_script('cropper');
  osc_enqueue_style('cropper', osc_assets_url('js/cropper/cropper.min.css'));
}

Step 2: Modify the User Profile Form

Now, find the <form> tag inside user-profile.php and locate the last hidden input field. Insert the following right after it:

<?php if(osc_profile_img_users_enabled()) { ?>
  <div class="control-group">
    <label class="control-label" for="name"><?php _e('Picture', 'your_theme'); ?></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 } ?>

Step 3: Remove Old Plugin Code

Since you are now using Osclass’s built-in image uploader, remove any legacy profile picture plugin code from user-profile.php.

Final Code for Osclass 8.1.2 and Lower

After completing the above steps, your user-profile.php file should look like this:

<?php
/*
 * Copyright 2014 Osclass
 * Copyright 2021 Osclass by OsclassPoint.com
 *
 * Osclass maintained & developed by OsclassPoint.com
 */
 

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 } ?>
Avatar uploader
Avatar uploader

Final result is shown on image above.