Linking images via ImageColumn type in a grid

[krekk]

Hi! i attempted to use ImageColumn type in my grid, but i don't really understand how to link the images i want to use in the grid. I looked up the presta documentation about the column type, but it didn't say anything about it. As far as i understand i have to make a column in my sql table dedicated to img urls, but i don't really know for example how to link for example "MyModule/view/img/img.png". I tried many ways of linking the image, but none worked.

When i inspect the image element in my browser it gets the link from the db, but its broken obviously. heres the generated html:

<img src="/modules/MyModule/view/img/img.png">

 

[ps8modules.com]

If you need advice, you need to put a piece of code here to see how you have the sql and the field type.
This way we can only guess.

There are several ways to display an image in a grid.
E.g. you can get the image id in sql and use the function in the field specification.

[krekk]

@WebSoft i can give you my code, but i don't think it'll help solving this particular issue. 

as i said, i use an image column, just like linked in the post via the documentation

           case 'img':
                    $add[$i] = new ImageColumn($supportArray[$i]['column_name']);
                    $add[$i]->setName($this->trans($supportArray[$i]['column_display_name'], [], 'Modules.Activeorders.Columns'));
                    $add[$i]->setOptions([
                        'src_field' => $supportArray[$i]['column_name'],
                    ]);
                    break;

this works and all, because the column created actually links the url from the database(as i said in my original post). all i want to know for example if add a row "image.png" into the db's column which is used by the imagecolumn, where should i put the image.png so the grid finds it. cause i tried using modules/mymodule/views/img/, i tried using @modules/mymodule/views/img, i tried views/img, and i tried many others but none of them worked. 

[pullidea-dev]

Look at the below screenshot. The image path "/img/tmp/product_mini_1_1.jpg" works. Is the path "/modules/MyModule/view/img/img.png" is correct one?

 

Edited October 20, 2021 by raudsepp (see edit history)

[ps8modules.com]

I understand that you want to modify a grid with your module?
This is documentation for modern admin theme and twig templates.

Normally a definition is used in the module and the controller.

    public function __construct()
    {
        $this->context = Context::getContext();
		$this->bootstrap = true;
		$this->id_lang = Configuration::get('PS_LANG_DEFAULT');
		$this->secure_key = Tools::getValue('secure_key');

        $this->context = Context::getContext();
		$this->bootstrap = true;
		$this->id_lang = Configuration::get('PS_LANG_DEFAULT');
		$this->secure_key = Tools::getValue('secure_key');

        parent::__construct();

        $this->table = 'my_table';
        $this->explicitSelect = false;
        $this->allow_export = false;
        $this->deleted = false;
        $this->lang = false;
        $this->identifier = 'id';
        $this->_default_pagination = 100;

        $this->addRowAction('Edit');

        $this->_select = ' a.*, b.image_path';
        $this->_join = ' LEFT JOIN another_table b ON (a.id = b.id)';


        $this->fields_list = [
            'id' => ['title' => $this->l('[ID]'), 'remove_onclick' => true, 'class' => 'fixed-width-xs no-cursor', 'havingFilter' => true, 'filter_key' => 'a!id',],
            'id_image' => ['title' => $this->l('id image'), 'remove_onclick' => true, 'class' => 'fixed-width-xs no-cursor', 'havingFilter' => true, 'filter_key' => 'a!id_image'],
            'image_path' => ['title' => $this->l('image'), 'type' => 'bool', 'float' => true, 'remove_onclick' => true, 'class' => 'no-cursor', 'havingFilter' => false, 'callback' => 'renderImage',],
        ];

    }

    public function renderImage($path)
    {
        if (file_exists($path)){
            return '<img src="'.$path.'">';
        } else {
            return;
        }    
    }

 

[Yelish]

En Prestashop 1.7:

use PrestaShop\PrestaShop\Adapter\Image\ImageRetriever;

use PrestaShop\PrestaShop\Adapter\Product\PriceFormatter;

use PrestaShop\PrestaShop\Core\Product\ProductListingPresenter;

use PrestaShop\PrestaShop\Adapter\Product\ProductColorsRetriever;

    public static function prepareListProducts($products)
    {
        $context=Context::getContext();
        $assembler = new ProductAssembler($context);
        $presenterFactory = new ProductPresenterFactory($context);
        $presentationSettings = $presenterFactory->getPresentationSettings();
        $presenter = new ProductListingPresenter(
            new ImageRetriever(
                $context->link
            ),
            $context->link,
            new PriceFormatter(),
            new ProductColorsRetriever(),
            $context->getTranslator()
        );
        $devueltos = [];
        foreach ($products as $rawProduct) {
            $devueltos[] = $presenter->present(
                $presentationSettings,
                $assembler->assembleProduct($rawProduct),
                $context->language
            );
        }
        return $devueltos;
    }

[ps8modules.com]

You copied it beautifully.
And now give an example in a custom module that uses a custom table in the database and not products.

[Yelish]

Sure, see muy module where not only i make that, i make it by ajax, yeah; admin controller by ajax, not one table, two tables in admin controller by ajax just at same page.

[ps8modules.com]

@krekk, @Yelish wrote clearly that he would not provide code to see where he was making a mistake and how he accessed the database. What are we going to deal with here if we don't know?
May be correct A, may be correct B, may be correct C ......
There will still be speculation.

[krekk]

@WebSoft cause i don't really have any. i was asking how to do something. all i have is a basic grid column without anything in it. You clearly misunderstood me. Let me try to explain it, better. 

Given:

• ImageColumn type that reads from an sql table where i put urls. 
• A folder in my module where i store my images. (ModuleName/views/img)

What i understand how the image column works:

• You specify an sql table, and a column in it where you store your image's url
• Since the imagecolumn puts the exact same thing into the <img> tag's src as u have in the sql where you get ur urls from you either
  • name it exactly as the url in the sql
  • you concat the url+imagename

My question:

How do i build up my url so the imagecolumn displays the image? Theres no bloody reason to share any code cause it works, all i want to know is with what url do i access my images with.

[ps8modules.com]

internal link:

$getImage = 'my-image.jpg';
$getModuleImgPath = _PS_MODULE_DIR_.'ModuleName/views/img/'.$getImage;

 

[Yelish]

You need to pass the urls through a controller and build the template for it. I had to do it for a personal recommendations module.

[ps8modules.com]

You have to give me your sql query to get the pictures.
Writing something in general takes a long time.

Smarty variables are used for TPL templates.

In the module:

$getImages = Db::getInstance()->executeS('SELECT image_name FROM '._DB_PREFIX_.'my_image_table WHERE image_id IN (1,2,3,4)');
$images = array();

foreach ($getImages as $img){
    $images[] = Tools::getHttpHost(true).__PS_BASE_URI__.'modules/ModuleName/views/img/'.$img['image_name'];
}

$this->context->smarty->assign([
	'my_module_images' => $images,		
]);

In TPL:

{if $my_module_images}
  {foreach $my_module_images as $image}
    <img src="{$image}">
  {/foreach}
{/if}

 

Edited October 25, 2021 by WebSoft (see edit history)

[maldarol]

@WebSoft is this method with linking the image in a tpl file works with image column type? I can't really find a good example in the source code.

So if my code is like this:

->add((new ImageColumn('product_img'))
	->setName('Product Image')
	->setOptions([
		'src_field' => 'product_img',
	])
)

Should I insert the image tags through the grid's Query class or it needs a helper class which will generate image tags from the image paths that comes from the db?