Decorating the diploma walls was a real headache

Ibuiltmyown.education was always envisioned as being a website that was one big explorable degree certificate for my MTA portfolio.

To this end, all the diplomas I have earned as part of building my MTA curriculum would also be featured in a prominently visual way on the website.

When I started building ibuiltmyown.education, I hit on the idea of including a page that was a diploma wall.

A diploma wall that would display all my diplomas as if they were framed and hanging on an actual wall, such as you see in the offices of academics and highly qualified individual.

As I further mapped out the site, I realised that just having one diploma wall page to display all my diplomas would be too overwhelming.

Both for the user and for the browser that would have to load the page!

Therefore, I decided to have a diploma wall for each concentration and to only feature the diplomas earned for each respective concentration.

I had already assigned a unique colour identity to each of the concentrations and their sub-pages to further differentiate each concentration’s group of pages.

This meant that I now had ten diploma walls each with their uniquely coloured wallpaper background.

From an aesthetically pleasing design perspective, the different colour schemes were further justification for why having 10 diplomas walls was so much better than just having one.

Creating each of the diploma wall pages with their respective coloured backgrounds was very straight forward.

But next I had to figure out how I was going to feature each of my diplomas on the walls.

Hanging my diplomas on the wall

At first, it sounds simple.

I just upload each of my diploma files and feature them in a grid pattern on each of the diploma walls.

But I had to feature my diplomas in a way that was easily accessible for the user and responsively pleasing across different device screen orientations.

I had two choices for accomplishing this…

Add each diploma as an individual image component of the page’s wireframe.
Add all the diplomas into a backend gallery and use a WordPress plugin to present that gallery on the wall (with the plugin only being one element of the page’s wireframe).

Adding each diploma as an individual image component of the page’s wireframe was incredibly time consuming and came with various responsive issues.

The individual component option looked great on a smartphone orientation but very quickly encountered scaling issues on larger screened devices.

The main issue was that I couldn’t feature the diplomas on the page’s wireframe in a way that was streamlined and uniform across devices.

So, I gave up on doing it that way and crossed my fingers that I could make the second way work.

This is one of the biggest hurdles with web design – translating an idea in your head into a workable outcome in the internet browser.

It really boils down to how much time you’re willing to invest and your level of technical competence.

If you can code and style a website from the backend up, you can do anything with your website.

But confident backend coder I am not.

So I had to rely on my skills as a creative WordPress theme manipulator… which means finding a WordPress plugin that did what I wanted it to do.

I played around with a few different plugins until I found one called FooGallery which I’m still using now.

FooGallery is the perfect plugin.

I am able to place all my diplomas in a beautifully streamlined manner on the diploma walls.

The plugin is perfectly responsive and aesthetically pleasing across device screen orientations.

It has a wonderful hover function that reveals the title and caption of each diploma (as the size of the diploma images do not always make this apparent).

Cliicking on a diploma image opens FooGallery’s lightbox in which the user can scan through all the diplomas in a slideshow fashion, if they so choose.

Best of all, I was able to achieve my diploma wall goals by only using the FooGallery’s free features, so I haven’t broken my bank account by using it.

Framing the diplomas for hanging

Uploading the diplomas was the most time-consuming aspect because I couldn’t just upload the original files I had been issued by the online course platforms.

Why?

Because they were pdf files and you can’t upload pdf files into an image gallery, they need to be mpeg files.

That meant converting each pdf file into an mpeg file.

Adobe Acrobat does have a feature for converting pdfs into mpegs andyou have to use the paid version of Acrobat to access it (or the 7-day free trial, as I did).

But I immediately encountered two problems with converting the diploma pdfs into mpegs…

I found the Coursera diplomas to be of a diminished quality after conversion, i.e. the mpegs were missing some of the patterned background details of the original diplomas in the pdfs.
I couldn’t convert the FutureLearn diplomas because their pdfs had been password protected by FutureLearn.

So, this meant that I had to screenshot the pdf diplomas.

Each and every one… all 500 of them!

I also had to crop each individual screenshot to remove the non-diploma screen elements of the image.

The FutureLearn diplomas were even more demanding because they are presented on two separate A4 pages within the pdf.

I wanted to feature both parts of the FutureLearn diplomas which meant after I had screenshotted each A4 sheet and cropped them, I had to stitch the two A4 sheets back together as one mpeg image.

Then I had to upload all the mpeg files, while ensuring that I kept them all organised and segregated into their correct diploma wall gallery.

Finally, I had to label the name and caption on each mpeg to ensure the diplomas’ identifying information would show up when the user selected a diploma image on the frontend diploma wall.

Later on, it also occurred to me that I should really add in a clickable verification link on the frontend images’ caption area.

All my diplomas (aside from the LinkedIn Learning ones) have a verification page on the issuing platform’s website that shows I actually did complete the course for which I have a diploma (and not just create a fake diploma).

I’m annoyed it didn’t occur to me to add these links when I first captioned all the diploma mpegs because I’m still gradually adding those links in at the time of writing this!

This has been a very long process.

I’m still adding new diplomas to each wall

The bulk of building the diploma walls I did back in Lockdown 1 of 2020 when I had nothing but time on my furloughed hands.

But I have continued to add newly awarded diplomas in small bulks since then.

At least now I have a workable system I can follow.

The only really annoying thing now is that whenever I had a new set of diplomas to their respective walls, I have to manually update my diploma figures elsewhere on the site.

And they are dotted about all over the site!

But, regardless of how much of a headache it has been, I’m just glad to finally have my diplomas displayed as part of my MTA Portfolio in the streamlined and visually pleasing way I initially envisioned.

Check out my diploma walls…

Diploma Wall for Global Citizenship