JSFiddle - React, Tailwind, and code Playground

by BHolm

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Load Handlebars.js from Unpkg. -->
<script src="https://unpkg.com/[email protected]/dist/handlebars.min.js"></script>

<!-- Load jQuery and Sheetrock from Unpkg -->
<script src="https://unpkg.com/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sheetrock.min.js"></script>
<body>
<!-- If .equalsize is removed, items can stretch. 
     Otherwise all items will have an equal width -->

<div id="galfeed" class="gallery equalsize">
    		<script id="gal-template" type="text/x-handlebars-template">    
    <a href="#" class="gallery-item"><img src="https://hauke.swordplaysummit.com/{{cells.src}}"/></a>

        </script>
				
  		</div>
 
    
    <!-- this content only helps prevent individual gallery-items from growing 
         if a row is not fully filled with items. 
         The number of needed fillers is: 
         (maximum possible number of items per wow ) - 1 -->
    <a href="#" class="gallery-item filler"></a>
    <a href="#" class="gallery-item filler"></a>
    <a href="#" class="gallery-item filler"></a>
    <a href="#" class="gallery-item filler"></a>

</div>


 </body>

CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
}

.gallery-item {
  flex-grow: 1;
  flex-basis: 150px;
  max-width: 250px;
  margin: 5px;
}
.gallery .gallery-item.filler{
  display: none;
}
.gallery.equalsize .gallery-item.filler{
  display: initial;
  visibility: hidden;
}

.gallery-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block; /* prevent whitespace adding line-height */
}

JavaScript

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1pCKsxB77m1oj5qa6oCVXQv-Nz3Hwwz7ugrVjSyK2Xkk/edit#gid=0';

// Compile the Handlebars template for 2024 Gallery.
var GalTemplate = Handlebars.compile($("#gal-template").html())

// Load all 2024 photos.
$("#galfeed").sheetrock({
  url: mySpreadsheet,
  query: "select A,B,C,D,E,F where A = '2024'",
  fetchSize: 0,
  rowTemplate: GalTemplate,
})
	
// Helper for upper case
Handlebars.registerHelper('toUpperCase', function(str) {
  return str.toUpperCase();
});