Joe Bailey Photography

After creating my Web Design portfolio site and transferring my hosting package I was in the mood to do some web design. I’d been meaning to add a portfolio to my photography site for a long while.

Whilst making the photography portfolio I created some cool code to create a gallery of images which you can read about here.

I used a card style to design the portfolio and includes galleries of the best of my photos grouped into categories. It also includes, events, projects, and portraits, something that has never been seen on my site before.

I then implemented the card style for the blog posts on my homepage.

After creating the great bit of code I used it to alter the galleries on my memories page, which makes it load a bit quicker, and includes WEBP support. As I was feeling quite clever, I added a search function and the option to filter the memories by year.

In my Web Design and Development course, we touched on using web components and live style guides. This is the practice of having a set of components and styles that can be reused across your website. The advantage is that when something gets updated it rolls out across the whole site at the same time. I’m going to be writing a 2,000-word essay on Web Components in January 2019.

Redesigning my Photography Website

I had been toying with the idea of redesigning my site for a while, due to the changes to Flickr accounts. I thought that creating the header and footer and linking to them using PHP across the whole of my website would be a good start. Whilst doing this I finally managed to include a link to my blog on my homepage by using SimplePie and PHP.

I also created my own Instagram widget using Instafeed.js rather than using the SnapWidget plugin like I had been doing. The advantage of using Instafeed is that it links to Instagram directly rather than to a third-party website. I had looked into this before, but couldn’t figure out how to make it work.

During updating the website I combined the media queries into one stylesheet for each page, rather than separate ones. I also included a main CSS file which styles headings, body text, buttons, and the header and footer on all pages, which makes updating things a lot easier. I’m annoyed I didn’t think of it sooner.

I’m trying to tailor the website more towards getting a job, rather than a story of my work, so I’ve renamed the gallery page to memories to tie in with my tagline.

In the future, I’m going to combine the portfolio and projects pages to be a more concise view of my best photos to show off to potential employers.

The About page has been renamed to My Story because I feel it is about the story of me being a photographer, rather than about me right now, and what services I offer.

The mobile version of the site has also had a major redesign using hamburger navigation which should be a bit easier to click on.

Images will now be served in both WebP (Google’s new file format for images) and JPEG to speed up load times on modern browsers.

The site is now served from a CDN. The only downside is that the site has to be served from the www. version.

You might notice that my website uses Flickr to display most of the images. This is done by using an iframe of the Flickr slideshow.

The reason I chose to use Flickr to display my images is that I didn’t have much experience coding at the time (I’m still not a code genius). It was an easy way to display galleries of images in a lightbox. I used the handy Featherlight library for that.

Next year Flickr is changing the number of photos free accounts (that’s me) can have on their site from 1TB of free storage to a mere 1,000 photos. I have taken a lot of photos, and the 1,000 limit just isn’t going to cut it. It’s probably about time I hosted my images anyway.

I’m looking at using PHP to get all images in a directory, and then display that in a slideshow using JavaScript which in turn will be displayed in the Featherlight lightbox.

Updated 16th December 2018

I have now managed to update all the galleries on my website. Featherlight has a slideshow extension which I have used. I used PHP’s Glob feature to list all the photos in a directory, which was helpful as I could put each gallery in a folder and the code would make a gallery out of it.