Item Manager - image picker

[tomot]

Hi,

is it posible to change/upgrade ItemManager's 'Image upload field' to choose file from Files library rather than upload image each time (like 'Image' field in I18N Custom Fields)?
Or maybe workaround to achive this...

Thnx

[Bigin]

This is the wrong thread for ItemManager, next time, please use this thread for your questions: http://get-simple.info/forums/showthread.php?tid=7293

Hmmm... It's always the same image that you use on every page?

ItemManager does not provide a file picker field to use it with GS files library, with the exception of WYSIWYG editor field.
I don't know what you do with it, but the file upload might not be the right field for you. ItemManager's files are always bound to a specific item and isn't just a simple file picker, as used by custom fields. IM upload field uses an array as value and provides a more complex functionalities like filtering, sorting, resizing, cropping creating thumbnails and removing the files again if you delete an item.

What you can do at the moment is to use a single item as your file library and then left it to your main item in order to assess its images.

Another option is to use WYSIWYG editor field, there you can use GS file library.

You can also use the functionality of the "i18n custom fields" plugin and javascript with ItemManager's Chunk field, as a quick and dirty solution. You'll need to download the "i18n custom fields" plugin for this and unzip in your plugins folder, you don't need to install it, if you not want. Now, create a Text field in ItemManager with CSS class "image1" and a Chunk field with default value, here's a dirty code example without styling:

Code:

<div class="fieldarea">
    <button id="browse" href="#">Browse</button>
</div>
<script>
  function fill_path(url) {
    $('.image1').val(url);
  }
  $(function() {
    $('#browse').click(function(e) {
      window.open('http://your-domain.com/plugins/i18n_customfields/browser/filebrowser.php?func=fill_path&type=images', 'browser', 'width=800,height=500,left=100,top=100,scrollbars=yes');
                 e.preventDefault();
    });
  });
</script>

Just replace "your-domain.com" with your domain name. You can also create as many pickers as you like, just change the javascript for these purposes. Now, create a new item and click the "Browse" button, the file browser of the "i18n custom fields" opens and you can select your image.

To access your image in front-end you can use echo $your_item->fields->image1->value

But a better and cleaner solution would be to create a real file picker field for ItemManager, that uses GS file browser

[tomot]

Hi,

thnx for the answer. Why I need this? Customer already has a bunch of images into Filelib. I've created custom catalogue with IM (classic fileds: title, summary, price...) - what missed was how to pick exisitng image from Filelib. Of course - user friendly, without implementing ckeditor nor chunk-code.

In the meantime I've already made changes on IM (and be aware to diff changes when new IM will be released). I've created InputText clone - rename it to InputImage an add following onclick code:

Code:

public function render($sanitize=false)
{
if(is_null($this->name))
return false;

$itemeditor = $this->tpl->getTemplates('field');
$textfield = $this->tpl->getTemplate('text', $itemeditor);
$output = $this->tpl->render($textfield, array(
'name' => $this->name,
'class' => $this->class,
'style' => !empty($this->style) ? ' style="'.$this->style.'" ' : '',
'id' => $this->id,
'value' => !empty($sanitize) ? $this->sanitize($this->value) : $this->value), true, array()
);

$output .= '
<script type="text/javascript">
function fill_image_'.$this->id.'(url) {
$("#'.$this->id.'").val(url);
}
$(function() {
$("#'.$this->id.'").click(function(e) {
e.preventDefault();
window.open("http://localhost/php/darilce/plugins/i18n_specialpages/browser/filebrowser.php?func=fill_image_'.$this->id.'&type=images", "browser", "width=800,height=500,left=100,top=100,scrollbars=yes");
});
});
</script>';

return $output;
}

Works promissing, needs some fine tunning...

Best regards, T

[Bigin]

Hello,

excellent job! That is the right way how to achieve that.

Just create 2 clones of the original "FieldText.php" and "InputText.php" files. Rename it to "FieldFilepicker.php" under plugins/imanager/lib/processors/fields/
and "InputFilepicker.php" under plugins/imanager/lib/processors/inputs/

Rename the php classes in these files to "FieldFilepicker" and "InputFilepicker" and insert your code there that you posted above.
(just change the window.open line to

Code:

window.open("'.IM_SITE_URL.'plugins/i18n_specialpages/browser/filebrowser.php?func=fill_image_'.$this->id.'&type=images", "browser", "width=800,height=500,left=100,top=100,scrollbars=yes");

to make it a bit more dynamic)

Then edit the "plugins/imanager/tpl/row.fields.im.tpl" file and put there a new option line:

Code:

<option value="filepicker"[[selected-filepicker]]>File Picker</option>

And make a backup of that file. That's all you need to do. Now you can select the File Picker field under the "Fields Menu".
At the next ItemManager release your files remain unchanged with the exception of row.fields.im.tpl, but you have created a copy of that file.

regards

[tomot]

Hi,

exactly what I've done. Little more - I've implemented image preview (see attachment). Here is the code if someone finds this useful:

image.field.im.tpl

Code:

<table style="margin:0;width:100%;">

<tr>
<td><input name="[[name]]" type="text" style="width:100%;" class="[[class]]" id="[[id]]" value="[[value]]"[[style]] readonly="readonly"/></td>
<td><img id="thumb_[[id]]" src="" alt="" /></td>
<td><span class="edit-nav"><a id="btn_[[id]]" href="#">Browse</a></span></td>
</tr>
</table>

fields/FieldImage.php

PHP Code:

<?php

class FieldImage implements FieldInterface
{
 public $properties;
 protected $tpl;

 public function __construct(TemplateEngine $tpl)
 {
 $this->tpl = $tpl;
 $this->name = null;
 $this->class = null;
 $this->id = null;
 $this->value = null;
 $this->style = null;
 $this->configs = new stdClass();
 }


 public function render($sanitize=false)
 {
 if(is_null($this->name))
 return false;

 $itemeditor = $this->tpl->getTemplates('field');
 $textfield = $this->tpl->getTemplate('image', $itemeditor);
 $output = $this->tpl->render($textfield, array(
 'name' => $this->name,
 'class' => $this->class,
 'style' => !empty($this->style) ? ' style="'.$this->style.'" ' : '',
 'id' => $this->id,
 'value' => !empty($sanitize) ? $this->sanitize($this->value) : $this->value), true, array()
 );

 $output .= '
 <script type="text/javascript">
 var site_url = "'.IM_SITE_URL.'";
 function fill_image_'.$this->id.'(url) {
 $("#'.$this->id.'").val(url);
 get_thumb_'.$this->id.'();
 }
 $(function() {
 $("#btn_'.$this->id.'").click(function(e) {
 e.preventDefault();
 window.open("'.IM_SITE_URL.'/plugins/i18n_specialpages/browser/filebrowser.php?func=fill_image_'.$this->id.'&type=images", "browser", "width=800,height=500,left=100,top=100,scrollbars=yes");
 });
 });
 function get_thumb_'.$this->id.'() {
 setTimeout(function() {
 var thumb = $("#'.$this->id.'").val();
 if (thumb.startsWith(site_url + "data/uploads/"))
 {
 var file_path = $("#'.$this->id.'").val();
 var file_name = file_path.substr(file_path.lastIndexOf("/") + 1);
 var file_dir = file_path.replace(site_url + "data/uploads", "").replace(file_name, "");
 thumb = site_url + "data/thumbs" + file_dir + "/thumbsm." + file_name;
 } else {
 thumb = thumb.replace("/thumbnail.", "/thumbsm.");
 }
 $("#thumb_'.$this->id.'").attr("src", thumb);
 }, 400);
 }
 get_thumb_'.$this->id.'();
 </script>';

 return $output;
 }
 protected function sanitize($value){return imanager('sanitizer')->text($value);}

 public function getConfigFieldtype(){}

} 


Best regards, T

   

[Bigin]

Great! I'll try to implement the new field in the next release. Thank you very much for contribution.