PRO: Slider & API – Smartslider & JCI

  • Your task:
    Connect a slider with an API. The API (JSON; XML, CSV) gives all info for images, text and links for a slider on a WordPress-Page.
  • Solution:
    Install the PRO-Version of the JCI-Plugin and the plugin “Smartslider3 PRO.
    With the JCI-Plugin you can create a RSS-Feed out of the API-data.  The GET-Parameter “?show=oc” removes the WordPress-Template and creates pure RSS : This RSS-URL can be used to feed the RSS-Generator of the Smartslider.
  • In Detail:
    Create a JCI-Template with the following template-code for static RSS. By adding twig and an URL you can add API-data.
    RSS-XML-Code for the Slider:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
<channel>
<title>titleexample</title>
<description>descriptionexample</description>
<link>http://...link</link>
<copyright>Copyright 20...</copyright>
<docs>http://....docs</docs>
<language>en-us</language>
<lastBuildDate>Tue, 21 Oct 2019 03:19:24 -0800</lastBuildDate>
<managingEditor>info@.....com</managingEditor>
<pubDate>Tue, 21 Oct 2019 12:18:22 -0300</pubDate>
<webMaster>webmaster@....com</webMaster>
<generator>JCI</generator>
<image>
<url>http://www.....gif</url>
<title>titleimage</title>
<link>http://www....imagelink.htm</link>
<description>descriptionimage</description>
<width>480</width>
<height>480</height>
</image>
<item>
<title>titleitem</title>
<description>descriptionitem</description>
<link>http://www.linkitem</link>
<comments>commentsitems</comments>
<pubDate>Tue, 21 Oct 2019 07:38:46 -0800</pubDate>
</item>
</channel>
</rss>
<?xml version="1.0" encoding="windows-1252"?> <rss version="2.0"> <channel> <title>titleexample</title> <description>descriptionexample</description> <link>http://...link</link> <copyright>Copyright 20...</copyright> <docs>http://....docs</docs> <language>en-us</language> <lastBuildDate>Tue, 21 Oct 2019 03:19:24 -0800</lastBuildDate> <managingEditor>info@.....com</managingEditor> <pubDate>Tue, 21 Oct 2019 12:18:22 -0300</pubDate> <webMaster>webmaster@....com</webMaster> <generator>JCI</generator> <image> <url>http://www.....gif</url> <title>titleimage</title> <link>http://www....imagelink.htm</link> <description>descriptionimage</description> <width>480</width> <height>480</height> </image> <item> <title>titleitem</title> <description>descriptionitem</description> <link>http://www.linkitem</link> <comments>commentsitems</comments> <pubDate>Tue, 21 Oct 2019 07:38:46 -0800</pubDate> </item> </channel> </rss>
<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
 <channel>
    <title>titleexample</title>
    <description>descriptionexample</description>
    <link>http://...link</link>
    <copyright>Copyright 20...</copyright>
    <docs>http://....docs</docs>
    <language>en-us</language>
    <lastBuildDate>Tue, 21 Oct 2019 03:19:24 -0800</lastBuildDate>
    <managingEditor>info@.....com</managingEditor>
    <pubDate>Tue, 21 Oct 2019 12:18:22 -0300</pubDate>
    <webMaster>webmaster@....com</webMaster>
    <generator>JCI</generator>
    <image>
      <url>http://www.....gif</url>
      <title>titleimage</title>
      <link>http://www....imagelink.htm</link>
      <description>descriptionimage</description>
      <width>480</width>
      <height>480</height>
    </image>   
<item>
      <title>titleitem</title>
      <description>descriptionitem</description>
      <link>http://www.linkitem</link>
      <comments>commentsitems</comments>
      <pubDate>Tue, 21 Oct 2019 07:38:46 -0800</pubDate>
    </item>
  </channel>
</rss>

Notice: RSS is sensitive to special chars and chars used for RSS itself. Therefore consider to mask JSON-data in a CDATA-tag:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<![CDATA[
text....
]]>
<![CDATA[ text.... ]]>
<![CDATA[
text....
]]>

Name this JCI-Template e. g. “rss” and add this Shortcode to a page:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[[jsoncontentimporterpro nameoftemplate=rss]]
[[jsoncontentimporterpro nameoftemplate=rss]]
[[jsoncontentimporterpro nameoftemplate=rss]]

Publish this page and add “?show=oc” to the URL: This removes the WordPress-Template and gives pure RSS / XML.
This URL can be used with the SmartSlider 3 RSS-connector.