---
title: Image Picker - Done
slug: image-picker-done
createdAt: 2025-02-10T21:16:10.994Z
---

# HTML

```html
<div class="modal-background">
    <div class="modal-container _48">
        <div class="modal-heading-container">
            <h1 class="modal-h1">Upload or Choose an Image</h1>
        </div>
        <div data-current="Library" data-easing="ease" data-duration-in="300" data-duration-out="100" class="tabs w-tabs">
            <div class="tabs-menu w-tab-menu">
                <a data-w-tab="Upload" class="tab w-inline-block w-tab-link">
                    <div class="tab-icon w-embed">
                      <svg width="32" height="32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">><path d="M19,14a3,3,0,1,0-3-3A3,3,0,0,0,19,14Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,19,10Z"></path><path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4Zm0,22H6V20l5-5,5.59,5.59a2,2,0,0,0,2.82,0L21,19l5,5Zm0-4.83-3.59-3.59a2,2,0,0,0-2.82,0L18,19.17l-5.59-5.59a2,2,0,0,0-2.82,0L6,17.17V6H26Z"></path></svg> 
                    </div>
                    <div class="tab-name">Upload an Image</div>
                </a>
                <a data-w-tab="Library" class="tab w-inline-block w-tab-link w--current">
                    <div class="tab-icon w-embed">
                      <svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M22,26H10a2,2,0,0,1-2-2V8a2,2,0,0,1,2-2H22a2,2,0,0,1,2,2V24A2,2,0,0,1,22,26ZM10,8V24H22V8Z"></path><path d="M4,24H0V22H4V10H0V8H4a2,2,0,0,1,2,2V22A2,2,0,0,1,4,24Z"></path><path d="M32,24H28a2,2,0,0,1-2-2V10a2,2,0,0,1,2-2h4v2H28V22h4Z"></path></svg>
                    </div>
                    <div class="tab-name">Pick from Our Library</div>
                </a>
            </div>
            <div class="tabs-content w-tab-content">
            
            <!-- TABS GO HERE -->
            
            
            </div>
        </div>
        <div class="modal-close-button w-embed">
        <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </div>
    </div>
</div>

<script> 
document.addEventListener("DOMContentLoaded", function () {
  function updateThumbnailGrids(rootElement) {
    const thumbnailGrids = rootElement.querySelectorAll(".thumbnail-grid");
    thumbnailGrids.forEach(grid => {
      const imagePickerItem = grid.querySelector(".image-picker-item");
      if (imagePickerItem) {
        const itemHeight = imagePickerItem.offsetHeight;
        grid.style.minHeight = (itemHeight * 3) + "px";
      } else {
        console.warn("No '.image-picker-item' found in:", grid);
      }
    });
  }

  // Update grids on initially active tabs
  document.querySelectorAll(".w-tab-pane.w--tab-active").forEach(activePane => {
    updateThumbnailGrids(activePane);
  });

  // Add click event listeners to Webflow tab links
  document.querySelectorAll(".w-tab-link").forEach(tabLink => {
    tabLink.addEventListener("click", function () {
      // Increase delay to allow tab content to render
      setTimeout(() => {
        const tabComponent = tabLink.closest(".w-tabs");
        if (tabComponent) {
          const activeTabPane = tabComponent.querySelector(".w-tab-pane.w--tab-active");
          if (activeTabPane) {
            updateThumbnailGrids(activeTabPane);
          }
        }
      }, 150); // Increase delay from 150ms, less than 150ms the js runs to early and nothing happens. 
    });
  });
});
</script>
```

## Notes

I have included some JS that is needed to establish the min-height for the modal based on the dynamic height of the image thumbnails. This can be implemented as a separate JS or just part of your module for image uploader. Because I feel like you would want this just part of this module I have left it in the HTML for this modal.&#x20;