Profile Picture (Avatar)

For years, Osclass lacked a native profile picture (avatar) feature. While various plugins attempted to fill this gap, they often lacked image optimization, full integration, or customization options. A modern classifieds website requires a robust avatar system to enhance user experience and engagement.

Enabling Profile Pictures

By default, the profile picture feature is disabled. To enable it:

  1. Navigate to Oc-admin > Settings > User Settings.
  2. Check the option "Enable users to upload their profile picture".
  3. Click the Save button.

Once enabled, users can upload and manage their profile pictures from their accounts.

Uploading a New Profile Picture

After enabling the feature, users can upload an avatar by following these steps:

  1. Log in to your classifieds website.
  2. Go to User Account > My Profile.
  3. Locate the profile picture upload section.
  4. Click on "Upload New Picture" and select an image from your computer.

After selecting an image, a cropping and editing tool will appear.

Editing & Cropping the Profile Picture

Users can fine-tune their avatar before saving it:

  • Crop: Adjust the selection box by dragging the corners.
  • Move: Click and hold the selection box to reposition it.
  • Zoom: Use the scroll wheel to zoom in and out.
  • Rotate: Rotate the image if needed.
  • Cancel: Exit the process without saving.
Crop profile picture
Crop profile picture

The expected preview of the final profile picture is displayed above the cropping tool.

Configuring Profile Picture Size

Administrators can set the default profile picture dimensions in Oc-admin > Users > User Settings, under the "Profile Picture Size" field.

Recommended size: 240x240 pixels. However, depending on the theme, you may choose different sizes such as 240x200 or 128x128.

Saving & Using the Profile Picture

Once satisfied with the adjustments, the user clicks the Save button to apply the new profile picture.

By default, the profile picture is displayed:

  • On the user’s published listings.
  • When the user posts a comment.

Theme developers can integrate profile pictures in additional areas, such as:

  • User profile cards.
  • Header sections.
  • Listing author details.

Conclusion

With this feature, Osclass finally provides a native solution for user avatars. By enabling and customizing profile pictures, administrators can significantly enhance the professionalism and usability of their classifieds website.