A while ago I was considering how best to demonstrate the graphics I’ve been developing while learning to code. I thought a particular page could provide a useful snapshot of the work I’d been interested in, the topics, the media; that I could then build up into a portfolio.

Rather than writing a one-off post however, or something that I’d have to edit every 6 months, I wanted a system that I could add to, relatively easily over time. I didn’t want to add huge numbers of links to an md file, or tags to a html page indefinitely. So I wondered instead if there would be a way to populate a page with any graphics in a given folder. Given that most of the graphics in my posts, I’ve saved to a particular ’/blogimages/’ folder anyway.

I started off with a list of everything I already had, and roughly organised it into different groups that might require different techniques to publish.

1. Blog Graphics: I have a few images (.png) made for particular posts already, and if I could link them to posts, it might provide an interesting way to interact with the topics covered. Also, I had a lot of Gifs.

2. Blog Iframes: The same context as above, but iframes of interesting graphics would require a slightly different approach.

3. Twitter posts: I have a few posts with interesting graphics, concise explanations of context, or cool interactions with people working in that field. One of the ways I currently find out about interesting projects, conferences, and R packages is Twitter. So I was keen to incorporate it somehow.

4. Videos: Something I do the least of, but good to show-off where I already have them.

Blog Graphics

I wrote an .Rmd file, ‘Portfolio’ with code that collects the names of each file in a folder, and writes a JSON file list of them. I ended up sorting the graphics into 2 folders, one of the full-size image, one a low-res version for thumbnails. That way, every time I run my code – it updates a JSON list of graphics to include in the website.

I made the gallery post itself as an md file (my website uses Blogdown to convert that into HTML). And I included some javascript, which reads the json file from earlier, and inserts every image inside.

Blog Iframes

I then used the same principle as before with a few minor differences, here to include the list of iframes. Unfortunately, I have to still make the thumbnails manually.

Twitter posts

The twitter posts were interesting. I started with a list of URLS, and since it’s relatively easy to embed them individually I did use a fairly similar appraoch to start off with. However, each tweet took up a lot of unnecessary space, and soon created a long page which was arduous to scroll through. In addition, in order to include tweets I’d then have to add to a long list of URLS. So rather than individually embed them, I thought it’d be easier to look at Twitter options.

Twitter allows you to curate lists using Tweetdeck (as well as their own API), which makes it relatively easy to scroll through my timeline.

This updates an embedded grid which I linked in the gallery md file. This way I can curate the tweets through tweetdeck, and everything else loads up automatically.

Videos

Then lastly, since I do it so infrequently, videos were just indivudally embedded using hugo shortcodes.

Last thoughts

I’m pretty happy with how this turned out. Rather than sorting through all my work I can just add content to a few different folders, and re-run the .rmd.

It still requires I make a low-res version for photos manually, or a screenshot for iframes. And I’ll need to look at Tweetdeck every now and then. But compared to making a portfolio from scratch, I consider this a vast improvement, and something I can add to incrementally over time.

The gallery page is available here.