mybigadventures.com

I've been working a little more on restyling the image gallery. I decided the square thumbnails were looking a little dated so wanted to move towards something that looked a bit more like the tiled effect you may have seen on sites like flickr and pintrest. I had a look first of all to see if there were any pure CSS solutions but as yet there doesn't seem to be support for floating the images together so that they fit without gaps.

Old Layout

 New Layout

After a little research it seemed that JavaScript was the way forward as it can be used to calulate a suitable arrangment when all the images have loaded (if you're interested, this is the library I'm using though it looks a bit better on their site at the moment - miromannino.github.io/Justified-Gallery/). Right now that means a bit of a delay waiting for all the thumbnails to finish loading before they can be displayed. This can feel a bit slower than images displaying as soon as they have loaded, which is what currently happens when moving between albums. I'm hoping to optimise this further over the course of the next two weeks, but for now I've added a little loading animation to keep you interested whilst you wait for the pictures to load.

Let me know in the comments if you experience any particularly long delays on any of the albums. Thanks. 

Just been fiddling a little more with the CSS to update the responsiveness of the website. Responsiveness is now a bit of a buzz word with websites and refers to its ability to resize dynamically to best fit all screen sizes. Having worked on the mobile site recently, I thought I should giive the desktop version a bit of a tweak. It's still a work in progress but now should make more of the available space on large screens. I've given it a quick test and everything seems to be resizing as it should. The updated blog images now look a little larger and a few more albums fit across the screen on the album page. If the site only just fitted on your screen previously you won't see too much difference, apart from the currently lack of image banner. For now I've reduced it down to a thin grey strip rather than the image slideshow that was in place before. I think I may change it back to an image but need to sort out a better resolution image as the current ones are too small for the now larger website.

Let me know if you experience any problems.

I've just been tweaking the site a little more as I was experiencing a few issues with load speeds on photos. I've made a couple of changes that will hopefully speed things up. To start with I've added a new optimised image size. Essentially when you first visit one of the pages, a bit of code grabs your screen size and saves it into the session. Assuming I've captured your screensize, each time you load a full size image, nested in a blog entry or by clicking album image, the website will decide if it's worth while loading the larger image or if it can show you a reduced resolution. So it basically now means for each album image I store at least 3 copies of it, one full size, one reduced resolution (1000px max dimension) and one higher resolution (2000px max dimensions). If you're viewing album thumbnails for example, the site will serve up the thumbnail images which speeds up download for you. If you're looking at a large image in an album, that will either be the 1000px or 2000px image - depending on your screen resolution.

The image below should resize dynamically depending on your resolution. If you right click it and open image in a new tab, the majority of you should see a 1000px wide image, however, if you're running a resolution higher than 1500px wide you should get the much larger, slower to download 2000px image.

I've also tweaked the image loading on the PHP side of things, I was previously loading images into memory using imagecreatefromjpeg in PHP. It turns out that this was a bit of a hog on memory for the site and also led to a much slower load for end users. It now does a simple redirect if possible to static files, which again should improve things.

Hopefully you'll see a difference when browsing though the site. Let me know in the comments if you experience any load issues.