Website Updates: Portfolio and Memories – Joe Bailey Photography

Posted on

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.

Read More...

Don’t forget your future self – Dan Benham

Posted on

I attended a talk by Dan Benham, set up by the university, which I found really interesting. He works for Studio Republic in Winchester.

He was tired of working for corporate clients and started an ethical business to combat this. His business helps charities and other ethical entities with their creative tasks.

An interesting question was raised about whether agency work will die out. He responded that it’s always good to try and have a product to sell as well as a service. This gave me the idea about turning my bit of code for my gallery into something many people can use.

Read More...

Blossom Tree Photography

Posted on

I created a website for my girlfriend as she does photography too. I’m really impressed with the site, even though it is made with WordPress. Hopefully, her future employers and universities will like it too. You can view the site here.

I need to make a No Thumbnails Gallery WordPress plugin as at the moment I am using CSS to hide all the images but the first one to create the galleries you see. This really slows down the website.

–Updated 5th October 2019–

I had wanted to develop a custom theme for Chelsea’s website for a long while. The theme I was using was bloated, slowed the site down, and didn’t fit her style of photography.

I designed a template in Figma, making a style guide first, noting down the fonts, Satisfy, Montserrat, and Roboto, and the colours, Pink, and some shades fo grey. Doing a mockup of the site proved really beneficial because I made many different versions and could show them to my colleagues easily, which would have been a nightmare if I had just started developing. I even went with a mobile-first approach.

I knew that the portfolio had to be the most prominent feature on the website as that was the biggest shortfall of the previous theme. I used some JavaScript to only change the images and text on the homepage so that portfolios are all hosted on the same page. They are also shareable as they use query strings. On mobile, only 6 portfolio images can be seen but the lightbox allows you to view all 20 images.

I made a few changes to the design when I was making the website such as making the background a light shade of pink. This helped differentiate the elements on the page.

I also designed a new logo which is a lot more intricate than the initial rudimentary one.

Read More...

Web Components using PHP – Joe Bailey Photography

Posted on

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.

Read More...

Wix Vs WordPress

Posted on

Now I’ve come across two instances of Wix in the past couple of months. Neither website was optimised for mobile. Wix has the option there, but it’s incredibly hard to use, you can change one thing and it will delete half the content on your site. The drag and drop editor is extremely slow, it’s like trying to load Photoshop in a browser, it’s just extremely bad practice and results in poorly optimized sites. However, the quality of their television adverts seem to drive people to their site. The use of celebrities make their customers believe that they are creating something modern.

As an alternative, I’d suggest WordPress. It’s also hard to wrap your head around and customize, especially with the new Gutenberg update. Its ease of use is satisfactory if you’re an ordinary person, but can be somewhat frustrating if you’re a web designer. WordPress runs 30% of websites, according to this article by VentureBeat, and there are over 55,000 plugins available. There’s not much you can’t do with the platform. Oh, and it’s mobile-friendly too.

Read More...

Flickr changes to free accounts – Joe Bailey Photography

Posted on

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.

Read More...