Like atrophied brain muscles, tonight I was itching to do some code tinkering, so I added a new feature to the DS106 Assignment Bank Theme.
It’s hardly anything the world was clamoring for (I am not sure if the world clamors to me anyhow). And I got to practice doing my git-ness right by making a feature branch to test this out.
Recently Jess Reingold asked via twitter
https://twitter.com/jessreingold/status/723168963882934272
https://twitter.com/jessreingold/status/723169159794712576
(She later reported the faculty member she was working with “figured it out” though now that I look at it, the question may be different from, what I heard, so sorry Jess, I added a feature you did not ask for).
An “assignment” or a “thing” in one of these banks has a number of pieces of information- one is an image to use as a thumbnail to represent it in archives, and on a single entry view, and also a URL of an example that demonstrates the “assignment” / “thing”.
Here is an example from the UDG Agora Challenge Bank for a media challenge we did in December
The thumbnail in the top left is what is used when the challenge appears elsewhere on the site.
What I thought Jess was asking for was to have an option to use the YouTube embedded video example (or any other WordPress embeddable media- vimeo, SoundCloud, a tweet, flickr) used as an icon in a list of challenges.
This is what we have in the original DS106 Assignment Bank – if you look at the Video Assignments, any of them that have a video as an example, we embed that as the icon rather than a thumbnail image.
It wasn’t too complex to do; in my themes I use code lifted from (now 5 years old) Aliso the Geek’s post on the WordPress Settings API, so adding a new Theme option is as easy as adding this bit of code:
$this->settings['media_icon'] = array( 'section' => 'general', 'title' => __( 'Embed Media For Icon' ), 'desc' => __( 'Embed example (if embeddable) as icon on index and archive views' ), 'type' => 'radio', 'std' => '0', 'choices' => array( '0' => 'No', '1' => 'Yes' ) );
]
This gives me in my options page:
As a strategy, when I add a new feature, my method is to make it’s default as if it was turned off, so older sites will not be affected.
I’m not going to detail much of the code, as it was just an addition of some logic for a function I use to get an Assignment/Thing’s icon; I have variable with indicates if its being done on an archive view, and if seem we seek the embed code for the example URL. If the example is not something we can embed with oEmbed function, we revert to using its thumbnail.
After mucking around on a total test site, working my way through my own stupid typo errors, I get it working. To test it out, I try it on the UDG Agora site. Here is the “before” view (with the feature off), in the Media Challenges:
The Hyperlapse Challenge on the right, has its thumbnail image as an icon. If you look at the challenge, it’s example URL is a YouTube Video.
When I turn “on” the media icon feature, now the YouTube video is used as the icon on the archive view:
You might have noticed the icon for the challenge in the left, Artrópodos, changed as well. With the setting off, that one is using the default thumbnail image, because the person who posted it did not upload one; but their example is from flickr, which can be embedded.
Like I said, I do not even think this is what Jess was asking for, but was a feature I could add with a bit of dabbling (and it got me thinking more about the code).
I’ll be working on more updates for the Assignment Bank Theme this month, in preparation for a second round of the UDG Agora project in June. If you have ideas, suggestions for the Assignment Bank theme, the best place in the world to tell me is as a GitHub Issue.
There is a bug in the tabbed interface of the Theme options I need to fix; it does not break the code, but it makes the dashboard messy. It is actually a result of a change in jQuery that I have to now find a way around.
There you go, I spent my evening working on a feature no one asked for!
Top / Featured Image: I consider myself playing the part of a “real” programmer, so doing a little bit of coding tonight gave rise to a need for a Lego Programmer, easily found in Google Image Search (licensed for reuse settings, you do use that, correct)?
This little Office Space worthy dude is a flickr photo by wiredforlego https://flickr.com/photos/wiredforsound23/6948090750 shared under a Creative Commons (BY-SA) license
