PRO: Pagination by twig – several feeds, many pages

This page demonstrates how you can paginate data. The data comes in a several feeds (see here for data in one feeds)

Create a new JCI-Template for that:

  • Name of Template: paginate
  • URL:
{% set page = 0 %}{% if urlparam.no %}{% set page = urlparam.no-1 %}{% endif %}
http://api.json-content-importer.com/extra/api/pagination/?page={{page}}
  • urlparam4twig: no
  • twig template:
{% set noonpage = 10 %}
 {% set noofpages = (totalno/noonpage) | round(0, 'ceil') %}
no of found dataitems: {{totalno}}, show on {{noofpages}} pages, each with {{noonpage }} items
<br>
{% set page = 1 %}{% if urlparam.no %}{% set page = urlparam.no %}{% endif %}
{% for i in 1..noofpages %} 
{% if i==page %} 
//<b>this is page: </b> {{page }} //
{% else %} 
<a href=?no={{i}}>{{i}}</a>
{% endif %} 
{% endfor %}
{% set currentpage = 1 %}
{% if urlparam.no %}{% set currentpage = page %}{% endif %}
<br>{% set start = noonpage * (currentpage-1) +1 %}
{% set end = start + noonpage -1 %} 
{% if start < 1 %} {% set start = 1 %} {% set end = noonpage %} {% endif %} 
{% if end > totalno %} {% set end = totalno %} {% endif %} 
show {{start}} to {{end}}
<br>
{% for k,v in items %} 
{{k}}: {{v}}<br>
{% endfor %} 

Example in action:

no of found dataitems: 87, show on 9 pages, each with 10 items
//this is page: 1 // 2 3 4 5 6 7 8 9
show 1 to 10
1: c4ca4238a0b923820dcc509a6f75849b
2: c81e728d9d4c2f636f067f89cc14862c
3: eccbc87e4b5ce2fe28308fd9f2a7baf3
4: a87ff679a2f3e71d9181a67b7542122c
5: e4da3b7fbbce2345d7772b0674a318d5
6: 1679091c5a880faf6fb5e6087eb1b2dc
7: 8f14e45fceea167a5a36dedd4bea2543
8: c9f0f895fb98ab9159f51fd0297e236d
9: 45c48cce2e2d7fbdea1afc51c7c6ad26
10: d3d9446802a44259755d38e6d163e820

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":{"no":"","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>
</form>
  • urlparam4twig:
text1##yourmediafile

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:
http://api.json-content-importer.com/upload/

Ok, if you need a nice free plugin out of the box: Check https://wordpress.org/plugins/wp-file-upload/

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
twig-template:

<form action=/send-form-data-to-api/>
<input type=text name=inp  value="{{urlparam.inp | e}}"><br>
<input type=submit value="Send Data">
</form>
{% if urlparam.inp %}
{% set sc = "[jsoncontentimporterpro nameoftemplate=senddata url=http://api.json-content-importer.com/extra/json/storeanswer.php?insert="~urlparam.inp~"]" %}
{% set scExe = (sc | doshortcode) %}
{{scExe}}
{% 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
twig-template:

hello senddata: {{nojsonvalue}}


Search JCI-Websites


Fatal error: Uncaught Error: Call to undefined function twig_call_macro() in /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Environment.php(359) : eval()'d code:88 Stack trace: #0 /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Template.php(394): __TwigTemplate_7b59c5b79ecf095c010fa281378acf2239afbd8fb32b2009ef3e2cdf519ea4e0->doDisplay(Array, Array) #1 /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Template.php(367): JCITwig\Template->displayWithErrorHandling(Array, Array) #2 /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Template.php(379): JCITwig\Template->display(Array) #3 /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig3 in /www/htdocs/w0135691/api.json-content-importer.com/wp-content/plugins/jsoncontentimporterpro3/twiglib/twig332adj/vendor/twig/twig/src/Environment.php(359) : eval()'d code on line 88