template-image-viewer.html

	<!-- Insert this into the Single Block -->
      <!--
      SRC - thumbnail url in the google drive export view format
      alt - alt text
      style - heights should all be the same!
      onclick - change the second part to be the link where the full size image is located (same format as before)
        and the third part to be any text you want to display with the image
        otherwise leave it as ''
		copy as many Viewer Columns as needed
      -->
  <div class="viewer-row">
    <div class="viewer-column">
      <img
        src="https://drive.google.com/uc?export=view&id=TBID"
        alt=""
        style="width:256px;height:256px;"
        onclick="fullSizeImage(this, 'https://drive.google.com/uc?export=view&id=FSID', '');"
      >
    </div>
  </div>

  <div class="image-container">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
      <a href="" id="linkToFull" target="_blank">
        <img id="expandedImg" style="width:95%">
      </a>
    <div id="imgtext"></div>
  </div>

<!-- Add this after the </body> tag but before the </html> tag -->

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-T3BE19D769"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-T3BE19D769');
</script>


<script>
function fullSizeImage(imgs, fullSizeLink, descriptiveText) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  var link = document.getElementById("linkToFull");
  expandImg.src = fullSizeLink;
  imgText.innerHTML = descriptiveText;
  link.href = fullSizeLink;
  expandImg.parentElement.parentElement.style.display = "block";
}
</script>