Logo not displaying in Wowchemy accomplishments?

Background

Wowchemy (Github) is a no-code website builder that has gained popularity over the years. Users can create one-page websites with components and widgets. It is still undergoing active development, with more features being added each update. The feature that I want to discuss in this blog post was the ability to add company/brand logos to items in the accomplishments widget, like this:

According to this commit message, we may use our own logos in the accomplishments widget, by adding the .svg file to the /assets/media/icons/brands folder. However, when I tried doing that, the logos were only showing up locally, but not when I deployed the site!

After a few days of searching online, attempting to find the bug in my code, and overcoming the thought of “it’s just a minor issue that doesn’t really affect the site’s content and quality, you better spend time on more important things”, my stubbornness eventually led to me figuring out where the issue was, and the creation of this blog post.

The Solution

Before describing the solution, let me explain how Wowchemy builds the site. (Disclaimer: I did not actually go through the entire code base, so this might be inaccurate.) Wowchemy has a sample site, with the /content and /assets and /static folders and template logos and all. To compile the site, it first merges user content with template content, overriding template content with user content if there is a duplicate. For example, the compiled /assets/media/icons folder supposedly contains both the two template icons and the user-created icons in the folder bearing the same name.

Now I can explain the bug:

The logos in the /assets/media/icons/brands folders were not merged!

In other words, the compiled website will only have access to the default brands logo (Coursera, etc.), but not the user-added logos.

To fix this issue, I made use of the following two facts:

• The accomplishment widget is customizable
• The icons in the /assets/media/icons folders are merged correctly

If you are facing the same issue, just follow the step-by-step solution here, and it should be solved ☺️:

1. Move your brand logos from the /assets/media/icons/brands directory to the parent directory /assets/media/icons. Now these logos will be merged correctly, but we still need to instruct the accomplishments widget to look for them here instead of in brands. Remove the brands folder if you like.
2. Create the directory /layouts/partials/blocks.
3. Create a copy of the accomplishments.html file from the Wowchemy repo here and put it in the directory in step 2. Any change to this file will be reflected in the website.
4. Modify line 18: {{- $media_url := printf "media/icons/brands/%s.svg" (replace (lower .organization) " " "_")}} to {{- $media_url := printf "media/icons/%s.svg" (replace (lower .organization) " " "_")}}. This instructs the website compiler to look for the logos in the (now) correct directory /assets/media/icons.

Just like that, you should be all set!

License

Copyright 2016-present George Cushen.

Released under the MIT license.