Issue Linking Product Images to Category-Based Collections

Design help Custom code
1

Hi all,

I am working on a project and I am facing an issue with one of its pages.
The only requirement is that, when hovering over the menu item, the image on the left/right should change as it does on the site’s homepage while retaining the design of the current Menu page.

The original menu page was set up differently, as the main collection list was linked to the product category and then the sections within the list were linked to the different collection lists. With this setup, it was not possible to fetch the product image from the CMS as the images are present in the product collection and not the product category collection.

To solve this, I have been working on a copy of the menu page, where the main list is linked to the products, but since there are many products, the page won’t load as it contains too much data and I see a Gateway Time Out issue, so I can’t publish and check the page.

Can anybody please check my site’s read-only link and provide a way out of this situation?

Thanks in advance!

1 Like
2

Hi there,

Gateway timeouts with CMS collections typically occur when dealing with large amounts of data or complex queries. Here are some common solutions to resolve this:

For collection loading issues:

  • Reduce the number of items per page using pagination
  • Optimize your collection list filters
  • Ensure your images are properly optimized
  • Consider using progressive loading techniques

For image hover functionality, check that your interactions are properly configured in the Elements panel and that any conditional visibility settings are correctly set up.

If you’re still experiencing timeout issues, try clearing your browser cache and testing in incognito mode to rule out any local browser issues.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

Hey @bhavyarao,

If you want to access the images from the Produits collection via the Catégories de Produits CMS collection, you can do so as well. Just place another collection list element inside the product category collection item on the page and add it’s source as the Products (Multi-reference) field and inside this newly created collection, you can add the Image element and you should be able to map it from the Products collection.

I shared a similar approach with screenshots in a different thread, you can check it out to visually check what I mean and probably apply it for your site as well.

Hope this helps.

1 Like
4

Thanks for your response @AJ_Dev :slight_smile:
The issue is that I can’t add any more collection lists inside the parent collection list. I see the attached error.

image

To solve this, I even tried Finsweet’s nested collection list for images, but that didn’t work here either.

1 Like
5

Hi all,

I could fix this issue by adding the image inside the existing collection list, but I made its position absolute to keep the design intact. This is done on this new page.

However, I have encountered a new issue here.

Requirements:

  1. I want when the menu-item_wrap is hovered, the images menu_img and horiz-menu_img should change as per the product.
  2. I also want as the image changes, the text blocks inside menu_tag should display the names of the product.
  3. By default, the images menu_img and horiz-menu_img and the menu tag should display the name and the image of the first product in the list.

For that, I have added the code below to make it work. In Console, I see that the hover happens but I don’t see it visually happening on screen.

image
image878×113 6.06 KB

The code is:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
window.addEventListener('load', () => {
  if (window.innerWidth <= 992) return;

  setTimeout(() => {
    const menuImgEl = document.querySelector('[data-display="main-image"].menu_img');
    const horizImgEl = document.querySelector('[data-display="horiz"].horiz-menu_img');
    const text5 = document.querySelector('.menu_tag .text-block-5');
    const text6 = document.querySelector('.menu_tag .text-block-6');
    const text7 = document.querySelector('.menu_tag .text-block-7');
    const items = Array.from(document.querySelectorAll('.menu-item_wrap'));

    if (!menuImgEl || !items.length) {
      console.warn('Menu hover: required elements missing.');
      return;
    }

    const fadeSwapImage = (el, newSrc) => {
      if (!el || !newSrc) return;
      gsap.to(el, {
        opacity: 0,
        duration: 0.3,
        onComplete: () => {
          // force Webflow image to reload fresh
          el.removeAttribute('srcset');
          el.removeAttribute('sizes');
          el.src = newSrc;
          el.loading = 'eager';
          gsap.to(el, { opacity: 1, duration: 0.3 });
        }
      });
    };

    const fadeText = (name) => {
      const blocks = [text5, text6, text7].filter(Boolean);
      gsap.to(blocks, {
        opacity: 0,
        duration: 0.25,
        onComplete: () => {
          blocks.forEach(t => (t.textContent = name || ''));
          gsap.to(blocks, { opacity: 1, duration: 0.25 });
        },
      });
    };

    const first = items[0];
    const firstSrc = first.querySelector('.menu_img')?.src;
    const firstName = first.querySelector('.text-block-5')?.textContent.trim();
    if (firstSrc) {
      menuImgEl.removeAttribute('srcset');
      menuImgEl.removeAttribute('sizes');
      menuImgEl.src = firstSrc;
      if (horizImgEl) {
        horizImgEl.removeAttribute('srcset');
        horizImgEl.removeAttribute('sizes');
        horizImgEl.src = firstSrc;
      }
    }
    fadeText(firstName);

    items.forEach(item => {
      item.addEventListener('mouseenter', () => {
        const src = item.querySelector('.menu_img')?.src;
        const name = item.querySelector('.text-block-5')?.textContent.trim();
        fadeSwapImage(menuImgEl, src);
        if (horizImgEl) fadeSwapImage(horizImgEl, src);
        fadeText(name);
        console.log('hover →', name, src);
      });
    });

    console.log('✅ Menu hover ready with Webflow srcset fix');
  }, 500);
});
</script>

Please help me fix this.
Thanks

1 Like
6

Hey @bhavyarao ,

Are you still facing this issue? I tested your live site and it seems to change the images visually when I hover on each menu item text.

Hope this is resolved.

1 Like
7

Yes @AJ_Dev
I’ve changed the custom code and it works now. Thanks!

1 Like