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:
<?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:

<![CDATA[
text....
]]>

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

[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.

PRO: Pagination by twig – 1 feed, many pages

This page demonstrates how you can paginate data. All data comes in 1 feed (see here for data in several feeds)

Create a new JCI-Template for that:

{% set noonpage = 20 %}
{% set noofitems = ( days | length ) %}
{% if urlparam.no %}{% set selno = urlparam.no %}{% else %}{% set selno = 1 %}{% endif %}

number of data-items: {{ noofitems  }} at <a href="http://api.json-content-importer.com/extra/paginationdata.php" target="_blank">http://api.json-content-importer.com/extra/paginationdata.php</a><br>
{% set noofpages = (noofitems /noonpage) | round(0, 'ceil') %} show on {{noofpages}} pages:

{% set start = noonpage *(selno-1) %}
{% set end= start + noonpage %} 

{% for i in 1..noofpages %} 
{% if i==selno %} 
<b>this is page: </b> {{selno}} ({{start+1}} - {{end}})
{% else %} 
<a href=?no={{i}}>{{i}}</a>
{% endif %} 
{% endfor %}
<hr>
{% if noofitems ==0 %} No data-items found {% endif %} 
<ul>
{% for day in days | slice(start, noonpage) %} 
<li>
{% set currno = start + loop.index0+1 %} {{currno}}. {{day.FORENAMES}} {{day.SURNAME}}
</li>
{% endfor %} 
</ul>

Shortcode:

[jsoncontentimporterpro parser=twig nameoftemplate=pagination]

Example in action:

number of data-items: 165 at http://api.json-content-importer.com/extra/paginationdata.php
show on 9 pages: this is page: 1 (1 - 20) 2 3 4 5 6 7 8 9
  • 1. Johnson Williams
  • 2. Brown Jones
  • 3. Miller Davis
  • 4. Garcia Rodriguez
  • 5. Wilson Martinez
  • 6. Anderson Taylor
  • 7. Thomas Hernandez
  • 8. Moore Martin
  • 9. Jackson Thompson
  • 10. White Lopez
  • 11. Lee Gonzalez
  • 12. Harris Clark
  • 13. Lewis Robinson
  • 14. Walker Perez
  • 15. Hall Young
  • 16. Allen Sanchez
  • 17. Wright King
  • 18. Scott Green
  • 19. Baker Adams
  • 20. Nelson Hill