"It is clear that he is extremely knowledgeable about Wordpress, PHP, and CSS. Sam was flexible in approach and able to explore various solutions to help me solve some of the complex issues I had."

Matt - Site Owner

Empty Spiral - www.emptyspiral.net

es hero site update image compilation

Summary

On this project, the client was looking to install a new theme since the current one had become outdated. The client came to me looking for assistance during the update and help fixing any potential issues. My main jobs during the site update were fixing the image gallery and adding extra code to edit the look of the theme.

using visual portfolio
Plugin Research

The main feature that had problems during the site update was the Image Gallery. This feature allowed images to be filtered by a category and was prominent feature on 3x pages (Biography, Discography + Videos) . Upon investigation, I found that the gallery feature was an integrated part of the previous theme and relied on custom posts. As a result, when the theme was changed this content became no longer available.

To solve this issue, I went looking for a new plugin that had equivalent features to the previous gallery. After some time looking for and testing different plugins I found one that did the job, the Visual Portfolio plugin. This plugin has most of the features that the previous gallery had but runs as a block inside of the WP Gutenberg editor. This allows the new gallery to be independent of the new theme. Even if the theme is updated or another big changes happens, the new gallery should continue to work.

es gallery xml data
Transferring Data

In order to move the old content to the new plugin, I had to export it. I used the wp export feature to turn the gallery custom posts into XML data. From here I could see all the content (image, titles, page links) for each gallery. Unfortunately, there was no easy way to import the old XML data into the new gallery. So instead, I searched for the relevant data in the export file and  manually recreated the galleries in the new plugin.

es lightbox example
Lightbox Setup

For the ‘Videos’ page I enabled the plugin’s lightbox mode. This created the same effect as the original  ‘Videos’ gallery. Visitors can click on an image to open the lightbox and then play the video inside of it. To achieve this, I had to manually add the embbeded video as the lightbox element for every image in the gallery.

Initially the lightbox did not work correctly as it conflicted with another gallery plugin (used for the site’s main photo pages). To get around this issue, there was an option in the plugin to load a different lightbox. This looked a bit different but it ran fine. I then finished the setup by customising it with some code to help fit the look of the new theme, and also added a translucent background.

es new versus old galleries
Gallery CSS

To finalise the image galleries, I decided to add some custom css to make them look closer to the previous gallery design. My code was mainly used to redesign the category buttons and  hover text. The default design for these was bright blue so it needed some work to make them look part of the theme.

I also used the colour variables from the new theme so that the colours would work with the theme’s light/dark mode. Lastly I  added custom responsive code to the galleries to make the them fit tablet + mobile screens better. I also gave each of the three galleries slightly different layouts to make them all feel unique.

es meta slide
‘Meta Slide’

One of the main issues I came across with the new plugin, was that the categories were always listed in the order they appeared on in the images. This means that the categories appear in a fairly chronologically order. However, this is not very useful UX as it makes it harder to find the right category. To get around this, I created what I call a ‘meta slide’. This is an extra image at the beginning of the gallery which has all the categories. The plugin has a feature that allows you to change the order of the categories inside of a single image. So in the ‘meta slide’ I organised the categories in a more user-friendly order, placing similar categories together. I then hid the slide from view using css.

When the Image gallery is loaded, it reads the categories from the first image. However, because the first image is the ‘meta slide’ it loads them in my custom order. To change the order of any category you can edit it in the ‘meta slide’ and it will update without affecting the functionality of the plugin.

es customizer code
Theme Customizing

To help improve the overall look and feel of the new site theme, I used css to make additional changes. This was mainly to go beyond the default options within the theme customizer. I added my code as custom css within the customizer so that it loads after the new theme. And since it was only small changes I didn’t feel the need to create a child theme.

I made the following changes to the theme:

  • – Removed the default title on pages and added a second one so that the title appeared after the featured image. (This preserves the original page layout from the old theme)
  • – Made  the socials share section line up with content width since it was sticking out.
  • – Removed the social share section on pages that did not require sharing.
es gallery data archive
Archiving Data

After the site update, the client asked me to back-up any other image galleries that had not been recreated. So I archived the data in an excel document. I did this by manually going through the data and looking for the inner XML data within the custom post. This inner XML section had all the important data (image URL, link URL, titles, descriptions etc.). I then imported the inner XML to excel doc to preserve the attribute-value structure.

Animations / Effects

  • -Link hover effects
  • -All other gallery animations (Visual Portfolio)

Resources