I admit I hardly think of printing web pages. But it’s easy to get limited by your own scope of stuff you do..
One of our most active and prolific Ontario Extend Participants, @NurseKillam aka Laura Killam, has been an eager SPLOT poster child, and her questions last year led me to add a number of new features to some of the calling card themes I made– see how she is sporting the WP-Dimension on as her own card at http://nursekillam.com/.
She recently had a tweeted question about “best” WordPress themes for web-based presentations, so naturally it was a “Do I Have a SPLOT for You!” response
If I transition to SPLOTpoint instead of PowerPoint, can students see everything at once somehow? Print it easily? Is it accessible? It certainly looks awesome. @cogdoghttps://t.co/ya3G6Txqf4
— Laura Killam (she/her/elle) (@NurseKillam) May 5, 2018
I’d never thought much about handouts for students, but it was a reasonable idea. For making a grid like slide tray view I suggested using a plugin that does that via shortcode:
For doing a grid view, I'd suggest using a plugin like https://t.co/Unrag4mmof or https://t.co/NyMoH8BhYd
where you can create a page and insert them via a short code.
Will take a bit more testing to flesh this out.
— Alan Levine (@cogdog) May 5, 2018
But the idea of creating a printable handout of all slides in a SPLOTpoint seemed like a worthy feature to roll into the theme.
With a bit of hacking about, I have now a feature in the theme that will generate an “All Slides in One View Page” by creating a new page-all.php template that used wp_query to cycle through all posts (aka slides).
I just insert the featured image (which is in the header) as an image above the content.
|
1 2 3 4 |
<?php if ( has_post_thumbnail( ) ) { $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( ), 'large' ); ?> <img src="<?php echo esc_url( $thumbnail[0] ); ?>" class="aligncenter"?> <?php } ?> |
I found there was some CSS I could add that would create page breaks when printed (no effect on screen; I added these with markers to indicate where the slides started and ended (inserting a counter in the post loop), at the top is:
|
1 2 3 4 5 |
<!-- page break if we are printing --> <p style="page-break-before: always; text-align:center; font-size:90%; border-top: 1px black dotted; border-bottom: 1px black dotted;"> <em> begin slide <?php echo $slide_count?> </em> </p> |
and the bottom, after the content:
|
1 2 3 4 5 |
<!-- page break if we are printing --> <p style="page-break-after: always; text-align:center; font-size:90%; border-top: 1px black dotted; border-bottom: 1px black dotted;"> <em> end slide <?php echo $slide_count?> </em> </p> |
The main child style sheet has some CSS to suppress header/footer/menu stuff
|
1 2 3 4 5 |
/* Print Styles for all slides pages */ @media print { body { background:white; color:black; margin:0; } .site-branding, .menu-toggle, .slide-menu, .entry-footer-wrapper, footer#colophon {display: none;} } |
Which now I realize might not be needed since I added a custom header template that my page template invokes simply by:
|
1 |
<?php get_header('all'); ?> |
I wanted to reduce the font size / all caps of header styles from the screen display; I went in a few circles trying to do it “correctly” with conditional addition of a page only style sheet, but kept hitting the fail wall, so I lamely added it to the a custom header template used just for this page:
|
1 2 3 4 5 6 7 8 9 |
<style> h1, h2, h3, h4, h5, h6 { font-weight: bold; clear: both; margin: .75em 0; text-transform: none; } h1 { font-size: 1.8em; } h2 { font-size: 1.667em; } h3 { font-size: 1.333em; } h4 { font-size: 1.11em; } h5 { font-size: 1em; } h6 { font-size: .778em; } </style> |
If I figure it out later, I will clean up my mess.
So what does it do?
Well here is a “view all” slides page from the What The SPLOT show. If one is inclined to kill trees, go ahead and print. Or you could easily generate a whopping 7Mb PDF All The Slides What the SPLOT is That?.
I’m not sure yet if that fit’s Laura’s (or anyone else’s) bill, but it was interesting to play around with it.
If this is a feature you cannot live without, it’s available now in the current version of the SPLOTpoint theme. I have a hunch not many folks update the SPLOT themes.
It’s not quite as smooth as butter yet, as the themes are uploaded to a WordPress site as a .zip file. If you try to upload a newer version of the zipped theme, WordPress shakes a finger and says “the theme already exists”!
To replace it, you have to manually ftp/sftp it to your server (I likely lost most of you there). I do include some update instructions in the mile long Readme files. My recommendation to avoid the fear of ftp is to add the Easy Theme and Plugin Upgrades plugin. This allows you to upload a newer version of the zipped theme and replace what is there.
There is one trick to create this new page; I have a function that will generate the page if it does not exist when the theme is activated (or first installed). Once you have updated, just swicth the theme to the parent Intergalctic (or any other theme) then switch the them back to SPLOTpoint– it will generate the new /all url page.
I make it a point on adding features to SPLOTs to never (intentionally) to break old functionality.
This one took a bit more dancing around than I thought but wanted to get it out the shoot.
Now you can send your SPLOTpoints to the print queue.
Featured Image: new hp printer flickr photo by SupportPDX shared under a Creative Commons (BY) license with edited in Screenshot of What The SPLOT is That?
