Team module documentation

Quick Start

1. In Team Manager, choose Source: Articles, Custom items, or Folder.
2. Complete the fields that appear for the selected source. For a quick first test, choose Custom items and create one published item with an image and name.
3. In General Settings, choose a Style and set Version to Slider or Standard.
4. For Standard mode, choose responsive column widths and optionally enable the filter. For Slider mode, set responsive item counts, navigation, looping, and autoplay.
5. Publish the module in a visible template position, then check both desktop and mobile widths.

Many settings are conditional. For example, article fields appear only for the Articles source, breakpoints change with Standard or Slider mode, and several style-specific controls appear only for the layouts that use them.

How the Module Works

1. Source selection: the Source field chooses Joomla article data, manually managed items, or files discovered inside an Images folder.
2. Item preparation: article records are filtered and enriched with article links, tags, and images; custom records are read from the repeatable subform; folder files are converted to image or video items.
3. Layout selection: the selected Style chooses a PHP layout from tmpl. Layouts differ in composition and may not use every optional field.
4. Presentation mode: Slider mode initializes the carousel and its responsive breakpoints. Standard mode displays a responsive grid and can use the Isotope filter.
5. Assets: the selected layout and options determine which module styles and scripts are added. Image transformations, drawing effects, and filters load only when relevant.

The module caches prepared article data through Joomla's module cache. When a newly added article or file is not visible, clear Joomla's cache and verify the module's cache settings.

Data Sources

Articles

Articles mode gets published items from Joomla's com_content component. The fields in this section limit which articles are selected and how their article-derived text, links, and images are displayed.

Article text and metadata

• Category Title: show or hide the article's category title.
• Item Title: show or hide the article title.
• Title Maxlength: maximum title length in characters. Use 0 to keep the full title.
• Description display: show or hide the article intro text.
• Description Maxlength: maximum intro length in characters. Use 0 to keep the full description.
• Show Read More: show or hide the read-more link.
• Read More Text: custom label for the read-more link; leave it empty to use the layout or Joomla default.

Article images

Image extraction is controlled by four source switches and Order to Get. The module checks the configured sources for available images and uses the first suitable result in that priority order. The available sources are:

• image_intro: the article's Joomla intro image.
• image_fulltext: the article's Joomla full-text image.
• inline_introtext: images embedded in the article intro HTML.
• inline_fulltext: images embedded in the full-text HTML.

Order values are separated by commas, spaces, or semicolons. If no image is found, Placeholder Path (or URL) supplies the fallback image. This placeholder field is available for Articles source. .

Loading team members from articles.

Creating custom field.

First step is to create custom field which is needed to add social icons for each team member. If is not needed to have social media, skip this step and go to other step "Creating Categories".

1. In joomla backend go in Content - Fields.
2. Click in "New" green button.

On title write Social.

1. In "Type" select "Text field".
2. In "Filter" select "Safe HTML".

Click in "Option" tab and in "Label" select "Hide".

Click "Save and close"

Creating Categories

1. Go in Content - Categories.
2. Click in "New" green button.

Create a Category named "Team" and in that category add subcategories with professions of team members. In demo we uses CEO, Manager, Worker.

Creating Articles

Once the categories are created, go in Content - Articles and click in "New" green button.

1. Write the name.
2. Select the category for that team member which corresponds to the profession.
3. Write text info, biography etc.
4. Click in "Images and Links" tab add the photo.

If is created "Custom field" continue with step 5. otherwise skip it

5- Click in "Fields" tab and there add the code for social links.

Add the code below in code mode, with the changes needed, by adding or deleting social media icons.

<ul class="social">
<li><a href="#" target="_self"><span class="fab fa-facebook"></span></a></li>
<li><a href="#" target="_self"><span class="fa-brands fa-x-twitter"></span></a></li>
<li><a href="#" target="_self"><span class="fab fa-instagram"></span></a></li>
<li><a href="#" target="_self"><span class="fa-brands fa-tiktok"></span></a></li>
<li><a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it."><span class="fa fa-envelope"></span></a></li>
</ul>

Changes can be done by deleting or adding the lines

<li><a .....</a></li>

 Also can be changed social icons. Example no need to have Instagram but Digg, change fab fa-instagram to fab fa-digg

Don't forget to change the links href="#" with the correct ones which correspond to every social media.

Load Articles in module

In Extension - Modules click in Team Module. Select a position which exits in template and put it in the menu items you want to show.

Click in "Team Manager" tab and in source Select - Articles.

In select Category select all categories created for team members.

Put "Child Category Articles" = Include.

If in previous steps, is created Social media for team members put "Custom fields" = Yes. For the rest put the setting of your choice.

Custom Items

Custom items are entered in the repeatable Item(s) field. Add one record per person or team entry, publish it, and arrange records in the order you want them to appear. The subform supports up to 250 entries.

Custom Items do not use article categories, tags, article links, or article image extraction. Their content comes from the subform. A layout may omit some fields, so confirm a chosen style displays the information you plan to enter.

Create custom items

In "Team Manager" tab, in source Select - Custom Items.

In all fields put all the info of the person such as photo, name, main title etc. Use "Add" button to add as many team members needed.

If needed to have social media put "Social Network" - yes. Use also there, "Add" button to add social media. In "Social Icon" select one from the existed icons and add a valid URL link which correspond to that social media.

Select the folder source

1. In the module settings, set Source to Folder.
2. Choose a directory under Joomla's images/ folder using Folder directory.
3. Select a visual style under Style.
4. Set the number of items if required. A value of 0 means all supported files.

The selected folder and its subfolders are scanned recursively. Supported extensions are jpg, jpeg, png, gif, webp, bmp, and mp4.

Folder filename format

Use the filename without its extension to provide the person's name, title, and description:

01 - Jane Doe | Creative Director || Designs brand systems and campaigns.jpg

Use this recommended pattern:

ORDER - NAME | TITLE || DESCRIPTION.ext

Numeric prefixes

A leading number followed by a separator is removed from the displayed name and title. These examples display as Jane Doe:

01 - Jane Doe.jpg
02_Jane Doe | Designer.jpg
03. Jane Doe | 02: Lead Developer.jpg

Hyphens and underscores inside the remaining text are displayed as spaces. The original filename and image URL are not changed.

Simple filenames

Jane-Doe | Designer || Short biography.webp

If no pipe is present, the complete filename becomes the name. If no title is provided after the pipe, the title field is empty.

Presentation and Layout

Style

The manifest offers Default, Show, Wall, Slide, and Style 1 through Style 65. This is a total of 69 layout choices. Use the thumbnail previews in the Style selector to compare them; each layout can position images, titles, descriptions, links, and social controls differently. Not every layout renders every field or responds to every presentation option in the same way.

Style-specific controls include:

• Style 12: exposes Photo height.
• Style 60: exposes Image width, from 200px through 550px.
• Style 63: exposes the Light or Dark Style version.
• Slide: exposes Show pagination, Show arrows, and Arrows Style.
• Show: exposes its background and text color settings.

Version: Standard or Slider

Slider presents the team as a moving carousel. It enables autoplay, looping, navigation, and responsive item-count settings. Standard presents a responsive grid and enables the Isotope filter option. Choose the version first because it changes which controls are shown in the administration form.

Responsive grid columns

In Standard mode, choose the number of columns separately for Desktop, Tablet Landscape, Tablet Portrait, Mobile Landscape, and Mobile Portrait. Each setting offers 1 to 10 columns. The saved values are column percentages; for example, 25% corresponds to four equal columns and 50% to two. Select a larger column count only if the module area and the chosen style leave enough room for each item.

Responsive slider item counts

In Slider mode, the Items setting chooses how many members are visible at each of the same five device sizes. Each breakpoint can be set from 1 to 10 visible items. For narrow screens, one or two items are usually more legible than carrying the desktop count down to mobile.

Slider behavior and controls

General settings

Resize Mode

It applies to image files used by Articles, Custom Items, and Folder items. The module's common image helper processes the image when a layout asks it for the image URL, so the setting is shared across Standard and Slider presentation modes and across styles that render the item's image. The chosen layout can still apply its own CSS sizing or visual crop after the processed image is loaded.

These controls are separate from the article-only image-source switches and placeholder. They change how a selected image is prepared; they do not determine where the image comes from. For Folder MP4 files, the module also uses the configured resize mode and dimensions when it generates a browser-side thumbnail; the MP4 itself remains a video.

For example, choose Fill for consistently sized portrait thumbnails when cropping the edges is acceptable; choose Fit when every part of each source photo must remain visible; choose Stretch only when distortion is acceptable or source ratios already match. None is useful when the original dimensions and format should be retained.

Filters and Item Spacing

The filter displays a row of buttons above the team items. Visitors can choose All or one label to show only matching items without leaving the page. Filter alignment can be Right (default), Center, or Left.

Important: Filters are not shown for the slider layout. Set Version to Standard.The filter also needs at least one non-empty label in the selected source.

01 - Jane Doe | Creative Director.jpg
02 - John Smith | Engineering.jpg

images/team/
├── 01 - Jane Doe | Creative Director || Brand and campaign systems.jpg
├── 02 - John Smith | Engineering Lead || Platform and infrastructure.mp4
└── 03 - Alex Lee | Product Designer || Product experience and research.webp

Item distance adjusts spacing between team items where the active layout supports it. Item focus effect controls a focus/hover treatment in layouts that implement it. Because these effects are layout-dependent, preview them with the actual selected style.

9. Image Effects

Image shape

Image shape controls the visible outline of each image and is independent of its visual treatment. Choose Rectangle, Circle, Ellipse, Diamond, Hexagon, Splash, Shape 1 through Shape 6, or Random (Shapes 1-6). Rectangle leaves the image uncropped by a shape. Random selects from the six supplied shape masks for individual images.

Circle, ellipse, diamond, hexagon, and splash use browser clipping. Shape 1-6 use transparent WebP masks shipped with the module. Shape selection can be combined with Original, Drawing, or Watercolor. Some layouts render photos as CSS backgrounds instead of image elements; those layouts may not support the shape mask or canvas effect.

Drawing image effect

Drawing image effect selects how the source photo is rendered. Choose one mode:

• Effect level: appears for Drawing and Watercolor. Choose 1 (Soft), 2 (Light), 3 (Normal), 4 (Strong), or 5 (Very strong); the default is 3. In Drawing mode, higher levels strengthen the line and paper treatment. In Watercolor mode, higher levels deepen pigment, increase color separation and edge pooling, and make paper texture more visible.
• Mouse over images: choose Original to reveal the source photo while the pointer is over the team item, or Drawing to keep the selected processed image visible. This setting is available for both Drawing and Watercolor.

Generated image cache

Processed images are generated in the browser and can be saved as WebP files in /cache/mod_mx_team/drawing-effects to speed up later page views. When you change a photo, shape, effect mode, or level, the module uses a different cached result. To remove all generated copies, open the module in the administrator and use Empty cache in Settings. Confirm the action; the cache folder remains in place and images are generated again as visitors load the page.

When effects do not appear

• Use a layout that outputs the member photo as an <img>; CSS-background images may not be processed.
• Images from another domain must allow canvas access through CORS. Otherwise the browser cannot read their pixels and the original image is shown instead.
• Very large images are scaled down to a maximum working dimension before processing, so fine details may be simplified.
• Check the browser console for loading or canvas errors. If a cached result appears stale, empty the drawing effects cache and reload the page.

Reveal on scroll

Reveal effect enables a scroll-triggered entrance animation in layouts that include reveal markup. Animation chooses whether the animation runs Once or Always. Effect selects a direction, fade, zoom, shake, blink, or related entrance treatment. A field being available in the module form does not guarantee every style uses it.

Social icon fixes in template

In one of the template css files, add the code below

ul.social {
    display: inline
}

ul.social li {
    display: inline-block
}
ul.social li a {
    color: #7b7b7b;
    font-size: 16px;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50px; 
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid transparent;
    transition: background-color .4s ease-in-out
}

With this code, is possible to have the social icons for team members in the articles inline, with nice look.

Troubleshooting

The module is not visible

• Confirm the module is published, has an assigned template position, and is assigned to the current menu item.
• Check the module's access level, start/end publishing dates, and template position rendering.

No members or articles appear

• For Articles, confirm articles are published and accessible, then review selected categories, child-category depth, tags, and Featured Articles mode.
• For Custom Items, confirm one or more entries are set to Publish.
• For Folder, confirm the chosen folder is within images and contains files with supported extensions.
• Clear Joomla's module cache after changing the source or its content.

Images are missing or unchanged

• For articles, enable the correct image source switches, verify the order, and check the placeholder path.
• For custom entries, select an image in Browse for image and verify that the chosen style uses the image field.
• For Folder, check filename extension and the filesystem path under images.
• Image resizing requires working PHP image support and a writable cache location.
• Drawing effects can fail to process cross-origin images; verify the browser console and test with a same-site image.

Source Folder problems

Slider or filter controls do not appear

• Filters require Standard mode and Show filter enabled.
• Responsive item counts and autoplay controls require Slider mode.
• Pagination and arrow settings shown for the Slide style do not apply to every layout.
• Check that the selected style supports the control and that another extension has not caused a JavaScript error.

Social icons are missing

Enable Social Network on the item, add at least one social icon and URL, and check whether the template already loads a compatible Font Awesome library. Use the module's Font awesome option only if the icon font is absent.