Output only the first piece of embedded media in a WordPress post

I like using WordPress post formats, especially for embedding audio and video. However, what I don’t like is that the only way to get the video, audio, or other piece of embedded media to show on your homepage and category pages is to output the entire content of the post.

So I fixed it.

How to get just the embedded media in a WordPress post excerpt

In your content.php file (or wherever your theme keeps its output for the post format in question), use the following code wherever you want to get your “rich excerpt”:

$content = get_the_content();
$content = apply_filters( 'the_content', $content );
$content = str_replace( ']]>', ']]>', $content );
$content = explode('</iframe>',$content);
if(sizeof($content) > 1){
     $content = $content[0];
     $content .= '</iframe>'; 
} else {
     $content = $content[0];
echo $content;

Essentially what this does is

  1. Grabs the content
  2. Tries to split the content up wherever an iframe is found
  3. If 1 or more iframes are found:
    1. Get everything up to the first iframe in $content
    2. Replace the missing </iframe> (which we lost when we exploded the content) on the end of $content
  4. Or If 0 iframes are found
    1. Get everything and put it in $content
  5. Output $content

This seems to be working in this blog’s current theme, Polymath.

Feeling Blue – Giving Polymath a splash of colour

If you’ve been keeping up with the evolution of the Polymath theme, you might have noticed that things have gone a little.. blue. (Or, if you’re catching up late, then there’s a good chance that the blog has changed to a different colour entirely… being mercurial is a part of my alleged charm).

All of the colour coding in the CSS is now controlled through WordPress Customizer, a somewhat arduous process but ultimately worth it to ensure that Polymath is as flexible as I want it to be. Not everyone shares my passion for monochrome themes and not everyone has a grasp on CSS either. Customizer options, for me, are therefore essential to ensuring that a theme is flexible enough to be put to use by a wide range of users.

I’ve still got a little work to do, creating enough colour options to cover the header, footer, and body areas.

After that, I’ll be moving on to adding control over typography styles and, at that point, Polymath should start looking and feeling like a finished theme that’s ready to be shared.

Why did Automattic just give away 165 WordPress themes on Jetpack?

Finding the right theme for your WordPress site is hard.

One of the most difficult things, I think, is working out which features are free and which features you are going to pay for. A lot of developers fail to make it clear and you can waste a lot of time getting testing themes that don’t do “out of the box” what’s on the box.

If you’re a writer, blogger, or anyone else looking for a new theme for your site, the themes developed by Automattic for WordPress.com are amongst the best – and they’ve just released 165 of them for anyone running a WordPress site, whether you are hosting on WordPress.com or not.

There are some great themes available – just point your browser at https://wordpress.com/design and give them a try.

I’m sure there will be plenty of websites hurrying to review the themes and recommend their top-tens. I can almost hear the weight of the blog posts hitting the Internet as I write this.

I won’t be writing one of those articles..

I’m more interested in why Automattic just gave away 165 themes in the first place.

Is the flow of new, free WordPress themes drying up? There are certainly enough websites where you can upload and sell your theme very easily and, as I’ve already pointed out, more and more developers are loading their themes with pay for features.

It’s also possible that WordPress are trying to get more self-hosted sites signed up the Jetpack. They have a vested interest in pushing Jetpack’s paid for features themselves as an additional revenue stream and they’d also like to get users acclimated to WordPress.com’s interface – the interface they re-tooled at great expense and want theme and plugin developers to adopt as a new API/standard.

Without a doubt, I think this signals a clear strategy from Automattic to wrestle back control of the theme marketplace from the likes of Themeforest. Remember, #mysticchris is never wrong.

In the meantime, I’m happy to browse, steal some ideas,  and think about how I can get polymath added to WordPress.com!

We built a spaceship!

We made a spaceship. Well, Terry Cooper and a team of really hard working set-builders built a spaceship. I mostly sat at my desk at home and posted things like “Is the space ship ready yet?” on Facebook. Still, everyone has their part to play.

Yesterday was the first day of shooting for Offworld and the first time crew and ship had come together. Terry’s been keeping the final look under wraps even from me, so the pictures in the gallery below really are the first time we’ve had sight of what the interior of the Tantalus II looks like.

There’s a retro vibe to the ship interior that I absolutely love and I think anyone watching would be hard-pressed to say that anything looks “low budget”. There’s a layer of CG and post-processing to go on yet as well, lighting up screens and consoles and obviously putting the all-important space field outside the windows.

The Tantatlus II looks almost too good to crash. But crash she will…

Polymath is (nearly) all grown up

My new WordPress theme, polymath, is very close to completion.

Mobile testing is now complete and I’m happy with the layouts. The key break point is for small tablets; anything smaller than that gets the “mobile” single-column version and anything larger gets a multi-column version.

Widget areas and Masonry layout

I’m looking at better options for mixing in the widgets with the grid and ensuring that this is compatible with infinite scroll.

What I would like to achieve is a setup where you have up to ten widget areas that are mixed in with your content. This would allow users to include advertising, calls to action, or important content in their layout without heavily compromising the masonry aesthetic. What I need to ensure is that these additional elements don’t repeat themselves every time a set of posts is reloaded via the Infinite Scroll.

I will also be adding at least one new widget area to the footer and perhaps some special widget areas for use on pages and single posts.

Outputting videos at the excerpt

You may have noticed that videos and images now automatically get a double width grid and my first “aside” post (longer than a status, shorter than a post being my definition of an aside!) and seen how this shares the entirety of its content at the grid level without requiring a click through.

This is currently being done by just calling the_content(), but I will be looking at ways to do this without bringing through all of the text that may be included in a video or audio post as this does have a very big impact on layout.

When will polymath be available?

I am aiming to upload polymath to WordPress.com in April of this year.

Would you pay for Twitter? Twitter hope you will.

> https://www.gravit-e.co.uk/would-you-pay-for-twitter-twitter-hope-so

My ability to predict what will happen to online brands and tools has been running at 100% recently.

I was at Open University yesterday and, over lunch, talk turned to social media. I pointed out a couple of what I thought were important trends right now –

  • Facebook are struggling to capture the next generation of users. Their base is ageing and not growing as fast as investors want, and that’s why they are spending money to get Internet access to people who don’t have it.
  • Twitter is losing too much money and needs to find a new monetization strategy. I suggested they simply charged users a small fee, like WhatsApp.

Less than 24 hours later, The Verge and others are reporting that Twitter are working on a paid tier of services.

The legend continues – #mysticchrisisneverwrong

Does Twitter matter for Writers?

My answer on this is an emphatic yes.

Facebook remains a “walled garden”. Even if you share your content publically, the vast majority of users on Facebook are are not looking for content shared publically by strangers – they want to see posts from their friends/network.

Twitter is different. Hashtags rule and people connect and communicate with people that they don’t know far more easily. Whilst your initial view of Twitter is limited by your follow list you can follow almost anyone and engage with them. Facebook has barriers that Twitter does not.

Tweeting your blog posts and updating your status is a definitive cornerstone to building your online platform.

Should you pay for Twitter? Mystic Chris thinks you should and you probably will.

Authorsite reborn as Polymath

If you’re a regular visitor to my site you will no doubt have noticed that things have changed a little today.

What you’re seeing is the evolution of my theme for authors. Formerly known as “Authorsite”, I renamed the theme to “Polymath” to better suit it’s nature. I needed a theme that would cope well with a variety of posts in a variety of formats on a variety of topics.

Today, Polymath:

  1. Is built on _s (underscores),
  2. Adopts a Pinterest style “masonry” layout, powered by Desandro’s Masonry plugin
  3. Has a drop down “mega menu” with built in widget areas
  4. Has three footer widget areas
  5. Has sidebar and banner widget areas built into the masonry grid
  6. Supports post formats, changing the design of the grid elements based on the post type

There’s more work to follow, including some rigorous mobile testing. In the meantime I’d love to get your feedback on the theme before I upload it to WordPress.org.


CSS Media Query Cheat Sheet

Even if you’re not planning to do much CSS on your WordPress site, chances are you might need to tweak something.

In today’s multi-device world, having a site that looks good on a range of devices – from phones to desktop PCs and those giant Apple Macs people seem to like – is essential. You need to be able to control your CSS and adapt at depending on the size of the device you are looking at.

The key to this is media queries. I don’t write these often and I sometimes forget the syntax, so this post is my CSS media query cheat sheet.

/* iPhone and above */
@media only screen and (min-width : 320px) {}

/* Extra small devices and above */
@media only screen and (min-width : 480px) {}

/* Small devices and above */
@media only screen and (min-width : 768px) {}

/* Medium sized devices and above */
@media only screen and (min-width : 992px) {}

/* Large devices and above */
@media only screen and (min-width : 1200px) {}

I like to deal with fonts by setting a base size, usually in the body tag and then using the rem unit of measure.

rem is emphasis relative to the base size. So, 2rem is twice as big as whatever your base font size is.

This means you can set a different base font size in each of the media queries above (for example) and all other fonts will automatically adjust to the required size based on their rem value.

CSS Base Size and REM example

/* iPhone and above */
@media only screen and (min-width : 320px) {
     body { font-size: 10px; }

/* Extra small devices and above */
@media only screen and (min-width : 480px) {
     body { font-size: 12px; }

/* Small devices and above */
@media only screen and (min-width : 768px) {
     body { font-size: 14px; }

/* Medium sized devices and above */
@media only screen and (min-width : 992px) {
     body { font-size: 16px; }

/* Large devices and above */
@media only screen and (min-width : 1200px) {
     body { font-size: 18px; }

h1 { font-size: 5rem; }
h2 { font-size: 4rem; }
h3 { font-size: 3rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.5rem; }

K-2SO: Hero or Victim?

K-2SO is a re-programmed Imperial droid who specializes in strategic analysis. He was the break-out star of Rogue One, played by the peerless Alyn Tudyk. If you haven’t seen Rogue One, skip the video the below and the rest of this post. If you already have (and frankly, who hasn’t?) then read one. Because I’ve got a problem with K2SO.

K-2SO clearly has a personality. He is clearly sentient. So are other Star Wars droids like C3-PO and R2-D2.

If K-2SO is not sentient, then his self-sacrifice to protect Jyn Erso and Cassian Andor means nothing. Absolutely nothing. It is no more a great sacrifice than when your kettle switches itself off rather than boil dry and catch fire.

But, if K-2SO the question becomes… how long has he been sentient for?

Is his sentient nature part of the re-programming that the Rebels have done to him or did he have a different personality prior to this? Did the Rebels brain wash K-2SO? Did they murder the “old him” and install this new one.

It’s pretty unclear where Star Wars droids get their personalities from. I’m quite comfortable with the idea that the Empire, after the dismal showing of the “Roger Roger” battle droids prior to the Clone Wars, decided to simplify their droids to be simply soulless automatons and that only the Rebels have clung on to their “thinking” machines.

However, this still leaves the question of why K-2SO sacrifices himself. This entire film is about sacrifice, especially the sacrifices made in war. By the end of the movie, nearly everyone has sacrificed themselves. Some do it for love, others for duty, some for friendship, some for redemption.

Why does K-2SO do it? Is it a simple calculation – his life vs. the success of the mission – or is there something more at play? If so, was this capacity for self-sacrifice engineered in from the very beginning?

K-2SO clearly doesn’t obey Asimov’s Laws of Robotics, he merrily dispatches StormTroopers through the movie, so this is not a simple case of artificial life being worth less than organic life as a trope. It seems to me that whoever re-programmed K-2SO built the capacity for self-sacrifice in from the very beginning. Like his human counter-parts, sent on a suicide mission, he was built to die.

I think that makes K-2SO’s story all the sadder.