Images [PRO] - Data Tags - Users Anywhere

Users Anywhere Pro can render the image from a published contact linked to the user and images stored in Joomla user custom fields of type Media.

Contact Images

Render the linked contact image or output only its URL:

[contact:image]
[contact:image:url]

[contact:image] is the contact image associated with the user; it is not an article or category image.

Media Custom Fields

Select the user custom field by alias or ID. Use :url when you only need its image URL:

[field:portrait width="240"]
[field:portrait:url]
[field:12:url]

Other available image properties include :width, :height, and :alt.

Adding or Overriding Attributes

Add attributes to the data tag to control the rendered <img> element:

[contact:image class="team-photo"]
[field:portrait width="240" height="240" alt="Team member"]

Explicit alt, title, class, and style values override the corresponding generated attributes. The Media settings can cross-fill a missing alt or title value and, in Pro, generate defaults according to the configured image-title options.

Lazy Loading

Add loading="lazy" to let the browser defer loading the image until it is near the visible part of the page:

[contact:image loading="lazy"]

This applies when the data tag outputs an image, not when it returns only the image URL.

Image Resizing

Pro can create a resized local image instead of relying only on browser dimensions. The global Resize Images setting has three modes:

No: width and height attributes do not resize the file unless the tag explicitly sets resize="true".
Standard: an image is resized when the data tag supplies a width or height. Without dimensions, the original is used.
Yes: images without tag dimensions use the configured default dimensions.

Override the setting for one image with resize="true" or resize="false":

[contact:image width="240" resize="true"]

When only one dimension is supplied, the image keeps its aspect ratio. When both width and height are supplied in crop mode, the generated image fills those dimensions and may be cropped.

The Media settings also control scale versus crop, default dimensions, the resize folder, supported file types, quality, Retina generation, forced regeneration, and maximum age. Resized files are stored in the configured resize folder.

External Images

External image URLs remain external when Download External Images is disabled. When it is enabled, Users Anywhere downloads a safe public HTTP(S) image to the configured site folder and then applies the normal local-image resize settings. If a remote image cannot be downloaded safely, it is not converted into a local resized file.

Filename Suffixes

Use suffix="..." to point to an alternate file that you created alongside the original. For example:

[contact:image suffix="-square"]

If the original is images/team/editor.jpg, that syntax uses images/team/editor-square.jpg.

On this page