yii2 Bild, um eine Beschriftung unter dem Bild zu haben

Question

In yii2 zeige ich Bilder von der daabase und für die gleichen Bilder habe ich Kommentare in der Datenbanktabelle. Ich möchte, dass die Bildbeschreibung unter dem Bild liegt, was ich nicht erreichen kann.

Mein Code.

<div class="margin-top-20"> 
    <h5> <p class="details-edit"> <i class="fa fa-picture-o"></i> GHS Pictograms </p> </h5> 
    <div class="panel panel-default panel-edit"> 
     <div class="panel-body"> 

      <?php 
      $images = ''; 
      $a = ''; 
       // append all images 
      // var_dump($data->getPictogramPath()); exit(); 
      foreach($model->getPictogramPath() as $name)  
       $images =$images.' '.Html::img(\Yii::$app->request->BaseUrl.'/web'.$name->pictogram_filepath,['alt'=>'','width'=>'100','height'=>'100', 'data-toggle'=>'tooltip','data-placement'=>'left','title' => $name->pictogram_comment ,'style'=>'cursor:default;']).Html::label($name->pictogram_comment,['class' => 'pictogram-label']); 
       $a = $a.Html::label($name->pictogram_comment); 

      echo ($images); 
      ?> 

     </div> 
    </div> 

</div>    

Meine Ausgabe ist:

Ich bin nicht in der Lage das Etikett unter dem Bild zu bekommen .. Kann mir jemand sugggest, was das Problem ist hier?

Danke ..

Answer 1

Sie benötigen eine kleine Änderung auf Ihre HTML-Struktur haben. Zunächst einmal müssen jedes Bild und Etikett in Block wickeln, müssen auch eine paar Änderungen in Ihrem css Dateien machen.

Code Sie werden wie folgt aussehen:

$images = ''; 
$a = ''; 

// Append all images   
foreach($model->getPictogramPath() as $name) { 
    $images .= Html::beginTag('div', ['class' => 'img-and-label-wrapper']); 
    $images .= Html::img(\Yii::$app->request->BaseUrl. '/web' . $name->pictogram_filepath, ['alt' => '', 'width' => '100', 'height' => '100', 'data-toggle' => 'tooltip', 'data-placement' => 'left', 'title' => $name->pictogram_comment ,'style'=>'cursor:default;']); 
    $images .= Html::label($name->pictogram_comment,['class' => 'pictogram-label']); 
    $images .= Html::endTag('div'); 
} 

echo $images; 

Hier Stile, die Sie hinzufügen müssen:

.img-and-label-wrapper { 
    display : inline-block; 
} 

.img-and-label-wrapper label{ 
    display: block; 
    text-align: center; 
} 

denke, das wird hilfreich für Sie