Разбор текста csv для создания bootstrap divs?

#javascript #php #jquery #html #twitter-bootstrap-3

#javascript #php #jquery #HTML #twitter-bootstrap-3

Вопрос:

Я создаю галерею изображений Bootstrap 3 с множеством повторяющихся divs, которые выглядят следующим образом:

 <figure class="col-1 picture-item" data-groups='["groupA"]' data-date-created="2018" data-title="imageA">
    <div class="picture-item__inner">
        <div class="aspect aspect--60x60">
          <div class="aspect__inner">
            <img class="myImg" src="imageA.gif" alt="description of image A"/>
		    </div>
        </div>
        <div class="picture-item__details">
          <div class="picture-item__tags" style="display: none;">image A keywords</div>
          <p class="picture-item__title">Image A</p>
        </div>
    </div>
</figure>
	  
<figure class="col-1 picture-item" data-groups='["groupB"]' data-date-created="2019" data-title="imageB">
    <div class="picture-item__inner">
        <div class="aspect aspect--60x60">
          <div class="aspect__inner">
            <img class="myImg" src="imageB.gif" alt="description of image B"/>
          </div>
        </div>
        <div class="picture-item__details">
          <div class="picture-item__tags" style="display: none;">image B keywords</div>
          <p class="picture-item__title">Image B</p>
        </div>
    </div>
</figure>  

Я надеюсь сэкономить немного времени и кодирования, извлекая данные из csv-файла для создания нескольких divs. В постоянно расширяющейся галерее уже более сотни изображений. CSV-данные для приведенного выше будут выглядеть следующим образом:

 Image A,imageA,groupA,2018,description of image A,image A keywords
Image B,imageB,groupB,2018,description of image B,image B keywords  

^ и так далее…

Я надеюсь на некоторую помощь или совет о наилучшем способе достижения сценария, при котором мне просто нужно загрузить изображения с правильным соглашением об именовании и обновить электронную таблицу. У меня ограниченные знания, но я думаю, что PHP может быть способом сделать это?

Я надеюсь, что этот вопрос имеет смысл. Заранее спасибо.

Ответ №1:

Мне удалось заставить это работать с:

 <?php
$fileHandle = fopen("gallery-data.csv", "r");
while (($row = fgetcsv($fileHandle, 0, ",")) !== FALSE) {	
?>
	    <figure class="col-1 picture-item" data-groups='["<?php echo $row[3] ?>", "<?php echo $row[5] ?>"]' data-date-created="<?php echo $row[2] ?>" data-title="<?php echo $row[4] ?>">
      <div class="picture-item__inner">
        <div class="aspect aspect--60x60">
          <div class="aspect__inner">
            <img class="myImg" src="gallery/<?php echo $row[4] . '/' . $row[0] . '.gif" alt="' . $row[6] ?>"/>
		    </div>
        </div>
        <div class="picture-item__details">
          <div class="picture-item__tags" style="display: none;"><?php echo $row[7] ?></div>
          <p class="picture-item__title"><?php echo $row[0] ?></p>
        </div>
      </div>
    </figure>
<?php
}

 fclose($file);
?>  

Ответ №2:

PHP имеет две функции для синтаксического анализа csv:

fgetcsv(файл, длина, разделитель, вложение) И str_getcsv(строка, разделитель, вложение, escape)

пример fgetcsv:

  $file = fopen("contacts.csv","r");

 while(! feof($file))
 {
   print_r(fgetcsv($file));
 }

 fclose($file);
  

http://php.net/manual/en/function.fgetcsv.php

Комментарии:

1. Спасибо за ответ. Из-за моего ограниченного понимания это лишь небольшая часть моей головоломки. Я успешно применяю код для возврата содержимого csv в виде серии массивов, но я понятия не имею, как извлекать элементы каждого массива в мои файлы divs и в цикле повторять файлы divs. Используя мой оригинальный пример, PHP возвращает следующее: Array ( [0] => Image A [1] => imageA [2] => GroupA [3] => 2018 [4] => описание изображения A [5] => ключевые слова изображения A) Array ([0] => Image B [1] => imageB [2] => GroupB [3] => 2018 [4] => описание изображения B [5] => ключевые слова изображения B) и т.д. и т.п.