title: Yii2 display multiple images in gridview row
body: <p>I want to display multiple images in a gridviews single row. For example: I have table A, Table B and table C.</p>
  
  <blockquote>
    <p>Table A has my_id.</p>
    
    <p>In Table B my_id is the foreign key. Along with my_id it has c_id.</p>
    
    <p>Table C has c_id which is in reference in Table B.</p>
    
    <p>Table C also has a filepath to display images.</p>
  </blockquote>
  
  <p>in <em>Table A</em> i have <code>my_id</code> as follows:
  1, 2, 3, 4, 5, 6.</p>
  
  <p>In <em>Table B</em> i have <code>my_id</code> as follows.
  1 ,1 ,1 ,2 ,3, 3.</p>
  
  <p>In <em>Table B</em> i also have <code>c_id</code> as follows.
  1, 2, 3, 4, 5, 6.</p>
  
  <p>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.</p>
  
  <p>Now my gridview should display 3 different images for <code>my_id</code> because of the foreign key constraints. but it displays only 1 image.</p>
  
  <p>My code is below:</p>
  
  <p><strong>In my model</strong></p>
  
  <pre><code> public function getPictogramsID()
  {
      $pictogramsID = SdsrefGhsPictograms::find()-&gt;where(['sdsref_id' =&gt; $this-&gt;sdsref_id])-&gt;all();
      foreach ($pictogramsID as $picID){
          return $picID-&gt;pictogram_id;
      }
  }
  
  
  
   public function getPictogramPath()
  {
  
  
       $pictogramsID = GhsPictogram::find()-&gt;where(['pictogram_id' =&gt; $this-&gt;getPictogramsID()])-&gt;all();
      foreach ($pictogramsID as $picID){
          $pic = $picID-&gt;pictogram_filepath;
      }
      return $pic;
  
  }
  
  
  
  public function getPictogramUrl()
  {
  
      //var_dump($this-&gt;getPictogramPath()); exit();
      return \Yii::$app-&gt;request-&gt;BaseUrl.'/web'.$this-&gt;getPictogramPath()  ;
  }
  </code></pre>
  
  <p><strong>my index file grid view image code</strong></p>
  
  <pre><code> [
          'label' =&gt; 'Hazards',  
          'format' =&gt; 'raw',   
          'value' =&gt; function ($data) {
                  return Html::img($data-&gt;getPictogramUrl(), ['alt'=&gt;'myImage','width'=&gt;'20','height'=&gt;'30']); 
              },
          ],   
  </code></pre>
  
  <p>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.</p>
  
  <p>here is my updated gridview code.</p>
  
  <pre><code> [
          'label' =&gt; 'Hazards',  
          'format' =&gt; 'raw',   
          'value' =&gt; function ($data) {
               $images = '';
  
      // append all images
              foreach($data-&gt;getPictogramName() as $name)     
                  foreach ($data-&gt;getPictogramUrl() as $url)                   
                  $images = $images.Html::img($url,['alt'=&gt;'','width'=&gt;'30','height'=&gt;'30', 'data-toggle'=&gt;'tooltip','data-placement'=&gt;'left','title' =&gt; $name ,'style'=&gt;'cursor:default;']);
              return $images;
  
          }
          ],
  </code></pre>