JSON Import Source

Use a JSON feed as the content source for slides.

JSON Import Source

When Source Type is set to JSON import, the slider fetches a JSON feed and uses the saved slide design as a reusable template for each JSON item.

Typical Setup Flow

  1. set Source Type to JSON import
  2. enter the JSON URL
  3. define the Data Path
  4. set Max Items Count
  5. optionally set Sort Items By
  6. choose Sort Direction
  7. complete the Field Mapping inputs
  8. design the slide using placeholders
  9. save and preview

JSON Source Fields

The JSON source block includes:

  • JSON URL
  • Data Path
  • Max Items Count
  • Sort Items By
  • Sort Direction
  • Field Mapping

JSON URL

JSON URL should point to a feed or static JSON file that returns your slide items.

Example:

https://example.com/feed.json

This source type requires a reachable external URL. Only use JSON feeds you trust, because preview and frontend rendering fetch that endpoint when the slider is used.

Data Path

Data Path uses dot notation to locate the array of items inside the JSON response.

Examples:

  • slides
  • items
  • data.results

If your feed looks like this:

{
  "slides": [
    { "title": "Summer Collection 2024" }
  ]
}

then the correct Data Path is:

slides

Max Items Count

Use Max Items Count to limit how many JSON items are converted into slides.

Sort Items By

Sort Items By is optional.

Use it when the feed contains a field such as:

  • order
  • date
  • priority

Sort Direction

Use:

  • Ascending
  • Descending

Field Mapping

Field mapping tells the slider which JSON keys represent common slider values.

The current mapping fields include:

  • Slide Title Field
  • Excerpt / Description Field
  • Content Field
  • Image URL Field
  • Thumbnail Field
  • Link URL Field
  • Button Text Field
  • Video URL Field
  • Date Field
  • Author Field
  • Order Field

This means a feed like:

{
  "slides": [
    {
      "title": "Summer Collection 2024",
      "description": "Discover our latest summer styles with up to 40% off",
      "image_url": "https://example.com/images/summer-collection.jpg",
      "link_url": "https://example.com/shop/summer",
      "button_text": "Shop Now",
      "order": 1
    }
  ]
}

can use mappings such as:

  • Slide Title Field -> title
  • Excerpt / Description Field -> description
  • Image URL Field -> image_url
  • Link URL Field -> link_url
  • Button Text Field -> button_text
  • Order Field -> order

Typical Placeholders

Direct JSON keys can be used as placeholders.

Examples:

  • {{title}}
  • {{description}}
  • {{image_url}}
  • {{link_url}}
  • {{author.name}}

Mapped aliases can still be used too, such as:

  • {{post_title}}
  • {{post_excerpt}}
  • {{featured_image}}

External Requirements

  • requires an external JSON URL
  • does not require a plugin-provided API key field
  • site owners are responsible for the remote endpoint they configure