Kuffner Family Website 3

Well today was a good day for the website project. Got it looking a bit more modern and implemented a feature that was requested by my family "Also, bringing the older/historical family pictures for everyone to see is so lovely, wonder if there would be a way to have them captured digitally on our family site and then folks could print off what they wanted...they are such a treasure. Perhaps we could post a note on the site about 'historical/older pix' so others could upload and then others could scan and print the images they wanted?" So my implementation was to use the same dropzone.js script but modify it to point to another folder so that way there could be individual folders for reading from to display and downloading from.

So that is my implementation. On the banner above the pictures you can toggle between the two folders of pictures. Other than that, I cleaned up the looks of the site so it is a bit more contemporary. 

Features left to still add:

  -Download All Photos Button

  -Get a more material design going on with enhanced animations

  -Add some more color that fits, will reference ^

Overall, good progress was made and I'm really happy with it's progress.

Kuffner Family Website 2

Today I thought it was a good day to make some progress on the website. Where to begin though.... I wanted all the images to dynamically load onto the page when users upload them as I'll have lots of family members uploading photos so that meant busting out the ajax to load the photos to the html document. The photos are relatively high resolution so when I originally scaled them down it still took quite a long time to load them. After speaking with my colleague he recommended using thumbnails. So looking up how to make a thumbnail php script I finally got one working to convert all pictures in one folder on the webserver to a new folder filled with smaller thumbnails. Other than that and some on hover effects with the mouse to scale the image so you have some reactive feedback on navigating the website that's what I got accomplished today. I relearned ajax (one of the coolest parts of web development to me) and got a pseudo functional website. There's still much to handle when there are hundreds of pictures, I can't just have them populating down the page. One idea was to have multiple pages of about 20 photos or so and use ajax to populate those pages by pulling from the image bank, for another time though.

Oh, and spent some time working on the cube project today as well. Going to be posting that soon.

Kuffner Family Website 1

So I was contracted by our family to make a website for uploading the photos taking at the Kuffner family reunion. I wanted to make something that was both desktop friendly and mobile friendly.

Desktop Site

Mobile Site

I know it's not the most aesthetically pleasing website, but it will get the job done for those who don't understand a flashy website... (I have plenty of relatives in their 90s so the simpler the better, and I suppose the simpler the better goes for most websites). I used a cool plugin called dropzone.js which can handle all the file uploading across platforms. Next I wanted to get some custom font scaling for the mobile version so that way the text wasn't super small and my friend Shane showed me how using the @media rule. Over all it was a simple project that was accomplished in one night.

Overall it was a great trip to Montana and I'm so lucky to have such nice relatives =D