PRO: Upload and send Data to API

Your Challenge:
Offer a HTML-Form to your user for inserting some text and uploading a mediafile. The mediafile should be stored locally and displayed together with the text input. Also the text and mediafile should be sent to an API.

This is the way to achieve this:

Create two JCI-Templates.
JCI-Template 1:

  • templatename: uploadaddpic
  • URL: This must be a real API where you want to send the data (“dummyrequest” is not ok here)
  • method: CURL-POST
  • urlparam4twig: text1
  • twig-Template:
{{_context | json_encode }}

JCI-Template 2:

  • templatename: uploadmediafile
  • URL: URL to an API which gives all data you sent via this form. If not needed use “dummyrequest”.
  • method: CURL-POST
  • twig-template:
    get_data_of_uploaded_file: This JCI-twig-function returns $_FILES, a ‘superglobal’ PHP-variable where the HTTP File Upload variables are stored.
{% if urlparam.text1 %}
input text: {{urlparam.text1}}<br>
{% set picdata = get_data_of_uploaded_file('yourmediafile') %}
data of uploaded file: {{picdata | json_encode}}<hr>
{% set maxsizekb= 2*1024*1024 %}
{% if picdata.error==0 and picdata.size<maxsizekb %}
upload file is ok for saving in wp-medialib<br>
{% set jciaddkond='{"answer":"hello","urlparam":{"text1":""},"apiresponseinfo":[]}' %}
shortcode for saving file: {{jciaddkond}}<hr>
{% set execsh = jciaddkond | doshortcode %}
shortcode-execution result: {{execsh | dump }}<br>
{% set execshArr = execsh | json_decode %}
{% set uploadedImgInWPLib = execshArr.apiresponseinfo.upload.attachment_url %}
<hr>{{urlparam.text1}}<br><img src="{{uploadedImgInWPLib }}">
{% else %}
mediafile not stored:<br>
picdata.error: {{picdata.error}}<br>
maxsize:  {{(maxsizekb/1024)| round(2)}} kB<br>
Bildgröße: {{(kondpicdata.size/1024)| round(2)}} kB<br>
{% endif %}
{% endif %}
<form action=/upload/ enctype="multipart/form-data" method=POST>
<input type=text name=text1 placeholder="Your example text">
<input type="file" name="yourmediafile">
<input type=submit>
  • urlparam4twig:

Use the JCI-Templates:

Place the following sortcode on the Page /upload/ (see <from action=…>” at twig-template JCI-Template 2, change this if needed)

[jsoncontentimporterpro nameoftemplate="uploadmediafile" orderofshortcodeeval=10] 

In Action, to avoid unwanted uploads this page is password protected:

Ok, if you need a nice free plugin out of the box: Check

PRO: Send Form-Data to API

This is done in this way:
1. Create a 1st JCI-Template:
Name of Template: senddata2form
URL: dummyrequest (we don’t need a API when just displaying the Form)
urlparam4twig: inp

<form action=/send-form-data-to-api/>
<input type=text name=inp  value="{{urlparam.inp | e}}"><br>
<input type=submit value="Send Data">
{% if urlparam.inp %}
{% set sc = "[jsoncontentimporterpro nameoftemplate=senddata url="~urlparam.inp~"]" %}
{% set scExe = (sc | doshortcode) %}
{% endif %}

Then use the following Shortcode on a page with URL /send-form-data-to-api/

[jsoncontentimporterpro nameoftemplate="senddata2form" orderofshortcodeeval=10]

2. In the above twig-template we call a JCI-Template named senddata. Let’S create this:
Name of Template: senddata
URL: empty (we send the URL in the Shortcode)
urlparam4twig: inp

hello senddata: {{nojsonvalue}}

PRO: JSON & Slider – How to do it with the jQuery Lightslider-Lib

Your challenge:
You have some URLs to Images in your JSON-Feed. Those images should be displayed in a image-slider.

There are many ways to do that:
One way is to use a PRO-slider like Smartslider and feed him with RSS, build out of JSON.

Another way is to use the jQuery lightSlider Library (see also here).

  1. Example JSON:
  2. Create a new JCI-Template:
    • Name: lightslider
    • URL:
    • twig-Template:
<link type="text/css" rel="stylesheet" href="">                  
<script src="//"></script>
<script src=""></script>
<ul id="lightSlider">
{% for d in _context %}
<img src="{{d.venue.img}}">
{% endfor %}
<script type="text/javascript">
  $(document).ready(function() {
        speed: 1500,
        auto: true,
        loop: true

ATTENTION: In this Twig-code are three Script-Tags, loading code from remote servers. You can do that for testing. For a productive website you should host the JS-libs on your own servers!

  • “jquery.min.js” you can add via the JCI-options, Tab “Extra”
  • “lightslider.css” / “lightslider.js” you find at at “Download”. In the zip you find a folder “dist”. Copy the files from that (js and css) to your server and insert the URL to the two libs in the JCI-template.

Insert this Shortcode on a WordPress-Page:

[jsoncontentimporterpro nameoftemplate=lightslider]

In Action:

Search JCI-Websites

Fatal error: Uncaught Error: Call to undefined function twig_call_macro() in /www/htdocs/w0135691/ : eval()'d code:88 Stack trace: #0 /www/htdocs/w0135691/ __TwigTemplate_7b59c5b79ecf095c010fa281378acf2239afbd8fb32b2009ef3e2cdf519ea4e0->doDisplay(Array, Array) #1 /www/htdocs/w0135691/ JCITwig\Template->displayWithErrorHandling(Array, Array) #2 /www/htdocs/w0135691/ JCITwig\Template->display(Array) #3 /www/htdocs/w0135691/ in /www/htdocs/w0135691/ : eval()'d code on line 88