phphtmlopencartopencart-3opencart-module

How to display the image selection field from the media library in the OpenCart 3 module admin panel


How to display the image selection field from the media library in the OpenCart 3 module admin panel? Tried it like a normal textbox but it doesn't work.


Solution

  • Lats say we need to add and image in Module Featured, for example.

    Go to /admin/view/template/extension/module/featured.php

    Almost in any place inside of public function index() { ... } (might be after $this->load->model('setting/module'); and before $this->response->setOutput($this->load->view('extension/module/featured', $data));) add following.

    I have add it before if (isset($this->request->post['top'])) {

    if (isset($this->request->post['image'])) {
      $data['image'] = $this->request->post['image'];
    } elseif (!empty($module_info)) {
      $data['image'] = $module_info['image'];
    } else {
      $data['image'] = '';
    }
    
    $this->load->model('tool/image');
    
    if (isset($this->request->post['image']) && is_file(DIR_IMAGE . $this->request->post['image'])) {
      $data['thumb'] = $this->model_tool_image->resize($this->request->post['image'], 100, 100);
    } elseif (!empty($module_info) && is_file(DIR_IMAGE . $module_info['image'])) {
      $data['thumb'] = $this->model_tool_image->resize($module_info['image'], 100, 100);
    } else {
      $data['thumb'] = $this->model_tool_image->resize('no_image.png', 100, 100);
    }
    
    $data['placeholder'] = $this->model_tool_image->resize('no_image.png', 100, 100);
    

    Than, in /admin/view/template/extension/module/featured.twig find

    <div class="form-group">
      <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
      <div class="col-sm-10">
        <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
        {% if error_name %}
        <div class="text-danger">{{ error_name }}</div>
        {% endif %}
      </div>
    </div> 
    

    And add after

    <div class="form-group">
      <label class="col-sm-2 control-label">{{ entry_image }}</label>
      <div class="col-sm-10"><a href="" id="thumb-image" data-toggle="image" class="img-thumbnail"><img src="{{ thumb }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a>
        <input type="hidden" name="image" value="{{ image }}" id="input-image" />
      </div>
    </div>
    

    Now it should work.