Custom Template Variabe containing a sortable multi item list or a datatable for the Evolution CMS content management framework
With this Evolution CMS package a new template variable type is introduced. The template variable could contain a sortable multi item list or a datatable.
Documentation could be found on http://docs.evo.im/en/04_extras/multitv.html
new type "crop" uses Cropper.js to get parameters for further use with phpthumb.
example of configuration in images.config.inc.php
'image' => array(
'caption' => 'Image',
'type' => 'image'
),
'img16x9' =>array (
'caption' => 'Ratio 16x9',
'type' => 'crop',
'cropof' => 'image'
),
'img4x3' =>array (
'caption' => 'Ratio 4x3',
'type' => 'crop',
'cropof' => 'image'
),
'img1x1' =>array (
'caption' => 'Ratio 1x1',
'type' => 'crop',
'cropof' => 'image'
),
'img2x3' =>array (
'caption' => 'Ratio 2x3',
'type' => 'crop',
'cropof' => 'image'
),
where, imgNxN - name that will be used as aspectRatio of Cropper.js initialization, cropof - image field
- update tvs\multitv
- create/update any config.inc.php to use new type "crop"
As a result, in back-end you can edit images and set four aspect ratio for each image after that you can get this ratio and pass to your image proccessor like phpthumb to crop the image (using snippet, php class, etc.).
MultiTV stored image`s ratio in database as
{"fieldValue":[
{"fieldTab":"",
"image":"assets/images/img1.jpg",
"img16x9":"x:12,y:108,width:967,height:543",
"img4x3":"x:4,y:108,width:967,height:725",
"img1x1":"x:5,y:106,width:967,height:967",
"img2x3":"x:65,y:33,width:826,height:1239",
"id":"img1"
}
]}
get this ratio raw json via db helper or MultiTV method for phpThumb crop function correct argument is 'sx=12,sy=108,sw=967,sh=543' we can convert "x:12,y:108,width:967,height:543" to "sx=12,sy=108,sw=967,sh=543" and pass this to phpThumb class
if you use phpthumb for front-end create snippet 'getImage' like this:
require_once MODX_BASE_PATH .'/assets/snippets/phpthumb/phpthumb.class.php';
$img_source = null;
$img_ration = null;
//get raw image`s ratio from db or use multitv method
$modxobject = $modx->getDocumentObject('id', 3, true);
$_images = json_decode($modxobject['goods_images'][1], true);
foreach ($_images['fieldValue'] as $item) {
if (isset($item['image'])) {
$img_source = $item['image'];
$img_ratio = $item[$ratio] ?? null;
break; // get only one image for sample
}
}
//convert multitv image`s data for use in phpthub class
$img_ratio = str_replace(array(':', 'x', 'y', 'width', 'height',','), array('=', 'sx', 'sy', 'sw', 'sh','&'), $img_ratio);
//w & h is image`s output size. you can change this or add your own variables when calling the snippet and replace them here.
$img_params = str_replace('img_ratio',$img_ratio,'q=80&w=450&h=253&img_ratio');
parse_str($img_params,$_params);
$path_parts = pathinfo($img_source);
$path = $path_parts['dirname'];
$outputFilename = $path_parts['basename']; // generate public image`s filename here
$defaultCacheFolder = 'assets/cache/';
$path = $defaultCacheFolder . $ratio . '/' . $path;
if (!file_exists($path) && mkdir($path,0755,true) && is_dir($path)) {
chmod($path, 0755);
}
$phpThumb = new phpthumb();
$phpThumb->config_cache_directory = MODX_BASE_PATH . $defaultCacheFolder;
$phpThumb->config_temp_directory = $defaultCacheFolder;
$phpThumb->config_document_root = MODX_BASE_PATH;
$phpThumb->setSourceFilename(MODX_BASE_PATH . $img_source);
foreach ($_params as $key => $value) {
$phpThumb->setParameter($key, $value);
}
if ($phpThumb->GenerateThumbnail()) {
$phpThumb->RenderToFile(MODX_BASE_PATH . $path . $outputFilename);
}
return $path . $outputFilename;
[!getImage? &ratio=`img16x9`!]
[!getImage? &ratio=`img4x3`!]
or
<img src="[!getImage? &ratio=`img16x9`!]">
<img src="[!getImage? &ratio=`img4x3`!]">
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
