Content Portfolio Ajax documentation

1. Requirements

• Joomla with the core Articles component (com_content) enabled.
• Published articles that the current visitor is allowed to access.
• A writable Joomla cache directory when image resizing is enabled.
• Joomla 4 or newer for the AJAX Load More feature.

2. Installation

1. In the Joomla administrator, open System > Install > Extensions.
2. Upload mod_mx_contentportfolio.zip, or install the package using its URL.
3. Open Extensions > Modules, find Content Portfolio Ajax, and create or edit an instance.
4. Set the module status to Published and select a template position.
5. In Menu Assignment, choose the pages where the portfolio should appear.
6. Save the module and check the page on the front end.

The module loads its CSS and JavaScript from its own assets directory. Do not remove the assets, core, language, or tmpl directories.

3. Quick Start

For a basic portfolio:

1. Create or edit Joomla articles and publish them. Add an intro image in each article's Images and Links tab if images are required.
2. In the module's Source tab, select one or more categories in Select Category.
3. Set Articles count to the number of items to show initially.
4. In Settings, choose a visual style and set Items per view.
5. Leave Show images, Show title, Show description, and Show read more enabled unless the design needs otherwise.
6. Publish the module and confirm that the selected articles are visible.

If no category is selected, the module can use all otherwise eligible articles. Selecting categories is recommended for predictable output.

4. Source Settings

Articles

• Select Category limits the source articles to selected categories.
• Child Category Articles includes or excludes articles in child categories.
• Levels sets the maximum child-category depth.
• Tags limits source articles to selected Joomla tags.
• Featured Articles shows featured articles, hides them, or shows only featured articles.
• Article Ordering and Ordering Direction control query order, including title, ID, dates, hits, manager order, and random order.
• Articles count sets the number of articles loaded per request.
• Link target opens links in the same window, a new window/tab, or a popup.
• Trigger content events enables Joomla content plugin events for displayed articles.

Text and Metadata

• Show or hide the title and set its maximum character count.
• Show or hide tags, choose the number of tags, and place them above or below the description.
• Show or hide the description and set its maximum character count.
• Show or hide the category title, author, date, and read-more link.
• Set optional category and author prefixes, the date format, and the read-more label.

The description is taken from the article intro text. Positive character limits truncate text; display switches hide content completely.

5. Image Settings

Enable Show images for the selected styles. The module searches for images in the order specified by Image order.

• image_intro: the article intro image.
• image_fulltext: the article full-text image.
• inline_introtext: an image found in the intro text.
• inline_fulltext: an image found in the full text.
• external: an externally referenced image when supported.

Example image order:

image_intro, image_fulltext, inline_introtext, inline_fulltext

If no image is found, the default placeholder is modules/mod_mx_contentportfolio/assets/images/noimage.jpg.

When resizing is enabled, configure the resize function, output type, quality, transparency, width, and height. The Joomla cache directory must be writable so generated images can be stored and reused.

6. Layout and Appearance

• Style: choose Style 1 through Style 6, or Random.
• Items per view: choose 1 to 6 columns.
• Use custom item sizes: enables the first-item size pattern.
• First item size pattern: comma-separated values such as double, normal, double-height, normal, normal, double-width.
• Full width: expands the module to the viewport width.
• Filter alignment: places filters on the right, center, or left.
• Load Bootstrap and Load jQuery: enable only when the template does not already provide them.
• Custom CSS: add CSS scoped to this module instance.

double spans two columns and two rows, double-width spans two columns, and double-height spans two rows. Invalid or missing values are treated as normal.

7. Filters

Enable "Category filters" and/or "Tag filters" to show filter links above the grid. Category filters use the module's article list; when tag filters are enabled with categories selected, tag links include all published article tags from those categories, including tags on articles beyond the initial page size.

• Filter labels shows category or tag labels.
• Show All label adds the link configured by All text.
• Filter mode controls how many filter links a visitor can select:
• - "Single": selecting a filter clears the previous selection. Use this when visitors should browse one category or tag at a time.
• - "Multiple": visitors can select several category and/or tag filters. Selected filters are highlighted and can be toggled on or off.
• Multiple filter logic is used only when "Filter mode" is set to "Multiple". It controls how selected filters are combined:.
• - "OR": show an article when it matches at least one selected filter.
• - "AND": show an article only when it matches every selected filter.
• Tag filter ordering sorts tags by Joomla backend order or title.

Filter Mode Examples

In Single mode, selecting one filter clears the previous selection. In Multiple mode with OR logic, an article matches at least one selected filter. With AND logic, it must match every selected filter. The All link clears active filters and shows every article in the source result.

8. Load More

On settings, enable Show Load More and set Articles count to the page size. The button requests the next batch without a full page reload and disappears when no more matching articles are available.

Style settings

Style

Select the portfolio presentation:

• Random: randomly selects one of the available styles.
• Style 1 through Style 6: use a specific portfolio style.

Default: Style 2.

Items per row

Sets the number of portfolio items displayed in each row. Available values are 1 through 6.

Default: 3.

Use Custom items size

Enables custom item sizes in the portfolio grid.

• Yes: apply the configured item-size pattern.
• No: use the normal item size for all items.

Default: Yes.

Item sizes

Visible when Use Custom items size is enabled. Enter a comma-separated pattern for the item sizes. Supported values are:

• normal: one column and one row.
• double: two columns and two rows.
• double-width: two columns and one row.
• double-height: one column and two rows.

Example:

double,normal,double-height,normal,normal,double-width

The pattern is applied in order and repeats for subsequent items loaded with Load More. double-width and double-height are intended for Style 6. The default pattern contains 16 entries.

Load More settings

Show Load More

Controls whether the Load More button is available.

• Yes: allow visitors to request more articles.
• No: display only the initial result set.

Default: Yes.

Load More requires Joomla 4 or newer and a positive article count in the Source settings.

Load More Text

Visible when Show Load More is enabled. Sets the text displayed on the button.

Default: Load More.

Load More Effect

Visible when Show Load More is enabled. Selects the entrance animation for items loaded by the button:

• Appear In
• Simple Fade
• Fade In Up
• Fade In Down
• Zoom In
• Bounce In
• Flip In
• Light Speed In Left
• Rotate In Down Left
• Jack in box
• None

Full-width layout

Full width

Controls the module width:

• Yes: display the portfolio at full viewport width, regardless of the template container.
• No: use the width provided by the template layout.

Default: No.

Filter settings

Filter Position

Sets the horizontal position of the category and tag filters:

• Right
• Center
• Left

Default: Right.

Show filter labels

Controls the descriptive text shown before the filter controls.

• Yes: show the category and tag filter labels.
• No: hide those labels.

Default: Yes.

Category filters

Controls whether category filter links are displayed.

• Yes: show filters for the categories represented by the module's article results.
• No: hide category filters.

Default: Yes.

Filter by category text

Visible when both Category filters and Show filter labels are enabled. Sets the label shown for category filters.

Default: Filter by category.

Tag filters

Controls whether tag filter links are displayed.

• Yes: show filters for tags represented by the module's article results.
• No: hide tag filters.

Default: No.

Filter by tags text

Visible when both Tag filters and Show filter labels are enabled. Sets the label shown for tag filters.

Default: Filter by tags.

Tag Filter Order

Visible when Tag filters is enabled. Sorts the tag filter links by:

• Backend Order: the order configured in Joomla.
• Title: alphabetical title order.

Default: Backend Order.

Tag Filter Ordering Direction

Visible when Tag filters is enabled. Sets the tag ordering direction:

• Ascending
• Descending

Default: Ascending.

Show All button

Controls whether a link is displayed to clear the active filters.

• Yes: display the All link.
• No: hide the All link.

Default: Yes.

Filter selection

Controls how visitors select filters:

• One filter at a time: selecting another filter replaces the current selection.
• Multiple filters: visitors can select several filters at once.

Default: One filter at a time.

Multiple filter matching

Visible when Filter selection is set to Multiple filters. Controls how selected filters are combined:

• All selected tags (AND): an article must match every selected filter.
• Any selected tag (OR): an article must match at least one selected filter.

Default: Any selected tag (OR).

All button text

Sets the text of the link that clears the active filters and returns to the complete result set.

Default: All.

9. Troubleshooting

No Articles Appear

• Confirm that articles are published and accessible.
• Check categories, tags, featured status, language, and menu assignment.
• Confirm that the module is published in a position rendered by the active template.

Images Are Missing

• Add an intro or full-text image to the article.
• Enable the matching image source and put it in Image order.
• Check the placeholder path and cache directory permissions.

Filters Do Not Show Expected Options

Filters are created from the module's article results, not every category or tag in Joomla. Broaden the source selection and verify that relevant articles are published.

Load More Is Not Visible

Confirm Joomla 4 or newer, Show Load More, a positive Articles count, and enough initial results.

Styling or JavaScript Conflicts Occur

Disable Load jQuery or Load Bootstrap when the template already loads those libraries. Clear Joomla and browser caches.

10. Updating

Back up the module configuration and site files before updating. Install the newer ZIP through Joomla's extension installer. The module declares an update server, so Joomla may also offer updates when the server is reachable.