Twas fitting to return these past three days to Thompson Rivers University in Kamloops BC, invited by Brian Lamb to spend some quick time with people and place I was 5 months at in 2014-2015 as an Open Learning Fellow (or Fella).
It’s a Brian story that the idea for SPLOTs (fill in your own acronym) came at either his kitchen table or our brainstorming perch at the Fox ‘n Hounds. I can affirm that alot of development took place at Common Grounds, the student run campus coffee shop.
Regardless, for an invited talk I felt it time to create a new SPLOT, and the idea I had a few weeks ago seemed simple. During the time there, I did some tweaks to the free WordPress Intergalactic theme so we could use it as a web-based presentation tool (why the bleep would you talk about the open web using a proprietary piece of software that does not live on the web?).
A few examples:
- The Open Web
- SPLOTS and Darkweb Plots
- Reflecting on the Agora
- Edupunk, Bauhaus, D.I.O?
- This is Not a Blog
- Cool Web Stuff
It’s really just using the large featured image capability of the theme as the more slide like thing, with the idea that many more notes and resources could be included below the fold. The “trick” to this (yep, blogged), done with no funny code tinkering, using posts as “slides” and adding some custom CSS to redo the bottom “next” / “previous” buttons, plus making use of the Post Types Order plugin to allow alternative sorting of posts.
So I made it a goal to have this done as a new SPLOT in time to use yesterday for the talk I gave at TRU where I promised to make it available later. And thus, here is Splotpoint:
This is not your grandparent’s powerpoint…
The custom CSS to change the footer was not needed as I could change it up in the child theme. I did get carried away by experimentation; first was adding the menu order option normally there for WordPress Pages to the normal post type.
|
1 2 3 4 5 6 |
// add menu order to posts so we can order them up function splotpoint_posts_order() { add_post_type_support( 'post', 'page-attributes' ); } add_action( 'admin_init', 'splotpoint_posts_order' ); |
This puts a box on each post that you can use integers to control the order the “slides” (aka posts, I also used code to change the name of all “Post” references in the dashboard to “Slide”).
The number entered here cpntrols where it sits in the slide deck
It’s not optimal, a drag and drop interface would be better (I will first see if it works with the Post Order plugin, but I like doing this one with zero extra plugins).
Of course adding the box does not do anything functionally. So I hunted around and found some code that changes the navigation “next” / “previous” from figuring this out based on date published to instead use the new slide order attribute:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* set previous / next post links to use menu order h/t https://1fix.io/blog/2014/09/09/get-right-previous_post_link-when-order-posts-by-menu_order/ */ function my_previous_post_where() { global $post, $wpdb; return $wpdb->prepare( "WHERE p.menu_order < %s AND p.post_type = %s AND p.post_status = 'publish'", $post->menu_order, $post->post_type); } add_filter( 'get_previous_post_where', 'my_previous_post_where' ); function my_next_post_where() { global $post, $wpdb; return $wpdb->prepare( "WHERE p.menu_order > %s AND p.post_type = %s AND p.post_status = 'publish'", $post->menu_order, $post->post_type); } add_filter( 'get_next_post_where', 'my_next_post_where' ); function my_previous_post_sort() { return "ORDER BY p.menu_order desc LIMIT 1"; } add_filter( 'get_previous_post_sort', 'my_previous_post_sort' ); function my_next_post_sort() { return "ORDER BY p.menu_order asc LIMIT 1"; } add_filter( 'get_next_post_sort', 'my_next_post_sort' ); |
I would not stop. It makes sense to display the Posts Slides in the dashboard accordingly, so I fiddled with the code that displays posts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* Sort posts in posts view by menu_order in ascending or descending order. */ // h/t http://wordpress.stackexchange.com/questions/66455/how-to-change-order-of-posts-in-admin function custom_post_order($query){ /* Set post types. _builtin => true returns WordPress default post types. _builtin => false returns custom registered post types. */ $post_types = get_post_types(array('_builtin' => true), 'names'); /* The current post type. */ $post_type = $query->get('post_type'); /* Check post types. */ if(in_array($post_type, $post_types)){ /* Post Column: e.g. title */ if($query->get('orderby') == ''){ $query->set('orderby', 'menu_order'); } /* Post Order: ASC / DESC */ if($query->get('order') == ''){ $query->set('order', 'ASC'); } } } if(is_admin()){ add_action('pre_get_posts', 'custom_post_order'); } // organize the admin view; removed date / category, insert slide order columns // h/t http://stackoverflow.com/questions/27602116/how-to-add-order-column-in-page-admin-wordpress add_filter('manage_posts_columns', 'splotpoint_columns'); function splotpoint_columns($columns) { $splotpoint_columns = array(); foreach( $columns as $key => $value) { if ( $key != 'date' and $key != 'categories' ) $splotpoint_columns[$key] = $value; if ( $key== 'title' ) { $splotpoint_columns['order'] = ' Slide Order'; } } return $splotpoint_columns; } |
So now things look like this is a Splotpoint dashboard:
The next bit is more trifling and really a chance for me to learn how to add my own configuration options to the WordPress Customizer. In all the other SPLOTS I have this huge set of options in it’s own arcane interface. Pat Lockley had suggested sometime ago doing this through the customizer.. it just took me way too long to follow Pat’s advice.
The great thing about the customizer is that as you make changes for something that affects the theme display, the changes are previewed in real time. The customizer code takes away all the need to program my own forms, and it comes with nice built in controls for things like file upload interfaces and color pickers.
The first few settings let you customize what will appear on the front page- an image background, and colors for the title and subtitle:
The image background thing got rather tricky, using the built in page background ended up loading on all pages, and bleeding out of boundaries. I added the custom image upload, but then ran into problems getting the fit right to the shape. Then I thought of jQuery Backstretch which smoothly does the trick to make the image background fill the space available.
The next bit of customizing was to let you change the colors on the navigation buttons and adding any degree of corner roundness (because this is CRITICAL for making a good presentation) and also to customize some text to put in the bottom (the default is the name of the site and the tagline):
Making pretty buttons, because buttons
These are hardly significant, and again, was more for me to learn how to wrangle the WordPress Customizer. The third part of this is making a WordPress Page that can serve as the opening launch page, including a link to the first slide. You have to do that all alone, but you can again, use the Customizer to make this static page go on front of the site:
I have drafty set up instructions on the GitHub repo and so far, I am my sole beta tester. Stuff might break or go wonky. Splotty. But it’s the newest blob on http://splot.ca and I have high hopes of adding more before setting up a rack of them in the used record bins at Domains 2017
You can see it in action on the Splotpoint for yesterday’s TRU ramble talk Content with Content?
It feels good to be splotting again. Been too long.
Bonus Features Added (Apr 3, 2017)
You can now use the following shortcodes in Splotpoint:
[slidelist]generates a linked list of slides that can be used on the fron page and in widgets[startbutton]adds a “start” button that launches the show on the first slide.
Featured Image: A shameless and likely semi-illegal remix of the poster for the old Judy Garland / James Mason movie. IT’S ALL PARODY!!!
