Are you enjoying the extensions? Did you like the support? Help others decide

Leave a review


These options only apply to the contact views.

Picture Decide to show the contact picture or not
Origin From which parameter the picture is coming from.
  • Default The standard contact picture
  • Media custom field Joomla 3.7+ The picture selected in that field will show in place of the contact picture
  • Imagelist custom field Joomla 3.7+ Several pictures can be selected. When 2 or more pictures are present, a standard CSS3 slideshow is automatically created with a fade effect (for best results, when images are not cropped by the extension, make sure all images are of the same width and height)
Check this tutorial to learn how to use the List of images custom field to create slideshows of contact pictures in a contact view.
Default picture The picture to show when the individual contact picture is missing
New v4.4 if setting 'high resolution' to 'Yes' and 'process pictures' is set to 'No', provide a high resolution image (see the 'high resolution' parameter for details)
Picture alignment The picture alignment, related to the text
  • Left of card will show the picture to the left of the text (landscape mode)
  • Right of card will show the picture to the right of the text (landscape mode)
  • Top of card will show the card in portrait mode (with picture at the top, information details at the bottom)
Picture width The width all contact pictures will have (in pixels)
Picture height The height all contact pictures will have (in pixels)
Background color The color of the picture’s background and the borders
Border width The border around the picture (in pixels)
Border radius The radius for the corners of the picture
Shadow Add a shadow to the picture
Modified in v3.0
A CSS3 transition to apply to the picture. The picture can be rotated slightly to the left or the right.
  • 5, 10 or 15 degrees left
  • 5, 10 or 15 degrees right
In v3.0, set the value manually.
Scaling Shrink the picture for a perfect fit inside its container (especially if the picture is rotated). Set a value from 0.7 to 1
High resolution Use/create a high resolution image that will be twice the width and height of the original picture to be visible on high pixel ratio screens (like Retina displays).

When processing the pictures through the extension, the high resolution image is created automatically.

Warning If you are not processing the pictures through the extension, you need to provide high resolution images manually. High resolution images are twice the size of the original and their file name ends with @2x. For instance, image.jpg of size 100x200 has a high resolution counterpart This email address is being protected from spambots. You need JavaScript enabled to view it. of size 200x400
Process pictures Will resize/crop/filter the original picture in order to fit the specified width and height. Otherwise will show the original picture, resized, without any processing.

New v4.4 WebP image file format support: when processed, fallback images are created (needs PHP 7.1 minimum). When keeping originals, provide a fallback image with a .jpg or .png extension.
Filter A filter to apply to the processed pictures. It is possible to combine 2 filters for more complexe effects (example: select Grayscale and Sketch for a black and white sketch picture)
  • Blur
  • Sharpen
  • Sepia
  • Grayscale
  • Sketch
  • Negate
  • Emboss
  • Edge detect
    Edge detect
New 4.5 apply CSS filters on thumbnails OR original images. With CSS, you are no longer limited to filters applied to thumbnails through the GD library. Reduces server processing!
Picture quality The image compression (0 to 100) for jpg, png and webp files.
0 has worse quality but smallest file size, 100 has best quality but bigger file size. Usually, a quality of 60 gets the best trade-off between picture quality and file size. 

The PHP GD extension php_gd2 is required for the creation of image thumbnails. Make sure this extension is available on your service provider's server. The module will detect this automatically.

Related tutorials and topics

Featured Blogs