Using resource-specific mediasource and multifile-uploader with MIGX (Old Version)

{ Page history | Improve this page | Report an issue }

Use resource-specific media source and multifile-uploader

In this Tutorial we will learn how we can have a dynamic media source, with its own auto-created file-folder for each resource. For uploading multiple files at once, we will use MIGX's multiupload - feature. We will also be able to synchronize all migx items with files in that media source directory.

Requirements

First off we will need to install MIGX by Package Management and do some basic configurations.

Create the dynamic resource-specific media source

Go to: Tools->Media Sources
Create new media sourc
- name: ResourceMediaPath
- source type: Filesystem
Update this media source
- basepath and baseurl: [[migxResourceMediaPath? &pathTpl=assets/resourceimages/{id}/]]
- if you add the &createFolder=1 property it will automatically create the {id} folder if it doesn't already exist.
Add three new settings to the media source:
- thumbX: 200
- thumbY: 200
- maxFiles: 20

You may need to create a directory with write-permissions for php: assets/resourceimages/

Create the MIGX - TV

Create a new TV

Tab: General Information
- name: resourcealbum
Tab: Input Options
- Input Type: migx
- Configurations: resourcealbum
Tab: Template Access
- select your Template for your album-resources
Tab: Media Sources
- select the ResourceMediaPath - media source for your context (web by default)

Create the Configuration for the MIGX-TV

Go to: Components->MIGX->Tab: MIGX
Create a new Configuration with 'add item'
- name: resourcealbum
Click 'Done' to save the new Configuration
right-click on the new configuration and select 'import/export'
copy/paste this code into the textarea:

{
  "formtabs": "[{\"MIGX_id\":\"1\",\"caption\":\"Image\",\"fields\":[{\"field\":\"title\",\"caption\":\"Title\",\"MIGX_id\":1},{\"MIGX_id\":\"2\",\"field\":\"image\",\"caption\":\"Image\",\"inputTV\":\"\",\"inputTVtype\":\"image\",\"configs\":\"\",\"sourceFrom\":\"migx\",\"sources\":\"\",\"inputOptionValues\":\"\",\"default\":\"\"},{\"MIGX_id\":\"3\",\"field\":\"description\",\"caption\":\"Description\",\"inputTV\":\"\",\"inputTVtype\":\"\",\"configs\":\"\",\"sourceFrom\":\"config\",\"sources\":\"\",\"inputOptionValues\":\"\",\"default\":\"\"}]}]",
  "contextmenus": "",
  "actionbuttons": "upload||loadfromsource",
  "columnbuttons": "",
  "filters": "",
  "extended": {
    "migx_add": "Add Image",
    "formcaption": "Image",
    "win_id": "resourcegallery",
    "multiple_formtabs": "",
    "packageName": "",
    "classname": "",
    "task": "",
    "getlistsort": "",
    "getlistsortdir": "",
    "use_custom_prefix": "0",
    "prefix": "",
    "grid": "",
    "gridload_mode": "1",
    "check_resid": "1",
    "check_resid_TV": "",
    "join_alias": "",
    "getlistwhere": "",
    "joins": "",
    "cmpmaincaption": "",
    "cmptabcaption": "",
    "cmptabdescription": "",
    "cmptabcontroller": ""
  },
  "columns": "[{\"MIGX_id\":\"1\",\"header\":\"ID\",\"dataIndex\":\"MIGX_id\",\"width\":\"10\",\"renderer\":\"\",\"sortable\":\"false\",\"show_in_grid\":\"1\"},{\"MIGX_id\":\"2\",\"header\":\"Title\",\"dataIndex\":\"title\",\"width\":\"20\",\"renderer\":\"\",\"sortable\":\"false\",\"show_in_grid\":\"1\"},{\"MIGX_id\":\"3\",\"header\":\"Image\",\"dataIndex\":\"image\",\"width\":\"20\",\"renderer\":\"this.renderImage\",\"sortable\":\"false\",\"show_in_grid\":\"1\"},{\"MIGX_id\":\"4\",\"header\":\"Deleted\",\"dataIndex\":\"deleted\",\"width\":\"10\",\"renderer\":\"this.renderCrossTick\",\"sortable\":\"false\",\"show_in_grid\":\"1\"}]"
}

Have Fun

Now you should be able to create Album-Resources, upload images with multifile-uploader and synchronize the MIGX-items with your files. For listing them on Front-end use the getImageList - snippet.