Microformats2, WordPress and Featured Images Classes by Michael Bishop(Miklb's Mindless Ramblings)
In my exhuberance to post an image along with articles syndicaed from my site to Twitter, I hastily started adding the microformats2 class u-photo. I didn’t know better. It was brought to my attention that u-photo is meant for actual photo posts, where the image is the primary content. An experime...

Hopefully adding the u-featured class to my featured images, using code from Microformats2, WordPress and Featured Images Classes – Miklb’s Mindless Ramblings.

I just updated my blog to the latest version of WordPress.

All seemed fine until I had a look at the site. Some of my menus had went a little weird.

Quite a few of the titles had changed to ellipses! I went into the dashboard and changed them back, my changes didn’t stick. I presumed that it must have been the upgrade. I had no idea where to start so shot off a quick tweet for help.

After dinner I calmed down a little and though about the changes to my blog I’d made recently for mico blogging. One of those was to give posts without a title titles on wp_insert_post_data. It uses ellipse! This was meant for posts arriving from the micro.blog app. They would get titles set when they arrived on my blog, to prevent ugliness in he dashboard.


function modify_post_title($data)
{
    if ($data[ 'post_title' ] == ''  ) {
        //wp_filter_nohtml_kses strips html and then I replace   
        $title = str_replace( " " , " " , substr( wp_filter_nohtml_kses( $data[ 'post_content' ] ) , 0, 60 ) ) . "..." ;
        $data['post_title'] =  $title ;
    }
    return $data; // Returns the modified data.
} 

so I’ve changed the if to:
if ($data[ 'post_title' ] == '' && $data[ 'post_type' ] == 'post' )

Which seems to have solved the problem and taught me a lesson.

I signed up for the kickstarter of micro.blog, it went live earlier this week.

Micro.blog is a new social network for independent microblogs.
Start a microblog today. Easy to publish, own your content, great cross-posting.

Micro.blog

The service is very new and so far has changed and developed every day.

The idea is, you publish short posts, these are mirrored on micro.blog/yourusername via RSS. The posts can be from any RSS feed. You can get a micro.blog hosted blog at yourusername.micro.blog or use your own hosting.

The micro.blog iOS app will post to your micro.blog blog or your own WordPress blog. Or you can use your own system. There is a microblog bot that will post your posts on to Twitter too.

The difference between the hosted blog and your micro.blog/username stream is a mite confusing at the moment. I wonder if a different domain name might have helped.

Both the hosted blog and the twitter bot are paid for options. The docs make it clear that you can host your own and point to IFTTT as an alternative to the bot.

The system follows the indieweb principle of controlling your own content and sending it on to other spaces.

Replies on micro.blog to your posts are sent as webmentions to your own blog and show up as comments if you have the webmention plugin installed. I had that already to get twitter replies as comments.

My setup

I’ve added a new category here, micro. I’ve edited the blog to not have posts with this category show on the home page, they show on micro instead.

I set the micro.blog app to create posts with the status format in the micro category.

I turned off the jetpack social posting to Twitter function. I’ll manually post normal posts. I’ve set up a micro.blog bot to post to Twitter.

The service is very much a work in progress, and I’ve not really read the docs but I’ve noticed a few interesting things.

titleless

On is that the posts on micro.blog consist of descriptions with no titles. When you post form the app, you get a post on your blog without a title. A post with a title on your blog is posted as a link to micro.blog. With a post without out a title the description becomes the content of the micro.blog post.

That means you get lots of posts listed in your dashboard as ‘no title’. Since I didn’t like this I tried to auto add titles to posts without titles with a little Google-fu and some WordPress coding.

This worked out fine, except the posts on micro.blog consist of a title and a link, the tweet posted by the twitter bot is the same.

I am now looking to create a custom RSS feed without title. More googling ahead.

Alternatively I could use the code from Tweaks for micro.blog that adds dates as titles, micro.blog ignore these.

Or just learn to live with ‘no title’ posts in the dashboard.

Me on Micro.blog

Preparing for the microblog is a lot more coherent than this post if you are looking for setup advice.

I’ll post the code I’ve mentioned above at some point, it is pretty simple stuff.

This is hopefully a useful tip for organising pupil created content on WordPress blogs like Glow Blogs.

Most of the content posed to blogs consists of posts or pages. Posts join the stream, pages are static generally accessed from menus.

This is another way to organise content that can be useful. Especially if several pupils are posting similar content at the same time. It helps organise that content and the early posters don’t get pushed away down the stream.

An Example Banton Birds

At school we are trying to pay attention to the local birdlife. We took part in the BIG BBC Bird watch with local Bird watchers, Mr & Mrs Carter. We started feeding the birds and trying to get some photos.

The pupils are doing a bit of research on the birds we saw (not too many it was a windy hour) and I hope they will continue over time adding other birds seen in the playground and around.

I want to organise these bits of research automatically collecting them together. To do this the pupils create, not posts or pages but a custom post type, project.

How it is done

This is just one way to do this but it is, at least on Glow Blogs, the most straightforward. It uses the JetPack Custom Content Types module and the unfortunately 1 named Portfolio Projects.

These projects are like pages in that they are out of the flow but like posts have Project Types (like categories) and Project Tags (like tags) that can be used to organise them. The also have a shortcode that can be used to create an index of the projects by type or tag2.

  1. Activate the Jetpack plugin.
  2. In Jetpack Settings Activate Custom Content Types.
  3. In Settings-> Writing Enable Portfolio Projects for this site
  4. Pupils create Projects for each item, add a project type (in this case Birds).

To create an index of these projects I add a page Banton Birds and add a shortcode to the page:

[portfolio include_type=birds display_types=false]

To make the index more visual the pupils make sure they have added a featured image to their posts. That automatically creates a thumbnail.

I’ve used this technique several times on blogs myself, including the Projects page on this blog. I’ve used it too to provide and organise photos and links on the Biggies blog for the pupils.

1. For Glow Blogs where we have a lot of pupil e-portfolios through a custom plugin.

2. You could do the same with pages using the hierarchy and the Display Posts Shortcode plugin, but not as easily.

A little blue sky thinking, or borrowing some ideas from @davewiner & @mrkrndvs

I wonder if a WordPress plugin could ape pngWriter and create images for twitter cards with the text from the excerpt on the image used by twitter.
Like this, but with less fireworks.

I’ve been thinking about twitter again.

I think I’d have preferred twitter to be just text rather than being expanded to include all the media and ‘twitter cards’. I’d rather the reading flow would be twitter for short stuff and link to more visual or longer material out on your blog. That would perhaps make reading a little deeper and avoid the problem of folk just seeing the main point of an article and reacting to that 1.

But that cat left the bag a while ago. Now when I look at my twitter stream it is full of images. I occasionally use OneShot to grab and crop out interesting bits of text to share and surmount the 140 char limitation too.

I am not sure if this is a great idea

Recently I’ve watched Dave Winer experimenting with pngWriter (see the about page: About pngWriter). This creates images of blocks of text and sends them out in a tweet. It also creates an RSS feed of the text (pngWriter is not open for use at the moment).

This reminded me of how Aaron uses featured images in his blog: Creative Commons Starts with Making – A Reflection on Creating and Sharing – Read Write Respond

So I am kicking round a couple of ideas.

  1. If you used pngWriter you could pull the rss into your blog. You could do it in WordPress with the FeedWordPress plugin.
  2. A plugin could be made that would do the same sort of thing in WordPress, take the except text from a post and make an image for twitter from that.

Here is how I imagine that working

  1. Using an html5 canvas to automatically create an image of the post’s excerpt.
  2. Auto upload that to WordPress media library.
  3. Make it the featured image of the post

Alternatively (better?) make it the content of the twitter:image metatag for the post, that means that the featured image on the post would not have the text, visitors could read the post.

Or make a copy of the posts featured image, add the text and make that the twitter card image (I can imagine that might be different to get the text readable.).

For a couple of minutes I imagined that my babysteps php & JavaScript could put something like this together. Then reality kicked in. So I though I’d post it out here maybe someone else would think it would be a good idea.

Veering off into territories where I am out of my depth a bit of fun in the last days of the holiday.

I’ve been playing with the new WordPress REST API using ideas from API Nirvana – Functional Details, then I remembered CogDog’s WordPress search javascript bookmarklet.

Multi WP Blog search allows you to search across a few blogs.

I doubt if this is actually a practical way to do things but it hints of ways of joining different blogs, small parts loosely joined?

It’s also example of doing something that only I would want to do and yet having that thing echo into eternity without any additional effort.

from: API Nirvana – The Content – Bionic Teaching

Tom Woodward writing about his love of APIs, one of a series of posts. I love the idea of playing with things that do something that only I would want to do.

If you have a slightly geeky interest in technology & edu tech Bionic Teaching is a great blog to read.

I’ve a long term casual interest in playing with APIs, and love trying out some of the stuff Tom blogs about. In a timely fashion wordPress 4.7 came out today, including:

WordPress 4.7 comes with REST API endpoints for posts, comments, terms, users, meta, and settings.

from: WordPress 4.7 “Vaughan”.

This is the same API that Tom blogged about (I guess he was using a plugin). The opening up of WordPress sites via an API that an amateur like myself can use it welcome. Over the past few years several sites with interesting APIs move to make them harder to access with out a deeper knowledge than I have (twitter, instagram…).

I had a quick play with the WordPress api making a page that lists recent posts on 3 of my blogs, including this one. 1

wp-json-render

I guess this sort of thing is a minority interest, but I find it enjoyable and although I am never going to be a programmer, helpful in getting a better understanding of how technology can work.

Featured image on this post, one of my own turned up in a search for echo. test1-echo.tif | Using Image Bending in Audacity – CogDogBlo… | John Johnston | Flickr

 

  1. I added the Better REST API Featured Images WordPress Plugin to et the images following a hint on Tom’s post.

Posting to WordPresss is pretty simple on the go. Recent versions of WordPress have a fairly good performance on Mobile Safari. the WordPress app performs a little better the body field is less ‘jumpy’ and uploading photos a little simpler.

There are a few other blogging apps but I’ve not stuck with any.

I tend to write posts in drafts as there is even less chrome and more space to type. It also has some clever shortcuts, helps with markdown and can do cleaver stuff with text and scripts.

A while back I noticed that the new version of Workflow had actions for posting to WordPress. I made some quick tests sand it seemed to do the trick.

Today I started thinking about it again. Workflow allows you to make posts, pages and media. When I tried uploading media I was disappointed that uploading an image returns the url to the attachment webpage rather than the attachment itself.

I’ve tried to extract the url form the page but the best I have is to extract all of the urls on the page and present this as a list to choose from. This is copied to the clipboard.

image upload

So I have an workflow that is an action extension. This allow me to pick a photo then run the workflow. It is presented as a document picker in other apps, for example pixelmator. When this workflow runs it resizes the image and uploads it to my blog. It then grabs the attachment page and pulls a list of links out of that. I can pick a link to copy to the clipboard.

Making a post

The next workflow I have is one for making a post. This runs from drafts.
It first set a variable to the draft. Then it shows the photo library. When a phot is picked it uploads the photo to the blog. As in the first script it downloads the attachment page, extracts the urls and let’s me pick one. This time the one picked is put in another variable.

The workflow then get the first variable, and posts it to the blog as a draft. It asks for a title and used the url to the uploaded image as the posts featured image.

It also asks for tags when it runs.

The featured image for this post is a couple of screenshots taken on my phone. They were stitched together with workflow and the result edited a bit in snapseed.

Image by anika ready to sew public domain

Since I changed themes here I’ve been using featured images a lot more on posts. 1

There are a couple of things that bother me about WordPress featured images, the fact they do not show up in an RSS feed and that any attribution needs to go in the body of the post.

This morning I read Transforming Photo Attribution from Credit to Stories on Alan’s blog, which mentioned these problems while discussion a much more important one.

I though I’d see if it was easy enough to find a fix and headed to google.

First I found a few plugins but also some DIY advice. I decided that these looks simple enough for me.

Featured Images in RSS

How to Show Featured Image in WordPress RSS Feed shows how to do just that. You need to edit the functions.php file in your blogs theme 2.

All I needed to do was copy the code suggested from that site and add it to the bottom of my functions.php file which I already had in my child theme. The post shows how to edit this file via the WordPress dashboard. I do this with my ftp application.

A quick look at my feed in Forefox (Safari dos not show RSS any more 🙁 )
http://johnjohnston.info/blog/feed/ or http://feeds.feedburner.com/johnjohnston
Looks good.

Captions for featured images

Again there are plugins for this, but I found:
How to add caption to the featured images in WordPress which had done the trick.

This uses the built in caption from the media library. To do this I needed to copy the content-single.php file from the theme to my child themes folder. I then edited that one.

My theme’s code was slightly different to the example but it was easy enough to figure out where the code for the featured image/thumbnail was and add:

<?php if ( $caption = get_post( get_post_thumbnail_id() )->post_excerpt ) : ?>
    <p class="featuredcaption"><?php echo $caption; ?></p>
<?php endif; ?>

After it. I also added a bit of css to the child themes styles.css file to align the text right. I’ll think about how to make that better looking….

What I particularly like is that this approach uses the built in WordPress caption for the image. When I started thinking about it I was thinking about adding a custom field and complexity. I keep finding that WordPress is already half way to do what I want, if only I knew where to look. Until I do google will keep me right.

  1. I choose the theme because it supports indyweb features I wanted to test. I’ve still not got my head round many of them.
  2.  This just works if you can edit your theme, so you would need a self hosted blog. I use a child theme here which should avoid changes being overwritten if the them is updated.Child Themes « WordPress Codex covers the details

Image opensource.com | Flickr – Photo Sharing! used under a CC-BY license.

File under another thing about WordPress I didn’t know.

I do not use the more tag on this blog very often, but it is a handy thing if you do not want all the text from a post filling up your home page. I was using it elsewhere today and wondered if I could edit the text from the standard Continue reading → turns out you can. You need to stitch to the Text view in the post editor, rather than the Visual, There you will see:

<!–more–>

you can edit it like this:
<!–more Find out more about more… –>

Find out more about more…