php - Display photos from Flickr in a responsive grid

Question

(Closed). This question needs to be more focused. It is not currently accepting answers. question from:https://stackoverflow.com/questions/66048532/display-photos-from-flickr-in-a-responsive-grid

Answer 1

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