Exploring CSS Strategies and Efficient Data Management for Image Display

In this meeting among the "State Changers," the discussion was concentrated around optimizing an image display issue in a web application. They discussed implementing a function that better handles the display transition between thumbnail images in a grid and a hero image area. The challenge presented was around the storage and efficient cycling of those images. The images are fetched from the platform Xano and an unspecified amount is visible at a given time, with a function to replace these with new ones as necessary.

David, a participant, suggested using CSS to hide and show the images. However, there's a question around efficiency as the thumbnails and hero images are different sizes. He considered whether they should store the image data in the payload on the user's platform or in the web flow grid. The suggestion presented was to work directly with the payload data, using it as an array of objects to iterate over. Agreeing to David's suggestion, caching the image data separately from their display properties was recommended. Each image (or 'data') would have an associated identification key that can be used to update which image is on display. This way, the technical implementation of shifting images from the thumbnail grid to the hero section becomes much simpler. The meeting concluded with a proposal for improving the user interface by letting users control how quickly they can cycle through the images, enhancing user interaction. Key tools and languages mentioned include: CSS, Xano, user's platform (likely a mobile platform), and an array of objects.

(Source: Office Hours 10/6 Early )

State Change Members Can View The Video Here

View This Video Now

Join State Change Risk-Free