Flickr Image Grid

d349dd3e7ffa46628a3668aae40d830a

25 images from Flickr are shown on a 5 by 5 grid. 25 Flickr images are retrieved using the Flickr-RSS Service found on degraeve.com, then sliced into 5 piece chunks using a Collection Slicer. Each of the 5 piece chunks are rendered in a row using an Item Lister.

Parts List

• 5 × Collection Slicer

  1. slicer1 (see snippet below)
  2. slicer2 (see snippet below)
  3. slicer3 (see snippet below)
  4. slicer4 (see snippet below)
  5. slicer5 (see snippet below)

• 5 × Item Lister

  1. row1 (see snippet below)
  2. row2 (see snippet below)
  3. row3 (see snippet below)
  4. row4 (see snippet below)
  5. row5 (see snippet below)

• 1 × RSS Retriever

  1. risd_images (see snippet below)

Parts Configuration

To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.

• risd_images

  <div is_proxy="true"
       script="http://js.constructibl.es/specs/YahooPipesRssTunnel.js"
       id="risd_images"
       spec="9AE5F78771774127B5DDBD225501EDC7">
   <a href="http://www.degraeve.com/flickr-rss/rss.php?tags=brasilia+architecture&tagmode=all&sort=interestingness-desc&num=25"
      rel="rpc">
   </a>
  
  </div>

• row1

  <div properties="does_link_blank_anchors:true,
                   does_link_blank_images:true"
       script="http://js.constructibl.es/specs/ItemLister2.js"
       id="row1"
       spec="35C031891DEC476AA2C121BFF031D6A8">
   <ul class="row">
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
   </ul>
  
  </div>

• row2

  <div properties="does_link_blank_anchors:true,
                   does_link_blank_images:true"
       script="http://js.constructibl.es/specs/ItemLister2.js"
       id="row2"
       spec="35C031891DEC476AA2C121BFF031D6A8">
   <ul class="row">
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
   </ul>
  
  </div>

• row3

  <div properties="does_link_blank_anchors:true,
                   does_link_blank_images:true"
       script="http://js.constructibl.es/specs/ItemLister2.js"
       id="row3"
       spec="35C031891DEC476AA2C121BFF031D6A8">
   <ul class="row">
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
   </ul>
  
  </div>

• row4

  <div properties="does_link_blank_anchors:true,
                   does_link_blank_images:true"
       script="http://js.constructibl.es/specs/ItemLister2.js"
       id="row4"
       spec="35C031891DEC476AA2C121BFF031D6A8">
   <ul class="row">
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
   </ul>
  
  </div>

• row5

  <div properties="does_link_blank_anchors:true,
                   does_link_blank_images:true"
       script="http://js.constructibl.es/specs/ItemLister2.js"
       id="row5"
       spec="35C031891DEC476AA2C121BFF031D6A8">
   <ul class="row">
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
    <li class="column grid_2">
     <a>
      <img/>
     </a>
  
    </li>
  
   </ul>
  
  </div>

• slicer1

  <div properties="slices_by:5"
       script="http://js.constructibl.es/specs/CollectionSlicer.js"
       id="slicer1"
       spec="26de4000901eb884c98fb67954a60704">
  </div>

• slicer2

  <div properties="slices_by:5"
       script="http://js.constructibl.es/specs/CollectionSlicer.js"
       id="slicer2"
       spec="26de4000901eb884c98fb67954a60704">
  </div>

• slicer3

  <div properties="slices_by:5"
       script="http://js.constructibl.es/specs/CollectionSlicer.js"
       id="slicer3"
       spec="26de4000901eb884c98fb67954a60704">
  </div>

• slicer4

  <div properties="slices_by:5"
       script="http://js.constructibl.es/specs/CollectionSlicer.js"
       id="slicer4"
       spec="26de4000901eb884c98fb67954a60704">
  </div>

• slicer5

  <div properties="slices_by:5"
       script="http://js.constructibl.es/specs/CollectionSlicer.js"
       id="slicer5"
       spec="26de4000901eb884c98fb67954a60704">
  </div>

Technical Specifications

Inputs

__power__

Outputs

No outputs are specified.