NorfolkDev / norfolkdevelopers-website

https://www.norfolkdevelopers.com
MIT License
10 stars 12 forks source link

Layout jank caused by images loading #76

Open tom-sherman opened 3 years ago

tom-sherman commented 3 years ago

This is especially visible on posts with images.

Next.js' image component can solve this I believe https://nextjs.org/docs/api-reference/next/image

tom-sherman commented 3 years ago

@shaunchurch I think this might require a change to getPosts to attach an aspectRatio property to the hero of a post. We can then use this layout="fill" and object-fit to avoid jank. What do you think?

shaunchurch commented 3 years ago

@tom-sherman Sounds good to me. (Looks like I basically parroted this same thing in the Discord without reading your comment.)

Perhaps we should bring that getPosts stuff under this project instead of using the @static-fns functions I haven't touched in a long while.

tom-sherman commented 3 years ago

@shaunchurch That was a barrier (caused by laziness) for me going to modify the implementation 😅 That library being brought into this repo would reduce the friction for me as an outside contributor

shaunchurch commented 3 years ago

@tom-sherman It's a barrier for me as well!

At the time I had a vision that this project best demonstrates: https://content.nuxtjs.org.

I probably won't work on changing this until the weekend but fully support your or anyone else's efforts and happy to chat about it if useful.