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
- set
Source TypetoJSON import - enter the
JSON URL - define the
Data Path - set
Max Items Count - optionally set
Sort Items By - choose
Sort Direction - complete the
Field Mappinginputs - design the slide using placeholders
- save and preview
JSON Source Fields
The JSON source block includes:
JSON URLData PathMax Items CountSort Items BySort DirectionField 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:
slidesitemsdata.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:
orderdatepriority
Sort Direction
Use:
AscendingDescending
Field Mapping
Field mapping tells the slider which JSON keys represent common slider values.
The current mapping fields include:
Slide Title FieldExcerpt / Description FieldContent FieldImage URL FieldThumbnail FieldLink URL FieldButton Text FieldVideo URL FieldDate FieldAuthor FieldOrder 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->titleExcerpt / Description Field->descriptionImage URL Field->image_urlLink URL Field->link_urlButton Text Field->button_textOrder 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