Optimizing Image Display and Rotation in Web Development through CSS, JavaScript and APIs

In this meeting, the State Changers focused on solving technical issues related to a webpage built with tools like Webflow, Xano, and Uploadcare. The main issue being tackled was an image gallery that wasn't behaving as intended. Here's a summary of the key points:

1. Image Display and CSS: The rotating gallery had some images that were extending beyond the intended bounds. The CSS had been figured out, but some images weren't displaying correctly. Upon inspecting, it was suggested that the setting 'object fit to contain' may need to be changed to 'object fit to fill' to avoid the image shrinking. 2. Adjusting Image Size: There was a discussion about modifying the image sizes through APIs to fit into the designated div section on the web page. However, distorted images were a concern if both height and width were adjusted. To correct this, it was suggested to set the object to fill or contain in the image tag itself using style tags. 3. Implementing Functions for Carousel-Like Feature: The group developed a function to rotate images obtained from the API payloads. A forward and back button was then discussed in order for users to manually control the flow of images. The consumption of memory on users’ devices was a concern, but it was determined that the API payloads are not substantial enough to cause issues. 4. Connection and Performance: Performance difficulties might arise not from the size of the data being pulled from Xano or API payloads, but from intermittent connection issues. Also, larger images may consume more resources, but services like Uploadcare can help optimize those. 5. Fetching Images and Pagination: The meeting identified the need for another API call when approaching the end of their image series to keep the gallery loop going. The loading of the new payload onto the old one for revisiting those images was also discussed. Various other tools such as Javascript, Typescript, React, Firebase, Google, OAuth, and others from the keywords list mentioned were not directly discussed in this transcript. It appears that meeting predominantly revolved around front-end image manipulation and efficient ways to handle image data dynamics on their web page. Anyone interested in CSS image handling, image data management and dealing with API payloads, especially in the context of a rotating gallery on a web page, could find this meeting useful. However, there is a learning curve involved considering that the discussed topics require a certain level of technical understanding.

(Source: Office Hours 10/10 )

State Change Members Can View The Video Here

View This Video Now

Join State Change Risk-Free