#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);
Комментарии:
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) и т.д. и т.п.