Read More
Read More
Menu Close

    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.

    Images in PrestaShop Admin Render List
    Images in PrestaShop Admin Render List

    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.

    Searching for an experienced
    Prestashop Company ?
    Read More

    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();
    }
    Image in PrestaShop Render List
    Images in PrestaShop Render List

    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 [email protected].

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top