SP Page Builder supports Joomla’s Native Articles in Dynamic Content, giving you the flexibility to pull content directly from your Joomla articles and display it beautifully across your layouts without extra effort. 

Create a Dynamic Article Index Page

To create a dynamic Article Index Page in SP Page Builder, follow these steps:

• Navigate to the SP Page Builder dashboard.
• Go to Pages > Click + Add > Select New Article Page.
• From the submenu, select Index to create an index page for listing articles.
• Give your Articles Index page a name and proceed to the next step.

Default Article Index Page Layout

After creating an Article Index page, a basic layout is automatically generated for you. You can either make quick adjustments or fully customize the page to match your preferences.

Displaying Joomla Articles in Your Layout

Displaying Joomla articles is the same as working with any other Dynamic addons.

Step 1: Add the Collection Addon

Drag and drop the Collection addon under Dynamic Content onto the page where you want the list to appear.

Step 2: Select the Collection Source

From the Source dropdown, select the “Articles” from the list of available collections.

Step 3: Add Dynamic Text and Media Addons in the Collection Addon

Now, drag and drop the Dynamic Text and Media addons into your Collection addon. Decide which information you wish to display in the Articles Index. These can include text, images, links, and more, depending on your preference.

Available Field Sources in Dynamic Text Addon:

In the case of the Article Index page, the Dynamic Text addon’s field source provides predefined items pulled from your Joomla's native articles. These items are fixed and cannot be modified. You can display the following fields in your Article index page:

• Title: Displays the main title of your Joomla article.
• Intro Text: Pulls the intro text defined in your Joomla article.
• Full Text: Displays the full content of the Joomla article.
• Image Intro Caption: Displays the caption added under the Image and Links tab > Intro Image > Caption in your Joomla article.
• Image Full Caption: Displays the caption added under the Image and Links tab > Full Article Image > Caption in your Joomla article.
• Article Link: Pulls the URL of the respective Joomla article.
• Created Date: Shows the article’s creation date. You can adjust this date in Publishing Tab > Created Date within the Joomla article editor.
• Author: Displays the author assigned to the Joomla articles.
• Category: Fetches the categories and tags you have used in your Joomla articles.
• Hits: Shows the number of views recorded for the article. Check the Publishing Tab > Hits in your Joomla article.

Available Field Sources in Dynamic Media Addon:

In the case of the Article Index page, the Dynamic Media addon’s field source provides predefined items pulled from your Joomla's native articles. These items are fixed and cannot be modified. 

• Featured Image: Fetches the featured image you set in your Joomla article. You can update it from your Joomla article’s Blog Media > Featured Image.
• Intro Image: Displays the intro image set in your Joomla article. You can update it from your Joomla article’s Images and Links tab > Intro Image.
• Full Image: Displays the full article image set in your Joomla article. You can update it from the Images and Links tab > Full Article Image.

Displaying Blogs from a Specific Category

If you want to display blogs from a particular category on your Dynamic Article Index page, follow these steps carefully:

Before you begin:
Ensure that you have already created the required categories in Joomla Categories.

Steps:

1. Open Your Dynamic Article Index Page
Go to the SP Page Builder dashboard and open the Dynamic Article Index Page you’ve created.

2. Select the Collection Addon

• Inside the page, select the Collection addon.
• Make sure the Collection Source is set to Articles.

3. Configure Filter Conditions

Go to General Settings > Content in your Collection addon and choose the Filter section.

Set up the filter as follows:

• Click Add a + New Condition
• Match: All
• Field: Category
• Condition: Contains or Equals
• Value: Enter the category name (e.g., Business or Strategy). Please note that you can only enter one category name in the Value field at a time.

4. Add Multiple Categories (Optional)
You can keep adding conditions and values to as many categories as you like.