Skiracing.com has partners with many brands, and as such they have an area of their site dedicated to showcasing those brands and some of their products and content, called the Gear Guide. The team wanted this area to be refurbished and improved in several ways. I made changes mostly to the format of the brand-specific pages like the demo pointed to above, but also to the main page directing users to the rest of the Gear Guide (opens new window). That page was simple cosmetic changes, so I'll focus my attention on the brand-specific pages and the improvements I made which went beyond mere cosmetic changes, like specilialized database access etc.

Refurbished Product Listings and Responsive Images

The Product listing area at the top was the first thing. The product images didn't look good since they could be of wildly different dimensions depending on what kind of product is being shown, and the solutions in place weren't accounting for that correctly.

A very good example of a page that had trouble sizing correctly was the accessories category page (opens new window), which has products ranging from very tall and skinny to very wide. The solution in place originally stretched many of the images awkwardly to fit the containing box, and only some things of fairly balanced dimensions looked good. Other options made any images that were smaller than the rest appear tiny on the screen. Any combination of min and max heights/widths didn't handle all contingencies well, and either stretched some pictures or allowed others to be too small in the container.

The final solution I devised was using the very under-appreciated object-fit property with maximizing width and height values to make the image as big as possible while still maintaining its aspect ratio. An elegant solution by a property I hadn't encountered until I was researching this problem.

.article_tease .gear_thumb img {
	object-fit: contain;
	width: 100% !important;
	height: 100% !important;
}

Customized News Listings

Another improvement they wanted was a news listing area specialized to the brand in question, full of articles relating to that specific brand. This was a simple matter of leveraging the tagging system. By simply allowing the team to tag the brand with any existing tags used to refer to it in news articles, and using those tags to query the articles themselves, the problem was solved. After changing the data schema to allow the brand pages to have tags attached to them, I wrote this code to make the query.

$currentPostTags = wp_get_post_tags(get_the_ID());
if (empty($currentPostTags)) {
	$parentPostTitle = $post->post_title;
	$currentPostTagSlugs = array($parentPostTitle, strtolower($parentPostTitle));
}
else {
	$currentPostTagSlugs = array_column($currentPostTags, 'slug');
}

$newsQuery = new WP_Query( array( 'post_type' => array('stories', 'gear-guide-news', 'premium'), 'tag_slug__in' => $currentPostTagSlugs, 'posts_per_page' => 5 ) );
$newsPosts = $newsQuery->posts;

// output to page

I included the fallback of using the current post title (the name of the brand) so that the team wouldn't have to add tags to all of the brands to get this area to populate. Since most of the tags referring to a brand are either the lowercase or capitalized version of the brand name anyway, this was a reasonable default to include.

Recent Social Media Panes

This problem is discussed in somewhat more detail in this devops portfolio entry, but the short version is that the social media panes were decaying and slow. I devised a solution that didn't add such a huge amount of overhead to requesting social content, by only requesting the content on a fixed schedule, and then storing it in json files on the server. This made it so the page loads were much faster, since decoding and using json data is much faster than waiting for a javascript plugin to make an api call.

Decoding and using the data in the templates themselves was a simple matter after setting up the data requests:

$instagramName = $customFields['instagram_name'][0];
$twitterName = $customFields['twitter_name'][0];

$instagramString = file_get_contents(get_template_directory() . '/social/brandGrams.json');
$twitterString = file_get_contents(get_template_directory() . '/social/brandTweets.json');

$brandGrams = json_decode($instagramString, true)[$instagramName];

$brandTweetInfo = json_decode($twitterString, true)[$twitterName];
$brandTweets = $brandTweetInfo['tweets'];
$brandTwitterUser = $brandTweetInfo['user'];

// use in templates

The Gear Guide looks much better now, and despite still having a large amount of pictures to load, is much faster than it was before.