Images PRO

With the Pro version you can place different images using the dedicated image data tags. This includes the contact image and any custom fields of type media.

Image Types

Contact Image

You can output the image attached to the contact of the user.

You can output the image itself with [contact:image], or just the url with [contact:image:url].

To output the url of these images instead - for instance to create your own custom <img> tag - simply add :url to the tag: [contact:image:url] .

Media Custom Fields

You can output the image from a custom field of type media attached to the user.

You can do so by simply using the name of the custom field, such as: [my-image-field].

To instead output the url of the image, as saved in the database, you can do: [my-image-field:value].

Image Attributes

For any of these image types, you can also output their other parameters or attributes found inside the <img> tags, such as:

[contact:image:alt],  [my-image-field:width], [my-other-image-field:height]. etc...

For instance, [my-image-field:width] will output whatever is found in the width="..." attribute of the first image in the user. If the attribute is not found in the <img> tag, it will simply return nothing.

Adding or overriding attributes

In any image tag, you can override any attribute or set extra attributes to be used in the final <img> tag.

For instance, you can set the width and height attributes, or override the class name:

[contact:image class="my-new-class-name"]
[my-image-field width="200" height="150"]

When you set width and height attributes, Users Anywhere Pro will take advantage of the image resizing feature.

Auto Alt/Title Attributes

The Pro version also comes with the ability to automatically set the Alt and Title Attributes for any [image-...] tag placed through Users Anywhere, with options to base them on the image File Name, the Contact Name, or the Custom Field name (for media fields).

The preference can be set for each image type in the Users Anywhere Plugin Settings. And it can also be individually overruled for a specific {users} tag via a auto-titles="..." attribute.

The Auto Alt/Title Attributes only apply when the image doesn't already have its own attributes specified.

When basing the attributes on the image file name, you can also select how they should be Cased. You can set them to be lowercase, UPPERCASE, Uppercase only the first letter, Uppercase All Words, or Smart Titlecase (which allows you to input a list of words that should remain lowercase).

For example, this allows the Alt/Title attributes for an image called soft-and-fluffy.jpg to be automatically set to “Soft and Fluffy”.

The Case setting can also be set in the Users Anywhere Plugin Settings, or individually overruled via auto-titles-case="..." attribute. 

Image Resizing

The Pro version of Users Anywhere has the ability to automatically create resized images with your specified width/height, instead of outputting the original image files.

Settings

You can control the default behavior of the "Resize Images" feature via the Users Anywhere system plugin settings, with three alternative options:

• No - Don't resize images
  Images will NOT be resized when setting width/height attributes in [image] data tags.
  The original image file will always be used, and will only be shrinked to the specified dimensions..
  
  
• Standard (default setting) - Only resize when dimensions are given
  Images will be resized and output based on the width/height attributes in [image data tags.
  If no width or height attributes are found in the data tag, the original image will be used.
  
  
• Yes - Always resize images
  Images will be always resized.
  If no specific width or height attributes are found in the data tag, the image will be resized based on the dimensions in the default settings.

In any case, you can also individually override/force this setting in a specific [image] data tag by adding a resize="..." attribute with either a true (Yes) or false (No) value:

[contact:image resize="true"]

In the Default Settings you can also set the quality of the resized images, select the filetypes to do resizing on (gif, jpg, png), and decide whether you want the images to be cropped or not.

Resized image files are stored inside a subfolder of the location containing your original image. By default, the folder name is resized, but you can customize it however you want.

Note: Only internal images hosted on your website will be resized. External images will not be resized or saved, and the original external images will be used regardless of the settings.

Data Tags Syntax

When resizing images via the [image] data tag, you don't need to specify both width and height attributes. You can also just specify one dimension, and the image will be resized maintaining its aspect ratio:

[contact:image width="240"]

<img src="/images/profiles/resized/peter-800_240x240.png" srcset="/images/profiles/resized/peter-800_480x480.png 1.5x, /images/profiles/resized/peter-800_240x240.png 1x" alt="Peter van Westen" title="Peter van Westen" width="240" height="240" />

When you specify both width and height attributes, resized images will be created with the exact width and height, meaning that if proportions are different, the image will be cropped to fill the specified dimensions:

[my-custom-image width="240" height="240"]

<img src="/images/profiles/resized/sven-800_240x240.png" srcset="/images/profiles/resized/sven-800_480x480.png 1.5x, /images/profiles/resized/sven-800_240x240.png 1x" alt="Sven" title="Sven" width="240" height="240" />

Custom Images / Suffixes

You can also output images with a suffix of your choice added to their filenames. You will need to create these images yourself, and name them using the given suffix.

Let's say you have this <img> tag in your content: <img src="/images/my-image.jpg" />.

Then you can do [contact:image suffix="-custom"] to output: <img src="/images/my-image-custom.jpg" />.

This could be useful to be used in If Structures to conditionally output alternative custom images in certain situations. This example will show a different image to guest users:

{if guest}[my-profile-image suffix="-guest"]
{else}[my-profile-image]
{/if}

List of Data Tags

Syntax	Example	Description
contact:image		The image of the category attached to the user.
contact:image:url	/images/profiles/peter-240.png	The URL of the image of the category attached to the user.
my-image-field		The image from a Custom Field of type media.