Yii2 display multiple images in gridview row

Question

I want to display multiple images in a gridviews single row. For example: I have table A, Table B and table C.

Table A has my_id.

In Table B my_id is the foreign key. Along with my_id it has c_id.

Table C has c_id which is in reference in Table B.

Table C also has a filepath to display images.

in Table A i have my_id as follows: 1, 2, 3, 4, 5, 6.

In Table B i have my_id as follows. 1 ,1 ,1 ,2 ,3, 3.

In Table B i also have c_id as follows. 1, 2, 3, 4, 5, 6.

In table C my c_id's are: 1, 2, 3, 4, 5, 6. and these id's have filepath associated with each of them. They are different images.

Now my gridview should display 3 different images for my_id because of the foreign key constraints. but it displays only 1 image.

My code is below:

In my model

 public function getPictogramsID()
{
    $pictogramsID = SdsrefGhsPictograms::find()->where(['sdsref_id' => $this->sdsref_id])->all();
    foreach ($pictogramsID as $picID){
        return $picID->pictogram_id;
    }
}



 public function getPictogramPath()
{


     $pictogramsID = GhsPictogram::find()->where(['pictogram_id' => $this->getPictogramsID()])->all();
    foreach ($pictogramsID as $picID){
        $pic = $picID->pictogram_filepath;
    }
    return $pic;

}



public function getPictogramUrl()
{

    //var_dump($this->getPictogramPath()); exit();
    return \Yii::$app->request->BaseUrl.'/web'.$this->getPictogramPath()  ;
}

my index file grid view image code

 [
        'label' => 'Hazards',  
        'format' => 'raw',   
        'value' => function ($data) {
                return Html::img($data->getPictogramUrl(), ['alt'=>'myImage','width'=>'20','height'=>'30']); 
            },
        ],   

I am also trying to add a bootstrap tool tip to this.. tool tip is displaying successfully but I think the looping is not not done in a correct way so it is repeating my images.

here is my updated gridview code.

 [
        'label' => 'Hazards',  
        'format' => 'raw',   
        'value' => function ($data) {
             $images = '';

    // append all images
            foreach($data->getPictogramName() as $name)     
                foreach ($data->getPictogramUrl() as $url)                   
                $images = $images.Html::img($url,['alt'=>'','width'=>'30','height'=>'30', 'data-toggle'=>'tooltip','data-placement'=>'left','title' => $name ,'style'=>'cursor:default;']);
            return $images;

        }
        ],

Answer 1

You have few logical errors in model and grid view. In all these areas you are dealing with one item instead of three.

In your model

 public function getPictogramsID()
 {   
    $ids = [];
    $pictogramsID = SdsrefGhsPictograms::find()->where(['sdsref_id' => $this->sdsref_id])->all();
    foreach ($pictogramsID as $picID){
       $ids[] =  $picID->pictogram_id;
    }

    return $ids;// returning all three ids
 }



 public function getPictogramPath()
 {

    $pic = [];
    $pictogramsID = GhsPictogram::find()->where(['pictogram_id' => $this->getPictogramsID()])->all();
    foreach ($pictogramsID as $picID){
        $pic[] = $picID->pictogram_filepath;
    }
    return $pic;

}



public function getPictogramUrl()
{
  $url = [];
  foreach($this->getPictogramPath() as $path):
       $url[] = \Yii::$app->request->BaseUrl.'/web'.$path; 
  endforeach;
  return $url; // returning al urls
}

Now in you view loop over all urls and append images with each url

[
    'label' => 'Hazards',  
    'format' => 'raw',   
    'value' => function ($data) {

        $images = '';
        // append all images
        foreach($data->getPictogramUrl() as $url):
            $images = $images.Html::img($url, ['alt'=>'myImage','width'=>'20','height'=>'30']);
        endforach; 
        return $images;
    },
],