New Assignment Bank Features Are Like Elvis on the Dashboard

I have but a fuzzy idea what I mean in the title of this post; I was looking for images about polishing / waxing cars and I all I got was pictures of shiny cars until I stumbled onto this one.

Lucky for me and maybe the 8 other people who use it, but in my current project with Creative Commons on developing a Certification I am getting use the DS106 Assignment Bank theme to provide a collection of what we call “Quests”– these are activities people will do as part of their certification process.

Yup, a Quest Bank, still in development, but you are welcome to try some out and <cough> try some.

Trockenfutter / Hundefutter (Dog Food) flickr photo by wuestenigel shared under a Creative Commons (BY) license

Literally I am finding my own dog food always can use some kibble improvement.

I’ve just done a few days of futzing and minor testing, and now there are some new features in the theme. As always, any changes I make should never change the behavior of current installs, so it should not break anyone’s existing site.

As our design time was creating new quests at our last meeting, I was reminded of something rather important that was missing. When you create a new “thing” / “assignment” you get to upload an image as a featured image / thumbnail, but there was no place, besides tacking it on the bottom of the entry field, to include an attribution statement for that image.

Now there is.

The “Extra Information” could be anything an author wants to tack on the end as a kind of footer. It will strip out HTML but any URL will be auto linked when it is displayed.

It shows up at the bottom in an info box on this quest:

As always with displaying URLs, especially those ginormous Wikimedia ones, the extra CSS comes in handy to keep that URL in it’s div:

.alert {
    word-wrap: break-word;
}

I also did some work on the Fancybox Javascript I use to provide previews of submitted things and responses. In most of my work I generate full previews by submitting and rendering in PHP, maybe in a new window, but for both forms in this theme, I have preview rendered right there with jQuery and content from the form fields.

I had to add stuff for the new “extra info” box, including finding a JavaScript function to convert URLs to linked URLs. Getting the info from the rich text editor via jQuery was always funky, and while it got all the formatting, it never properly did paragraphs. So I needed a Javascript version of nl2br, which in PHP, converts line breaks to <br /> tags.

Much better previews (not that anyone was noticing):

Not a real Creative Commons activity, cat content rendered by http://www.catipsum.com/

And another thing I noticed while using this for the UDG Agora project Challenge Bank (biggest one to date- 61 challenges and over 3200 responses) — the places on the forms where I ask for name, email, and twitter, I was making people fill them in every time.

Now the site will remember the info for 2 weeks via a friendly and non-tracking cookie. This was rather easy- when the form is submitted, the cookies are set / updated:

// more cookies
setcookie( "bank106name", $submitterName, strtotime( '+14 days' ), '/' );  /* expire in 14 days */
setcookie( "bank106email", $submitterEmail, strtotime( '+14 days' ),  '/' );  /* expire in 14 days */

The variables come from the form (rinsed and cleansed); the expiration set to 14 days, and the ‘/’ means it applies for the domain (since there are two forms in different URLs that use the same content).

On page load, rather than setting the default of ach variable to an empty string, we use the cookie value (if not cookie, then empty string, ipso facto lorem etc):

// mmm cookies
$submitterName = $_COOKIE["bank106name"];
$submitterEmail = $_COOKIE["bank106email"];

And then thing I spent waaaaaaay too long was futzing with the CSS for the index / archive pages to get the feature image / icons proportionally sized. The first thing I did was change te default thumbnail size from 320×240 to 640×480 (this is set as an option in the theme, so you can use other aspect ratios) but the smaller size was not working because on most screens the images were responsively sized 500+ pixels.

The CSS I had before was not working the best, some of the images were squeezed. It’s tricky because I want them all the same width to match, and small images are problem as well as ones that are portrait orientation (I don’t have a fix for that besides editing the images and adding blank space).

I went up and down some dead end CSS alleys until I landed on a post at CSS-Tricks about scale proportional blocks and the technique lovingly called Uncle Dave’s Ol Padded Box. I think I have used a version of this to make embedded videos size responsively.

I am not going to tell you how many times I poked and prodded in my Chrome inspector, but I finally got the images not pinched or stretched (after I realized a parent div had a minimum height that was messing things up).

This is hardly worth going on and on about, but here is the new look on the archive pages, which I doubt more than 1.5 people will ever see as different. Oh well.

Finally! Properly sized and scale images. The world is safe again!

If you do update an existing site, you will have to go into the Assignment Bank Theme options,and change the thumbnal dimensions to 640 x 480:

This changes the Media settings of the theme. You should then run something like the Regenerate Thumbnails plugin to re-size the thumbnail images of all your media files.

Besides snarking in twitter, that’s what I did today. You?

Getting this done, and update in GitHub, is very dashboard Elvis worthy.

At least in my small universe.

I have been thinking, and looking ahead to a session at Domains17, that this deserves a slot in the SPLOT Hall of Whatever.

Top / Featured Image: Pixabay photo by pixel2013 is in the public domain via CC0