Assignment Bank: with Media Uploads!

cc licensed ( BY ) flickr photo shared by epSos .de

I’ve been sleeping on my development work to finish out a WordPress theme that gives someone the functionality of the ds106 Assignment Bank but for any kind of content. But I’m back in the game (track the prototype at http://bank.ds106.us/ the content is meaningless).

I’m building out a back end theme options page where site creators should be able to configure their own site. I wanted to have an ability for each kind of “Thing” (assignment in ds106 language) to upload an image to use as an icon. I’d done it as entering a URL in a field (clumsy) and via a button to spawn a file upload box (old school). What I want is the ability to use the native WordPress media uploader.

I finally found the right how to in a post by Mile Jolly though he did leave off how to code the form part– I leveraged some from the tutorial he cited and looking under the hood at other wordpress themes that have this capability.

There’s a lot WordPress gives you built in now the missing link is writing your own custom jQuery to communucate the modal boxes choice back to your form.

So now it is working; here it is doing it in a place where you can designate a default icon for a “thing” if none is provided. So you start with the Assignment Bank Theme Options panel:

I have made a few changes to the thumbnail, media sizing (see below), but to select a new default thumbnail, there’s a big button, which opens the WordPress Media uploader; like any other media in the system, you can select one that is already in the library, or drag and drop a new file (any size)

Notice the customized title and button label, I did that! Just plop a new image in there, and let it upload

And if selected, the preview is changed when the modal box goes away:

Snazzy. Now I found a few examples of doing this, but usually it was for one uploader per page; when I get around to the editing part that allows you to add new “things” or edit them, they will each need a media uploader.

I’m using code for the theme options based on the excellent tutorial by Aliso the Geek. It has a nice framework for the options screen, that is generated, so I can set up a media uploader anywhere by a block that looks like:

$this->settings['def_thumb'] = array(
	'title'   => __( 'Set default ' . lcfirst(THINGNAME) . ' thumbnail image' ),
	'desc'    => __( 'This image will be used if none is defined.' ),
	'std'     => 'Default ' . lcfirst(THINGNAME) . ' Thumbnail',
	'type'    => 'medialoader',
	'section' => 'general'
);

These are all placeholders added to the options page (‘section’) defines the tab of the screen. The generalized code for mediauploader (I type I wrote myself, it was not in the original)

This will look like mumbo jumbo but its her for my own record keeping.

case 'medialoader':


	echo '';
	
	if ( strpos ( $options[$id], 'http') !==false ) {
		echo '';
	} else {
		echo '';
	}

	echo '

         

        
		
';
	
	if ( $desc != '' )
		echo '
' . $desc . '';

	break;

THUMBW and THUMBH is a defined value for the theme’s media setting for thumbnail size. The value of this option is a URL for the uploaded image’s thumbnail isze is stored in $options[$id]. If there is no URL there, I use the nifty placehold.it to generate an image in the right size, e.g.

The actual value we are saving is stored in a hidden form field; and the button launches the wordpress media uploaded, and passes it some values via the data-____________ options — one one is the key for this option $id so I know when form element to modify later.

To make the media uploader work we need a few more things; for the options class I wrote, we need to ask wordpress to load our custom javascript library as well as the ones WordPress needs:

// enqueue scripts for media uploader
add_action( 'admin_enqueue_scripts', 'ds106bank_enqueue_options_scripts' );

This calls a function in my functions.php, which loads the javascript WordPress needs, along with my own custom js library just for the theme options:

/************* OPTIONS STUFF *****************/	

function ds106bank_enqueue_options_scripts() {
	// wordpress js needed
	wp_enqueue_media();

	// custom jquery for the options admin screen
	wp_register_script( 'bank106_options_js' , get_stylesheet_directory_uri() . '/js/jquery.options.js', array( 'jquery' ), '1.0', TRUE );
	wp_enqueue_script( 'bank106_options_js' );

}

The library I used is based on Mike Jolly’s with a few additions to work here. It is pretty well commented (I hope)

/* ds106 Bank: Javascript code for theme options editing

   code by Alan Levine @cogdog http://cogdog.info
   
   media uploader scripts somewhat lifted some from
   http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
   
*/


// holder for media uploader
var file_frame;

// called for via click of upload button in theme options
jQuery(document).on('click', '.upload_image_button', function(){ 

	// not sure what this does!
	event.preventDefault();

	// If the media frame already exists, reopen it.
	if ( file_frame ) {
	  file_frame.open();
	  return;
	}

	// Create the media frame
	// use title and label passed from data-items in form button
	
	file_frame = wp.media.frames.file_frame = wp.media({
	  title: jQuery( this ).data( 'uploader_title' ),
	  button: {
		text: jQuery( this ).data( 'uploader_button_text' ),
	  },
	  multiple: false  // Set to true to allow multiple files to be selected
	});

	// fetch the id for this option so we can use it, comes from data-options_id value 
	// in form button
	
	options_id = jQuery( this ).data( 'options_id' );

	// set up call back from image selection from media uploader
	file_frame.on( 'select', function() {
	
	  // attachment object from upload
	  attachment = file_frame.state().get('selection').first().toJSON();
  
	  // insert the thumbnail url into the hidden field for the option value
	  jQuery("#"+options_id).val(attachment.sizes.thumbnail.url);  	
  
  	  // update the src of the preview image so you can see it
	  jQuery('img#previewimage_'+options_id).attr( 'src', attachment.sizes.thumbnail.url ); 
  
	});

	// Finally, open the modal
	file_frame.open();
});

If an upload s selected, the javascript gets the attachment, parses it to JSON, which then lets me access its properties to return to my form. It does two things- it changes the hidden form value that has the URL for the thumbnail, and also changes the src value of the img tag that displays it, so the new thumbnail appears when the modal box is closed.

I’m having to rethink some of the things I had planned for options, originally there was going to be a custom media size for the thumbnail as it appears n the main indexes and archives, and another for the size it uses in the page. But I found the media uploader does not return the URLs for these custom sizes, and the media was getting messy with the multiple sizes.

So I am switching tot to use the build in thumbnail sized image when it appears on the front index and archives, and the built in medium size when it appears on a single page– these are changed in the options box I set, so you are not limited to 150×150 thumbnails, and 300px wide default medium sized.

There is some trickery with the media; if an image for a “thing” is uploaded to the site, we can control the size of the thumbnail, but others are created by the auto embed of flickr and YouTube. The auto embed of flickr is a PITa because you only get 320×240 images. I did a bunch of CSS flopping this morning, to get something that makes them a bit more uniform. I got a big post by the Smashing Magazine code for vertical and horizontal centering.

I’m still playing with this, but am pretty close to abetter layout, here on a view of all the things in the test site

I have a minimum height for each, using the Smashing Magazine centering the media, and some border tricks (curved border same color as background). Right now this is all done by editing the theme’s custom CSS… I may see if I can turn the theme options on to manage some of these changes.

There are more things to do:

Set up Feed WordPress integration – I have an idea that could use a aggregator right in the site or use an external site aggregator– this si what fills in the responses to a “thing”
Set up TGM Plugin Activator This is very slick, it can define required or suggested plugins, and make it easier to have them installed
Add the form for manually adding an example
Add the options co configure, create the types of things
Possibly add embed code to be able to embed an assignment
A few more things I am forgetting (there is a list)

I’m not even going to promise a date, but I am in the zone right now!