Web Components using PHP

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.

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.

Flickr changes to free accounts

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.

New Blog

I’ve finally started phase 3 of the redesign of my website. Phase one was to create it, learning lots of code along the way to prepare me for my University course, and also to give me the creative freedom that I hadn’t yet been able to achieve with various website builders. During phase 2 I added a massive back catalogue of all of my images to the gallery page of my site and redesigned it to incorporate CSS Grid, a newly introduced technology making it much easier to layout the whole website. Phase 3 was everything tricky. I decided to leave that until last. I wanted to create a blog for my website using WordPress, as I like the platform for creating posts, and I decided it would be a good opportunity to learn how to create a theme and learn some of the basics of PHP. This I have now done! There’s a couple of jobs left such as creating my own Instagram widget for the homepage and creating a service worker to provide notifications for new blog posts. I’m still undecided on whether I want to open a store again though.

Welcome

Hello everyone,

Welcome to my new website. Sorry for the delay, it’s been a year in the making and there’s still much to do, like implement a store and add my backlog of images to the gallery. If you encounter any problems whilst browsing, please don’t hesitate to contact me, and I’ll see what I can do.