User custom fields

Joomla 3.7 and later — and of course Joomla 4 — include a very powerful feature called Fields. This allows you to define custom fields in Joomla's interface which will apply to different areas of the CMS such as user profiles, categories, articles etc or third party extensions. In this section we are interested in custom fields you can define for the user profile and which Akeeba Ticket System can use to display additional information next to the user's post to give you more context, namely the user's Avatar image and the user's Country.

Avatar (profile image)

An avatar (profile image) can make communicating with a user feel more personal. Instead of an impersonal username you can now see the face of the user or at least another graphic they chose to represent them.

Akeeba Ticket System can use any custom field defined in the user profile as the source of the avatar image as long as the field renders an IMG tag with its src attribute set to the avatar image's URL or a field which returns a URL to an image. This means that you can use the built–in Media or URL field, a third party media / image selection field, a third party gallery field, a third party plugin which integrates with an external avatar service etc.

For the purpose of this tutorial we will assume you want your users to upload an image to your site and use that as their avatar.

First, we need to allow the user to upload their avatar image to our site. We do NOT recommend using the built–in Joomla “Media” field as it gives the user full access to overwrite files in the media gallery of the site which is definitely not something you want. The easiest solution we've found is a third party plugin called Image Upload Field. Even though it says it's for Joomla 3 it will work just fine on Joomla 4. After installing it please remember to publish both of the Ajax - Image upload and Fields - Image upload plugins on your site.

Next up, we'll create a folder for the user profile pictures. Go to Content, Media. Click on Create New Folder. Type avatar and click on Create.

Now we'll create the user profile field. From the side menu of your site go to Users, Fields. Click on the New button in the toolbar. Use the following settings:

  • Title: Avatar

  • Type: IMAGEUPLOAD

  • Name: avatar

  • Label: Profile Picture

  • Description: Please upload a photo to use with our support ticket system. Supported file types JPG, PNG, GIF or BMP. Maximum file size 512Kb. Minimum image dimensions 32x32 pixels, maximum image dimensions 512x512 pixels.

  • Required: No

  • Only Use In Subform: No

  • Destination folder: avatar (that's the folder you created in the previous step)

  • Accepted image formats: select jpg, jpeg, png, gif, bmp

  • Maximum image width: 512

  • Minimum image width: 32

  • Maximum image height: 512

  • Minimum image height: 32

  • Maximum file size (kb): 512

  • Filename format: randomchar(12)

As–is, the custom field cannot be edited by the user which makes it rather useless! Click on the Permissions tab. Click on the Registered group. Set Edit Custom Field Value to Allowed. Click on the Manager group and do the same.

Finally click on Save & Close.

When a user edits their profile in the frontend they will now be able to upload their avatar image.

Now we need to tell Akeeba Ticket System to use this field.

From your site backend's side menu click on Components, Akeeba Ticket System, Control Panel. Click on Options. Click on the Common tab. From the Avatar field dropdown choose Avatar (avatar). This is the field we created above.

Whenever Akeeba Ticket System displays a user's post it will also display the image uploaded in the Avatar field above the user's username. If the user has not provided an avatar image it will fall back to the Gravatar image using the email address in the user's profile.