townlyy

On 8/29/2023 at 5:18 PM, jpeter said:

@townlyy Here's updated JS that will also account for clickthrough urls being set on the image loosely based on the article you found:
 

(function () {
  // The amount of time in milleseconds to intialize the code. 
  // This allows other code to run before our code is initialized.
  const DELAY = 500;

  /*********************************************************************
   * DO NOT ALTER CODE BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING
   *********************************************************************/

  // Initialize after the page has been loaded
  if (document.readyState === 'complete') {
    setTimeout(init, DELAY)
  } else {
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(init, DELAY);
    }, false);
  }

  async function init() {
    try {
      const ids = await getItemsIds();

      document.querySelectorAll('#thumbnails .thumb, #slideshow .slide').forEach(thumb => {
        const img = thumb.querySelector('img');
        const id = thumb.getAttribute('data-slide-id');

        // Create and set title of thumbnail
        if (img) {
          thumb.setAttribute('data-thumb-title', img.alt);
        }

        // Create and set clickthrough url attribute
        if (ids[id]) {
          thumb.setAttribute('data-clickthrough-url', ids[id])
        }
      });

      // Add click event that sends opens up browser in a new tab
      document.addEventListener('click', evt => {
        const thumb = evt.target.closest('.thumb, .slide');
        if (thumb && thumb.getAttribute('data-clickthrough-url')) {
          window.open(thumb.getAttribute('data-clickthrough-url'));
        }
      });

    } catch (error) {
      console.log('Error', error);
    }
  }

  /**
   * Creates on object mapping of slide id's and their associated clickthrough urls.
   * @returns object 
   * @example 
   *  {
   *    '45s329gdds0322343fs': 'https:/www.example.com',
   *  }
   */
  async function getItemsIds() {
    const url = new URL(window.location.href);
    url.searchParams.set('format', 'json');
    try {
      const res = await fetch(url.toString());
      let { items } = await res.json();
      items = items || [];
      const ids = items.reduce((obj, item) => {
        if (!obj[item.id]) {
          obj[item.id] = item.clickthroughUrl
        }
        return obj;
      }, {});
      return ids;
    } catch (err) {
      throw new Error(err);
    }
  }
})();

 

You are a wizard! Thanks @jpeter!

30 minutes ago, jpeter said:

I think how you added it is fine.  Unfortunately, it looks like the Wells template doesn't do anything with the click through URL for Galleries. 

Thanks jpeter. Yea I was just reading how it's not set up for that. I did find this page with some code that did allow the 1st image click-through link to work when I tried it. Not sure if that's a dead end though.

Hello!

I have a 7.0 Wells template site and I need help getting the gallery image click-through URL links to work. Ideally, when someone clicks on an image in the gallery it simply opens a new tab using the click-through URL link within each image. 

Site: https://lily-bat-7al9.squarespace.com/
Password: hover

FYI, jpeter was kind enough to help me with the custom Gallery Hover Titles code. Here's a link to that thread... in case that code impacts anything with the click-through links. 

I've found other conversations about the click through URLs but haven't had any luck using the code I've come across

Appreciate any help!

So I added it to the Page / Advanced / Page Header Code Injection and it looks great. If there's a better place to add the code, let me know otherwise it working perfectly on my end. Really appreciate the help! 

Would you happen to know how to have the clickthrough link work when you click on a gallery thumbnail? Ideally, when you click on an image it would open in a new tab and go to an external Spotify URL. I added the Spotify URLs to the images...Image Settings / Options / Click Through URL but that's as far as I've got. Thanks!

Wow, thanks so much. I'll give this a try on my end. Where do you recommend pasting the code? 

It is still under the trial period so I'm not sure what plan that would be. I can certainly sign up for a business plan though if that's what it takes. 

Hello!

I have a 7.0 Wells template site and I would like for the gallery to show image titles when hovering

Site: https://lily-bat-7al9.squarespace.com/
Password: hover

I've found other conversations about this but haven't had any luck using the code I've come across

Appreciate any help!