- PHP
- Advanced Custom Fields (ACF Pro)
- JavaScript
- WordPress
- CSS3
As part of the Warhammer Community redesign in 2019, done by Soak Digital for Games Workshop, the comics sections needed to be redone to allow for seasons and better navigation to other comics of the same season.
The main technical points to the task were that the comics still had to be available on separate pages by request of the client, they had to be easily assigned to seasons in the CMS and they had to display the navigation correctly according to the season / comic shown (i.e. disable previous button if first comic in season, drop navigation arrows on slider if they aren’t required, easy dropdown if there are multiple seasons that navigates to the first comic of the selected season).
Most of the heavy lifting for the comic settings – title, season, comic number etc – is handled in the WordPress CMS using ACF. There are multiple custom fields for each post that the user can use to set up the comic. Once it is done, the viewer handles the rest.
The slider element is created using Slick, partnered with a WP_Query that brings in all the relevant comics of the season. The comic itself is uploaded as a custom field for greater control over the Featured Image option built into WordPress.
Using the same query, the first and latest (last) post links can be accessed for that season, which made the CTAs simple to put together with anchor tags. The season dropdown was an interesting challenge that required another query using the Season custom field attached to the posts. If there are no more than one season available, the box doesn’t show and the styling adjusts for the removal.
The comic itself is a clickable element that triggers a Fancybox overlay, offering a more zoomed-in display of the comic.
The viewer is entirely responsive across all sizes and has a built-in switch that can invert the layout of the navigation from LTR to RTL if required.
All comics shown are property of Games Workshop, and the work was done whilst I worked for Soak Digital. Multiple people were involved in the whole project build – the comic viewer was one part of it that was my own sole creation.
Back to Work