Closed. This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed last year. Improve this question I am trying to display photo's obtained from a flickr image search API, and the display the images in a grid,

Display photos from Flickr in a responsive grid [closed]

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>

JavaScript
​x
 
<!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>​

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%;
      }
    }

JavaScript
 
* {      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>";
?>

JavaScript
 
 <?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>";?>​

Advertisement

Answer