Catalog

Specialities in the News pages:

images have fixed aspect ratio 2:1, big images are resized, small images are rejected.
image class for tinymce is changed to allow images the full column width
detail page shows title, the 1st image, description and content. To the right is a side bar

Optimizing (future plan):

Full text search
2nd datadefinition for detail page, due to avoid to send the content to the catalog page.

Datadefinition

Here are only the changes listed:

{
  "head":["<script src='{{root}}tinymce/tinymce.js'></script>"],
  "head_end": [
      "<script src=\"{{root}}kitsamples\/newspages\/newspages_tinymce.js\"><\/script>"
  ],
  "masterdata":{
    "upload": {
      "enabled": true,
      "settings":{
        "minImageWidth":1000,
        "minImageHeight":500,
        "showtext":true,
        "dropzone":{
            "maxFilesize":5,
            "resizeWidth":1000,
            "resizeHeight":500,
            "resizeMethod":"crop",
            "acceptedFiles": ".jpeg,.jpg,.png,.gif",
            "resize_not_working":false
        }
      }
    },
    "sql_derived": "SELECT er_pages.*,'' as k8select, username, concat_ws(marking,headtitle,headdescription) as searchcolumn FROM er_pages LEFT OUTER JOIN k8login ON userID=er_pages.creatorID WHERE 1=1",
    "sql_orderby": "datetimecreated desc"
  },
  "k8form": {
      "selector": ".js_dataform",
      "templatetype": "masterform",
      "fields": [
          {
              "name": "pageID",
              "type": "hidden",
              "label": "pageID"
          },
          {
              "name": "marking",
              "type": "text",
              "label": "marking",
              "required":true,
              "maxLength": 50
          },
          {
              "name": "groupID",
              "tagName": "select",
              "label": "category",
              "options":[{"value":0,"text":"general"},{"value":1,"text":"politics"},{"value":2,"text":"economy"}]
          },
          {
              "name": "headtitle",
              "type": "text",
              "label": "headtitle",
              "required":true,
              "maxLength": 255
          },
          {
              "name": "headdescription",
              "tagName": "textarea",
              "label": "headdescription",
              "maxLength": 255
          },
          {
              "fieldwraptemplate": "<div class=\"mb-3\">{{labelelement}}{{fieldelement}}</div>",
              "name": "content",
              "tagName": "textarea",
              "fieldclass": "form-control tinymce",
              "label": "content"
          }
      ]
  },
  "html": {
    "catalog": {
      "record":"look to the HTML description"
    }
    "detail": {
      "record":"look to the HTML description"
    }
  }
}

head

tinymce library
tinymce initialization, image class changed in js-file
no detail script

masterdata upload

upload_max_filesize=5M
minimum width and height
resize width and height
crop the larger side

masterdata SQL

searchcolumn set to margin,headtitle, headdescription
k8login joined for username
"sql_orderby": "datetimecreated desc"

k8form

marking is required
groupID changed to select
headtitle is required
headdescription changed to textarea
added tinymce to content

HTML

catalog_record
detail_record

HTML

catalog record

filename: kitsamples/newspages/newspages_catalog_record.html

The images uses the full width of the left column. The following placeholders for the right record column are in:

{{headtitle}}
{{datetimecreated}}
{{username}}
{{headdescription}}

Please regard in your snippets the classes:

js_rec_record: important!
js_inlineform: optional for the form

detail record

filename: kitsamples/newspages/newspages_detail_record.html

In this markup are 2 columns

the record with the news, fields and images use the full width of the column
the sidebar: class="js_sidebar"