So I’ve been building a simple 3 page website in html css and vanilla JS for a family member as a way to teach myself web development after working through the FCC curriculum a while back . Its a nice, meaningful project that’s allowed me to learn necessary skills and replaces a currently used wordpress sight. The project is currently built with Parcel 2 using a few npm packages and deployed to netlify. I’ve also integrated into netlify’s forms api.
I’d like to add some sort of templating or static site generation to the gallery page and link this to a cms with some image processing code => image returns [thumbnail, mobile scaled image, large desktop image] so the gallery can be automatically rebuilt from a the media folder contents when new images/deletions occur.
Basically just some sort of foreach to insert something like below into that gallery.html
I’m looking for recommendations on how I might best approach this. Most of the site is already built static so I do not need to build all the pages, just to supplement the gallery. No formatting or anything needed, just the html generation.
I haven’t used any templating or static sight generation yet and there seem to be a ton of options out there. What technologies have you had luck with or like for this sort of use case?
E.g. my blog has over 200 articles, this is why I use Zola, because it’s written in Rust, so very fast. Gatsby needed ~5 minutes to create a build, Zola needs under 1 second.
But my use case doesn’t seem to be your use case. so I think you should elaborate on your use case a little bit more.
What is currently the biggest pain in your process?
Does it have to be scalable, e.g. daily posts from now on?
Are you willing to learn something new, e.g. a new language or framework?
My use case does not need to scale to constant posts or support any blogging features. I’m interested mostly in adding user agency to adding and removing photos from the portfolio gallery. There are no user interactivity features beyond a contact form so something like gatsby’s 5 min build time is acceptable in this case.
I’ve been exploring some sort of templating or static site generation because adding a client portal for image updates had been on my feature wishlist. I initially built the gallery by manually coding all my image references and the same for image processing. I’d like to not repeat that for every image needing to be added and removed.
Specifics I’d like to support are:
a user backend to upload and delete pictures from directories.
to limit served data, either some sort of backend function to transform images for thumbs, mobile, and desktop sizes or something like netlify’s large media image transforms? There example being/images/apples.jpg?nf_resize=fit&w=300&h=400. Either would be fine with me as long as images are not cropped.
Here is the current build with v1 of the portfolio gallery. From a visual standpoint it is fine. https://dev-pub–happy-albattani-62afb4.netlify.app I found that I’d made a mistake in my markup using <div>s instead of <a>s wrapping my img elements and working on that update has gotten me thinking about the next steps.
Since the goal for this project has been to develop foundation skills, I’d prefer to stick to JS and node backend rather than incorporating another language. I am open to adding more framework as long as I don’t end up with too much feature creep.