Images in PrestaShop Render List

In this blog, we are going to learn how to show images in PrestaShop render list using classes.

In back office when we create render list in admin controller sometimes we also need to show images related to list as small thumbnails to identify the row visually.

Here we are showing example of custom product listing on back office admin controller using render list function.

Example 1 : Product Listing

public function renderList()
{
    $this->table = 'product';
    $this->className = 'Product';
    $this->identifier = 'id_product';
    $this->_select = 'image_shop.`id_image` AS id_image, pl.`name`';

    $this->_join = 'LEFT JOIN `'._DB_PREFIX_.'product` p
    '.Shop::addSqlAssociation('product', 'p').' ON 
    (p.`id_product` = a.`id_product`)';

    $this->_join .= ' LEFT JOIN `'._DB_PREFIX_.'product_lang` pl
    ON (pl.`id_product` = p.`id_product` AND pl.`id_lang` =
    '.(int)$this->context->language->id.
    Shop::addSqlRestrictionOnLang('pl').')';

    $this->_join .= ' LEFT JOIN `'._DB_PREFIX_.'image_shop` image_shop
    ON (image_shop.`id_product` = p.`id_product` AND image_shop.cover=1
    AND image_shop.id_shop='.(int)$this->context->shop->id.')';

    $this->_join .= ' LEFT JOIN `'._DB_PREFIX_.'image_lang` il
    ON (image_shop.`id_image` = il.`id_image` AND
    il.`id_lang` = '.(int)$this->context->language->id.')';

    $this->_group = 'GROUP BY a.`id_product`';
    $this->_orderBy = $this->identifier;
    $this->_orderWay = 'ASC';
    $this->toolbar_title = $this->l('Outlet products');

    $this->fields_list = array(
        'id_product' => array(
            'title' => $this->l('Product ID'),            
            'align' => 'center',            
        ),
        'image' => array(
            'title' => 'Image',
            'align' => 'center',
            'image' => 'p',            
        ),
        'name' => array(
            'title' => $this->l('Name'),
            'align' => 'center',            
        ),
    );
    return parent::renderList();
}

Here you can see that for showing image in row as a thumbnail we have only written as below :

'image' => array(
    'title' => 'Image',
    'align' => 'center',
    'image' => 'p',    
),

Here 'image' => 'p' it denotes product image folder, searches row product id image in product folder and show it as thumbnail in list.

Example 2 : Carrier Listing

public function renderList()
{
    $this->table = 'carrier';
    $this->className = 'Carrier';
    $this->identifier = 'id_carrier';
    $this->_select = '  cl.`delay` ';
    $this->_join .= ' LEFT JOIN `'._DB_PREFIX_.'carrier_lang` cl
    ON (cl.`id_carrier` = a.`id_carrier` AND cl.`id_lang` =
    '.(int)$this->context->language->id.
    Shop::addSqlRestrictionOnLang('cl').')';
    $this->_group = 'GROUP BY a.`id_carrier`';
    $this->_orderBy = $this->identifier;
    $this->_orderWay = 'DESC';

    $this->fields_list = array(
        'id_carrier' => array(
            'title' => $this->l('Carrier ID'),            
            'align' => 'center',            
        ),
        'image' => array(
            'title' => 'Image',
            'align' => 'center',
            'image' => 's',            
        ),
        'name' => array(
            'title' => $this->l('Name'),
            'align' => 'center',
            'havingFilter' => true,
        ),
    );
    return parent::renderList();
}

Here we have written 'image' => 's' it denotes shipping image folder, searches the row carrier id image in shipping images folder and show it as thumbnail.

Callback Method :

There is also another method if you want to show images other then class object. You can use use callback function in render list as shown below.

Select all required fields column from class and make alias for identifier (`id_product` as `wk_id_product`) in sql query and write it as below

'wk_id_product' => array(
    'title' => 'Image',
    'align' => 'center',       
    'callback' => 'getProductImage' 
),

Now define getProductImage function and fetch custom tpl as below.

public function getProductImage($idProduct, $col)
{
    $imageLink = Link::getImageLink(
        $col['link_rewrite'], 
        $idProduct, 
        'cover'
    );
    $this->context->smarty(assign('image' => $imageLink));
    $this->context->smarty->fetch('thumbnail tpl here');
}

On tpl file make your thumbnail design and apply image link in src.

That’s all.

If you are facing any issues or doubts in the above process, please feel free to contact us through the comment section.

I would be happy to help.

Also, you can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.

For any doubt contact us at support@webkul.com.