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.
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 , .
Click on . Type
avatar and click on
.
Now we'll create the user profile field. From the side menu of your site go to , . Click on the 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 .
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
, , . Click
on . 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.