Get image file IDs from GoHighLevel Media Storage list view and display them in a sexy, smooth, cross-browser FsLightbox

1-head-tracking-code.html

<style id="fslightbox-customizations">
a.open-gallery > img {
width: 80%;
max-width: 745px;
border: 3px dashed white;
}
.fslightbox-container {
background: black;
}
</style>

2-body-tracking-code.html

<script src="https://cdn.jsdelivr.net/npm/fslightbox/index.min.js"></script>

3-get-media-storage-img-file-ids-via-browser-console.js

(function() {
  const rows = document.querySelectorAll('.files .ghl-table-container tbody tr.n-data-table-tr');
  const files = [];

  rows.forEach(row => {
    const fileNameElement = row.querySelector('[data-col-key="name"]');
    const fileIdElement = row.querySelector('[data-col-key="media"] img');
    
    const fileName = fileNameElement ? fileNameElement.textContent : '';
    const fileId = fileIdElement ? fileIdElement.src.split('/').pop().split('.')[0] : '';

    const isImage = /\.(jpeg|jpg|png|bmp|gif)$/i.test(fileName);

    if (fileId && fileName && isImage) {
      files.push({ fileName, fileId });
    }
  });

  files.sort((a, b) => a.fileName.localeCompare(b.fileName, undefined, { numeric: true, sensitivity: 'base' }));

  const sortedFileIds = files.map(file => file.fileId);

  const textToCopy = JSON.stringify(sortedFileIds, null, 2);

  // Log the result to console
  console.log(textToCopy);

  // Create a temporary textarea element
  const textArea = document.createElement('textarea');
  textArea.value = textToCopy;
  document.body.appendChild(textArea);
  
  // Select the text and copy it to the clipboard
  textArea.select();
  try {
    document.execCommand('copy');
    console.log(`${sortedFileIds.length} File IDs copied to clipboard out of ${rows.length} total rows.`);
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
  
  // Remove the temporary textarea element
  document.body.removeChild(textArea);
})();

4-custom-code-block.html

<div id="gallery-container" style="margin: 0 auto; text-align: center;"></div>

<script>
  // Function to find the locationId within the JSON object
  function findLocationId(obj) {
    if (obj && typeof obj === 'object') {
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (key === 'locationId' && typeof obj[key] === 'string') {
            return obj[key];
          } else {
            const result = findLocationId(obj[key]);
            if (result) return result;
          }
        }
      }
    }
    return null;
  }

  // Function to build gallery HTML
  function buildGalleryHtml(locationId) {
    const fileIds = [
  "paste",
  "your",
  "copied",
  "IDs",
  "here"
];

    let galleryHtml = fileIds.map((fileId, index) => {
      // Use CDN link instead of direct link.
      // const imgUrl = `https://storage.googleapis.com/msgsndr/${locationId}/media/${fileId}.jpeg`;
	    const imgUrl = `https://assets.cdn.filesafe.space/${locationId}/media/${fileId}.jpeg`;
      if (index === 0) {
        return `<a data-fslightbox="gallery1" class="open-gallery" title="Click to view all photos" href="${imgUrl}"><img src="${imgUrl}" /></a>`;
      } else {
        return `<a data-fslightbox="gallery1" href="${imgUrl}"></a>`;
      }
    }).join('');

    const galleryContainer = document.getElementById('gallery-container');
    if (galleryContainer) {
      galleryContainer.innerHTML = galleryHtml;
    } else {
      console.error('Gallery container not found');
    }
    
	// Wait until fsLightboxInstances is defined
      const interval = setInterval(() => {
        if (window.fsLightboxInstances && window.fsLightboxInstances["gallery1"]) {
          window.fsLightboxInstances["gallery1"].props.showThumbsOnMount = true;
          window.fsLightboxInstances["gallery1"].props.exitFullscreenOnClose = true;
          refreshFsLightbox();
          clearInterval(interval);
        }
      }, 100);
    }

  document.addEventListener('DOMContentLoaded', () => {
    const locationId = findLocationId(window.__NUXT__);
    if (locationId) {
      buildGalleryHtml(locationId);
    } else {
      console.error('locationId not found in the __NUXT__ data');
    }
  });
</script>