I am trying to display photo’s obtained from a flickr image search API, and the display the images in a grid, so that they all fill the screen.
I have tried many different CSS layouts, such as this:
https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe
and this https://www.youtube.com/watch?v=wmeJMOxyD-w&list=LL&index=2&ab_channel=Programster
However, the images always appear in a single file column.
How could I edit the below code, so that the images are displayed in a grid?
<!DOCTYPE html >
<html lang="en">
<head>
<title>MVP</title>
</head>
<body>
<?php
//FLICKR IMPLEMENTATION
$tag = "southampton";
$url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=499ff1d1566f49b580c2a5e9289f9e9d&tags='.$tag.'&sort=interestingness-desc&format=json&nojsoncallback=1';
$data = json_decode(file_get_contents($url));
$photos = $data->photos->photo;
foreach ($photos as $photo){
$url = 'http://farm'.$photo->farm.'.staticflickr.com/'.$photo->server.'/'.$photo->id.'_'.$photo->secret.'.jpg';
echo '<div class = "grid-boxes">';
echo '<div class ="grid-box"><img src="'.$url.'"/></div></div>'; }}
?>
</body>
</html>
Advertisement
Answer
Add the following styles first
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
Here is the the modified Code for you
<?php
//FLICKR IMPLEMENTATION
$tag = "southampton";
$url = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=499ff1d1566f49b580c2a5e9289f9e9d&tags='.$tag.'&sort=interestingness-desc&format=json&nojsoncallback=1';
$data = json_decode(file_get_contents($url));
$photos = $data->photos->photo;
$count = 1;
echo '<div class="row">';
foreach ($photos as $photo){
$url = 'http://farm'.$photo->farm.'.staticflickr.com/'.$photo->server.'/'.$photo->id.'_'.$photo->secret.'.jpg';
if($count % 4 == 1){
echo '<div class="column">';
}
echo '<img src="'.$url.' style="width:100%"/>';
if($count % 4 == 0){
echo "</div>";
}
$count++;
}
echo "</div>";
?>