PRO: Show Page-Properties

Challenge: Show and use WordPress-Page-Properties like User-ID, Page-ID etc.

Solution: Create a new JCI-Template with name “showpageproperties” and URL “dummyrequest” (or an URL with JSON) and this twig-Code:

{% set pageprop = wp_get_page_properties() %}
get_current_user_id: {{pageprop.get_current_user_id}}
get_post.ID: {{pageprop.get_post.ID}}
all data:
{{pageprop |json_encode | e}}

Then you can use this Shortcode to display the properties:

[jsoncontentimporterpro nameoftemplate="showpageproperties"]

In Action:

get_current_user_id: 0
get_post.ID: 9540
all data:
{"get_permalink":"","home_url":"","get_current_user_id":0,"userdata":false,"get_post":{"ID":9540,"post_author":"1","post_date":"2022-01-30 20:37:32","post_date_gmt":"2022-01-30 19:37:32","post_content":"<!-- wp:paragraph -->\n<p><strong>Challenge:</strong> Show and use Wordpress-Page-Properties like User-ID, Page-ID etc.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:separator -->\n<hr class=\"wp-block-separator\"/>\n<!-- /wp:separator -->\n\n<!-- wp:paragraph -->\n<p><strong>Solution:</strong> Create a new JCI-Template with name \"showpageproperties\" and URL \"dummyrequest\" (or an URL with JSON) and this twig-Code:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{% set pageprop = wp_get_page_properties() %}\nget_current_user_id: {{pageprop.get_current_user_id}}\nget_post.ID: {{pageprop.get_post.ID}}\nall data:\n{{pageprop |json_encode | e}}</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:paragraph -->\n<p>Then you can use this Shortcode to display the properties:</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:enlighter/codeblock -->\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">[[ nameoftemplate=\"showpageproperties\"]]</pre>\n<!-- /wp:enlighter/codeblock -->\n\n<!-- wp:separator -->\n<hr class=\"wp-block-separator\"/>\n<!-- /wp:separator -->\n\n<!-- wp:paragraph -->\n<p><strong>In Action:</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>[ nameoftemplate=\"showpageproperties\"]</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:separator -->\n<hr class=\"wp-block-separator\"/>\n<!-- /wp:separator -->\n\n<!-- wp:paragraph -->\n<p>Remark: In the field \"post_content\" the string \"\" is removed, as this could be cause trouble in executing there shortcodes again and again</p>\n<!-- /wp:paragraph -->","post_title":"PRO: Show Page-Properties","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"pro-show-page-properties","to_ping":"","pinged":"","post_modified":"2022-02-01 23:06:39","post_modified_gmt":"2022-02-01 22:06:39","post_content_filtered":"","post_parent":9627,"guid":"","menu_order":120,"post_type":"page","post_mime_type":"","comment_count":"0","filter":"raw"},"cpf":{"_edit_lock":["1643753200:1"],"_edit_last":["1"],"jci_pagehead":[""],"_jci_pagehead":["field_602bcf9303a35"],"jci_pagetitle":[""],"_jci_pagetitle":["field_602bcf9d03a36"]}}

Remark: In the field “post_content” the string “jsoncontentimporterpro” is removed, as this could be cause trouble in executing there shortcodes again and again

PRO: Upload Image from JSON-data to WP-Media with twig-function “mediastore”

This page demonstrates how you can upload a Image to the WordPress-Library out of a JSON-feed

Input JSON:<br>
{{_context |json_encode}}<hr>

{# upload the image to the upload-page itself #}
{% set pgprop = wp_get_page_properties() %}
{% set parentPageId = pgprop.get_post.ID %} 

{# Title of the mediafile in the WP-Medialib #}
{% set mediatitle = "this-is-mediatitle" %}

{# FALSE: Store it always
TRUE: If there is already a mediafile with title 'mediatitle' do not store it
{% set useExistingMediaFile = FALSE %}

{# only relevant if useExistingMediaFile=FALSE
TRUE: do not store but delete existing files with title 'mediatitle' #}
{% set deleteonly = FALSE %}

{# set post_excerpt / caption #}
{% set excerpt = "this is post_excerpt" %}

{# set post_content / description #}
{% set content = " this is content" %}

{# not used, set always to "" #}
{% set mime_type = "" %}

{# if '' the value of source of the mediafile is used from the JSON as is. 
If sourcetype="file" the plugin checks if such a file exists on the server:
If no such mediafile is on the server the mediastore is aborted without storing. 
This is helpful: If you have many mediafiles (1000s) in the JSON you might first download
the mediafiles with a PHP-Script without any WordPress-OVerhead (much faster). 
And then laod the images via WordPress and JCI-mediastore from the server without 
http-requests (also fast)#}
{% set sourcetype = "" %}

{# FALSE: Do not generate thumbnails - 
if you store many images this is importaint, as generating costs lots of performance / time #}
{% set generate_thumbnails = TRUE %}

{% set loadedimage = ((imageurl | mediastore(parentPageId, useExistingMediaFile, deleteonly, mediatitle, excerpt, content, mime_type, sourcetype, generate_thumbnails)) | json_decode) %}

Uploaded Images at <a href="{{loadedimage.jci.attachment_url }}" target="_blank2">{{loadedimage.jci.attachment_url }}</a><br>
<img src="{{loadedimage.jci.attachment_url }}">

Complete WordPress-Response:<br>
{{ loadedimage | json_encode }}

Example in action:

Input JSON:

Warning: checkdate() expects parameter 1 to be int, string given in /www/htdocs/w0135691/ on line 7069
Complete Wordpress-Response:

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 %}{% set page = %}{% endif %}{{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
{% set page = 1 %}{% if %}{% set page = %}{% 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 %}{% 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}}
{% 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>
  • 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: 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

Show No of Hits (max. 100):

  1. Display JSON-data in Charts and Maps
  2. Buy Plugin “Build n:n Toolset-CPT-Relationships”
  3. Buy the Plugin “Build n:n Toolset-CPT-Relationships”
  4. Download Plugin Build n:n Toolset-CPT-Relationships
  5. Blogpost: “real-time Amazon Product Data API” and JCI free
  6. Invoices
  7. Anyways this really is a genius plugin.
  8. thank you for developing this plugin, …
  9. Thank you for the wonderful plugin you have created!
  10. First of all…

  1. PRO: Create Maps with Markers
  2. generate-meetup-blueprint
  3. Formatting of date
  4. PRO: Use JSON, XML, CSV…
  5. PRO: Intermediate using of twig with the JCI-Plugin
  6. PRO: Advanced using of twig with the JCI-Plugin
  7. PRO: Special PRO-Examples
  8. PRO: JSON, XML, CSV… created with JCI
  9. PRO: Create Custom Post Types / Pages
  10. API-Examples

  1. JCI and Google Spreadsheet
  2. JCI and Openstreetmaps
  3. PRO Version: Create Custom Pages with a Shortcode
  4. PRO: Generate with twig or Shortcodes
  5. JCI and WPML
  6. JCI and Elementor
  7. PRO: Sync Woocommerce-Products and JSON
  8. PRO: Send Userinput to API
  9. PRO: Use Custom Post Fields
  10. PRO: Load multiple JSON

This Multisite-Search is done with the JCI-Pro – see here how this works…

PRO: Set Page-Title and Head-Tags by JSON and CPF

This pages shows you, how to set the Page-Title and Head-Tags out of JSON-data together with Custom Post Fields.

  • Step 1: Add “Custom Post Fields” (CPF) to “Custom Post Type” (CPT)
    You need two Custom Post Fields named “jci_pagetitle” and “jci_pagehead”. One way is to do that with ACF.
    Connect these CPF with the CPT you want to set Title and Head, e. g. “Pages”.
  • Step 2: Custom Post Fields
    Create a new Custom Post Page (CPP) out of the Custom Post Type you connected to the new Custom Post fields (CPF). Add some dummyvalues to the CPF and preview the CPP: The title should be the dummyvalue you set in “jci_pagetitle”
  • Step 3: Create a new JCI-Template
{{ ("now"|date("H:i:s")) }} - name is {{urlparam.ename |e('html') | slice(0, 5)}} - {{}}
  • Step 4: Add shortcode with template
    Insert the following into the CPF “jci_pagetitle”:
    begin-[jsoncontentimporterpro nameoftemplate=addpagetitle]-end
    The preview of the page should have the HTML-Title <title>begin-name is Love Breakfast-end</title> out of JSON-data. And out of first 5 characters of the GET-parameter “ename”, see here.
  • Step 5: Add Head-Tags to page, created out of JSON (Step 4 and the Shortcode there is required!)
    Insert the following into the CPF “jci_pagehead”:
<meta name="event" content="{{urlparam.ename |e('html'|slice(0, 3) ) }}-{{ local_date|date("s:i;H-m/d/Y") }}: {{}}">#LF#<meta name="city" content="{{}}">

See it in action here (open HTML-Sourcecode for that in the browser, please): JSON and the first 3 characters of the GET-parameter “ename” meet in Meta-Tags.

PRO: Display & Search JSON and pass it to a Contact Form

Challenge: You have to display and search a JSON like

Create two JCI-Templates and Pages and get that:

PAGE 1: Display-Page:

[jsoncontentimporterpro nameoftemplate=hrus]

on page /hrus-list-all/ (you can change that, but then you have to change it in the Twig-code of both Templates too!)

JCI-Template 1:
Name: hrus
urlparam4twig: jobsea

<form action="/hrfuturebrandsus/">
<input type="text" name="jobsea" value="{{urlparam.jobsea}}">
<input type="submit">

{% set jobanz = 0 %}
{% set jobtxtout = '' %}
{% for c in _context %}
{% if c.title %}
{% set jobtxt  = '
<h1>' ~ c.title ~ '</h1>
' %}
{% set jobtxt  = jobtxt  ~ c.summary ~ '
' %}
{% set jobtxt  = jobtxt  ~ '<i>' ~ c.employment_status ~ '</i>' %}
{% set jobtxt  = jobtxt  ~ ' <a href="/hrus-detail/?slug=' ~ (c.slug | url_encode) ~ '">View Job</a>' %}
{% set jobtxt  = jobtxt  ~ '


' %}
{% if urlparam.jobsea %}
{% if 
(c.title matches '/'~urlparam.jobsea~'/i') or
(c.summary matches '/'~urlparam.jobsea~'/i')
{% set jobtxtout =jobtxtout ~ jobtxt  %}
{% set jobanz = jobanz +1 %}
{% endif %}
{% else %}
{% set jobtxtout =jobtxtout ~ jobtxt  %}
{% set jobanz = jobanz +1 %}
{% endif %}
{% endif %}
{% endfor %}
{% if urlparam.jobsea %}
{{ jobanz}} Jobs found
{% else %}
Current {{ jobanz}} Positions Open:
{% endif %}

PAGE 2: Details-Page
“orderofshortcodeeval=2” tells the plugin to execute the Contact Form first and then insert the JSON-Values

[jsoncontentimporterpro nameoftemplate=hrusdetail orderofshortcodeeval=2]

on page /hrus-detail/ (you can change that, but then you have to change it in the Twig-code of the Display-Page Templates !)

JCI-Template 2:
Name: hrusdetail
urlparam4twig: slug

{% set jobtitle = "" %}
{% for c in _context %}
{% if (c.title and (urlparam.slug==c.slug)) %}


{% set jobtitle = (c.title) %}
{% endif %}
{% endfor %}

<a href="/hrus-list-all//">Back to all Jobs</a><br>
insert shortcode for contact form here, hereby insert info about selected job, here we go with "contact-form-7"<br>
[contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"]

contact-form-7 (option):
If you need to add a Contact-Form for the User the Plugin Contact-Form-7 is an option.
For that install Contact-Form-7 and add a new Form with this Code:

<label> Job
    [text* job "{{jobtitle}}"] </label>

<label> Your name
    [text* your-name] </label>

<label> Your email
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional)
    [textarea your-message] </label>

[submit "Submit"]

Name that, save it and then you get a Shortcode like [contact-form-7 id="NUMBER_SEE_BELOW" title="hrus"].

The {{jobtitle}} is transformed with the JSON-Data. For that, check the JCI-Options at “Shortcode Settings”: The Radiobox at “Usage of Shortcodes (JCI or other) in the JCI-twig-Template” must be at the “Or the other way round: Executing Shortcodes in the template first and then evaluate the twig-code”