Year: 2015

My oEmbed discovery links work (It was me)

I thought I broke my oEmbed discovery links but I had a more fundamental problem. I had broken fancy permalinks on my nginx configuration for a while and didn’t realize it.

I revisited the Nginx Codex page and did a stare and compare of my configuration and the examples there. I am sure I read that page in the past and my mistake was the “try_files” line.

Here’s what I had for try_files.

location / {
	try_files $uri $uri/ /index.php;
}

Here’s what that line should have read.

location / {
	try_files $uri $uri/ /index.php?$args;
}

See the “?$args” part? With that in place the non-post URLs work. The permalinks worked fine but things that were not to a post or page didn’t. Due to my fancy permalink settings my oEmbed discovery links had this format.

https://blog.dembowski.net/wp-json/oembed/1.0/embed?url=urlencoded-data-here and that wasn’t being handled by my nginx configuration.

My plugin worked because I was replacing the fancy URLs with the regular non-fancy “?rest_route” version which nginx passed along to my WordPress installation just fine.

https://blog.dembowski.net/?rest_route=%2Foembed%2F1.0%2Fembed&url=urlencoded-data-here

This may have also broken other features as well. I wonder what else I’m missing? I should check all the things. 😉

oEmbed not working (I’m convinced it’s me)

One of the new WordPress 4.4 features is the ability for your installation to become an oEmbed provider. In plain English you can paste your post URL and get a result as if you were embedding a YouTube URL.

I could not get it to work for me. No way, no how. The json and XML discovery links were there in the post HTML but those links came back with “What? What? No. Go away, you’re bothering kid.”

It should have come back with a valid output and it did. It was a result, just not a functioning one.

For example, this post (which I’m not embedding) should provide via this link usable information. It doesn’t. I get this.

<link rel="alternate" type="application/json+oembed" href="https://blog.dembowski.net/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fblog.dembowski.net%2F2015%2Fserver-admins-love-wp-cli%2F" />

That link results in this.

{"code":"rest_missing_callback_param","message":"Missing parameter(s): url","data":{"status":400,"params":["url"]}}

It doesn’t contain any useful data except to reply with “What? What? What?”

It should output this.

{"version":"1.0","provider_name":"Mostly Harmless","provider_url":"https:\/\/blog.dembowski.net","author_name":"Jan Dembowski","author_url":"https:\/\/blog.dembowski.net\/author\/jan\/","title":"Server admins love WP-CLI","type":"rich","width":600,"height":338,"html":"</pre>
<blockquote class="\&quot;wp-embedded-content\&quot;">
<a href="\&quot;https:\/\/blog.dembowski.net\/2015\/server-admins-love-wp-cli\/\&quot;">Server admins love WP-CLI<\/a><\/blockquote>\n<script type="text\/javascript">// <![CDATA[
\n<!--\/\/--><![CDATA[\/\/><!--\n\t\t!function(a,b){\"use strict\";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf(\"MSIE 10\"),h=!!navigator.userAgent.match(\/Trident.*rv:11\\.\/),i=b.querySelectorAll(\"iframe.wp-embedded-content\"),j=b.querySelectorAll(\"blockquote.wp-embedded-content\");for(c=0;c<j.length;c++)j.style.display=\"none\";for(c=0;c<i.length;c++)if(d=i,d.style.display=\"\",!d.getAttribute(\"data-secret\")){if(f=Math.random().toString(36).substr(2,10),d.src+=\"#?secret=\"+f,d.setAttribute(\"data-secret\",f),g||h)a=d.cloneNode(!0),a.removeAttribute(\"security\"),d.parentNode.replaceChild(a,d)}else;}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!\/[^a-zA-Z0-9]\/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret=\"'+d.secret+'\"]'),k=b.querySelectorAll('blockquote[data-secret=\"'+d.secret+'\"]');for(e=0;e<k.length;e++)k[e].style.display=\"none\";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.style.display=\"\",\"height\"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(200>~~g)g=200;f.height=g}if(\"link\"===d.message)if(h=b.createElement(\"a\"),i=b.createElement(\"a\"),h.href=f.getAttribute(\"src\"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener(\"message\",a.wp.receiveEmbedMessage,!1),b.addEventListener(\"DOMContentLoaded\",c,!1),a.addEventListener(\"load\",c,!1)}(window,document);\n\/\/--><!]]>\n<\/script><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/blog.dembowski.net\/2015\/server-admins-love-wp-cli\/embed\/\" width=\"600\" height=\"338\" title=\"Embedded WordPress Post\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe>","thumbnail_url":"https:\/\/blog.dembowski.net\/wp-content\/uploads\/sites\/2\/2015\/12\/wp-cli-rocks.png","thumbnail_width":600,"thumbnail_height":135}

Which is unreadable to you and I but to something looking to oEmbed your post it will look like this.

Server admins love WP-CLI

Nice huh? All neat in an iframe and easily embeddable. The output is customizable too and I plan to do that on my photo blog.

The oEmbed discovery links should just work but on my installations it doesn’t. I tried Apache2, nginx, clean installation with zero plugins and the Twenty Fifteen theme. Different servers too. I always got the wrong output and could not get oEmbed working.

During my troubleshooting I found a different URL that worked consistently for me. It’s the same information but with a filter I replaced the default output with one that worked for me.

Here’s the plugin code I used. The oembed_discovery_links is filterable (filters are cool) and I toss out the old links and replace them with my own.

This works for me but I do not like this solution.

The problem I have is that the normal links are not being replied to correctly via my WordPress installation. I don’t know why the default discovery links are not working. It bothers me, it really does. 😉

I’m convinced that there is something I’m doing wrong in my setup. Once I figure it out I’ll I can remove this plugin and I’ll post what I was missing.

Server admins love WP-CLI

I’m more of a Network Monkey, but whenever I can provision something just using an ssh session I smile. Many hosts use WP-CLI already and I’ve installed it on my VPS too.

This morning I wrote up a small script to go to my test vhost directory and did the following.

  • Install a blank WordPress site
  • Update some settings
  • Fix my user display name
  • Make sure the plugins and themes are up to date (Akismet needed an update)
  • Delete the default post and page
  • Install, activate and configure the Wapuuvatar plugin
  • Install and activate the Baskerville theme
  • Imported the Theme Unit Test data
  • Cleaned up after the import
  • Used search and replace to make all my http URLs into https

All this was performed without using a mouse or web GUI. (Okay, I checked the avatar setting via /options.php, but I didn’t have to.)

Here’s the script with sensitive details changed.

#!/bin/bash
cd /my/notsecret/www/vhosts/bang.dn7.me

# Setup a new WordPress installation

wp core download

wp core config --dbname=tothemoon \
--dbuser=testuser \
--dbpass=3c962761afbf9ab40a2e75346809c8cf

wp core install --admin_user=jan \
--admin_password=Rea11y*ot7y^assWiRd \
--admin_email=example@example.com \
--url=bang.dn7.me \
--title="Bang! Boom! Pow!"

# Update some options and my account info

wp option update blogdescription \
"What could possibly go wrong?"
wp option update comment_moderation 1
wp option update comments_notify 0
wp option update moderation_notify 0
wp option update comment_whitelist 0
wp user update 1 --first_name="Jan" \
--last_name="Dembowski" \
--display_name="Jan Dembowski"

# Make sure plugins and themes are all up to date

wp plugin update --all
wp theme update --all

# Clean up the default post and page

wp post delete 1 --force
wp post delete 2 --force

# Wapuuvatar is cool. Install, activate
# and set to the default avatar

wp plugin install wapuuvatar --activate
wp option update avatar_default dwapuuvatar

# Let's play with the Baskerville theme

wp theme install baskerville --activate

# Now to import the theme unit test data

wp plugin install wordpress-importer --activate

curl -O https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml

wp import theme-unit-test-data.xml --authors=create

# Clean up in aisle seven

wp plugin deactivate wordpress-importer
wp plugin delete wordpress-importer
rm theme-unit-test-data.xml

# My test site is also TLS so I'll fix 
# all the things to point to the encrypted URL

wp search-replace http://bang.dn7.me https://bang.dn7.me

# All done

I previously dropped the test installation’s database and created a new empty one. A quick “rm -rf *” (which wise people never do) in the right vhost directory and I ran “bash install-bang.sh”.

It works like a charm. Smart web hosts can and do tie WP-CLI into their provisioning setup. I happened to setup my vhost with TLS and mysql in advance but with a little backend work this can be easily automated.

If you have a test server to play with then give WP-CLI a try. You’ll get a better understanding of both WordPress and the command line.

I can’t really get angry at him for solving a problem

Friday afternoon I called the house and got my then 13 year old son. He turned 14 a few days later.

Dad, the WiFi sucks. I'm trying to download an update to War Thunder and it's taking almost an hour.

He was right, the WiFi adapter on his PC is garbage. The access point is in the same room less than 10 feet away. There's no reason for wireless to suck.

I told him that I'll get an Ethernet cable and hardwire him into the FIOS router. That will give him all the bandwidth he could ever use. I didn't think much about it after that till I got home.

He really wanted that update to War Thunder.

He gave it some thought and enabled tethering on his iPhone. Via WiFi he connected his PC to the iPhone and began to download the update. In less than 2 hours he ate almost 3 GB out of my monthly 10 GB allotment.

This did not make Lily and I very happy. She got a text message saying we'd crossed 75% of usage. She asked him and he suddenly remembered what he'd done and quietly disabled tethering without 'fessing up. Lily pulled up a pie chart of the usage and his phone was right behind mine.

I got home and it took me 0.0035 seconds to figure out what he did. I was angry and let him know that he was being selfish. He should have told his mother what he'd done. And yet… I like how he figured out another way to connect to the Internet. He had a problem and quickly came up with an alternative to fix it.

He lost cellular data for the week and may lose it for the rest of December. I also deleted his games and YouTube app from his phone; enough already. But I'm glad he thinks to solve problems and I can't be mad at him for that. Later on I told him I like that part of what he did.

If he does it again though, that phone is mine. 😉

Tomorrow the WordPress Community Summit!

Last year I was fortunate to be invited to the 2014 WordPress Community Summit and this year in Philadelphia I’m going again. Tomorrow morning Lily and I will wake up around 4 AM. She’ll drive me to the train station where I’ll take a 5 AM train to Penn Station. From there it’s an Amtrak ride to Philadelphia.

I’ll be a little late to the event. 😉 It can’t be avoided, I had too much going on at work to be there the night before. The 4 AM is rough on Lily but I’m often awake at that time waiting for 5:30 to get up. She’s much more sensible than I am and I wouldn’t be going but for her support and tolerating my hobbies.

I’m excited and it’s interesting to me that I explain why.

Everyday I go to work and with a great team of people and I deal with conflict. Projects that are in-flight, new commitments are made, deadlines are met or extended or flat-out missed (which is not good). Sometimes work is a disappointment and there’s always someone that’s upset or really pissed off. Sometimes I unintentionally let people down.

“Work sucks” or so the saying goes. It’s a challenge and it’s a constant test and conflict. How will I deal with this problem? Will someone or something piss me off and what drama will happen today?

I don’t think it sucks at all.

I’m one of the people in the middle of that organized chaos. When the alarm bell rings and it’s on me to figure it out and make it all work, I am one of the best firefighters there is. I’ll find the problem, I’ll get to the solution, I’ll have a dozen eyes on me all talking at the same time. I’ll have the support of my boss and co-workers. I won’t have any fear or hesitation. I’ll stand there on the call and get the job done. And I’ll do it with my characteristic and occasionally inappropriate sense of humor.

It’s not really different from a lot of jobs. My participation in the WordPress community is nothing like this at all.

Tomorrow I’ll be surrounded by developers, support people, designers and people I respect and admire and, most importantly, a number of friends. This will be my fourth WordCamp. I’ll be having great fun.

I will, once again, be intimidated. That’s not a bad thing.

You see, for me providing support for WordPress started out as therapy. Answering a topic in the forums and helping someone is fun and addictive. I occasionally help people out of a hole and that’s always cool.

Later on getting more involved meant helping people as well going behind the bar and moderating the forums. Cleaning out the spam queue, closing an occasional run away topic, stuff like that. I’m big on routines and I’m used to looking at the forums before the coffee set in.

My WordPress involvement went from being a form of therapy to using that involvement to becoming better at my job.

Collaborating with people in person and online improves me as a professional. The reason I’m intimidated is that, while I don’t think that my involvement is bad, I’m sure that I can improve. Or perhaps someone else can do it better than I do.

I’m comfortable with my intimidation. I don’t always have to be the one putting out the fires and I can learn more when I don’t have all the answers.

I’ll have a great time. I can’t wait to see the gang in person.

Fixing broken post_author IDs

In the long history of my of my blog (over 900 posts), I’ve done many things that were… ill-advised. I’m still recovering from messing up my media library somehow. All the images load but a couple of galleries disappeared.

While playing with the Wapuuvatar plugin I noticed that my recent 60 or so posts were showing my Gravatar photo but the older posts where showing a Wapuu. I thought I ran into some weird bug in the plugin. Ha! The plugin is fine. My old posts were set to post_author ID=0.

There is no such author ID but fixing it was straight forward. Here’s what I did.

WP-CLI is your friend

To get an idea of how bad the problem was I ssh’ed to my server, cd’ed to my installation and ran this command.

wp post list --fields=ID,post_title,post_name,post_date,post_author --url=blog.dembowski.net

This command outputs a neat table and the fields on the CLI include the post_author ID.

I wanted to see those fields and since I’m running on multisite I had to specify the URL. Yep, the recent posts were set correctly but almost all of the old ones were set to post_author=0. I probably could use wp-cli to fix it but I ended up using mysql commands.

wp db export ~/author-munging-save-me.sql

Backup your database, backup your database, backup your database. Don’t rely on your existing backup, just make a new one.

From my wp-config.php file I copied the mysql database name, user ID, password and table prefix. I then ran this command.

$ mysql -D mydbsitedbname -u mydbuser -p

Which put me on the mysql command line. The idea was to fix each post where the post_author=0. Easy!

And I promptly ran an update on the wrong table in my database.

A quick check showed me that nothing changed for what I was trying to fix. I’m not sure what I broke but I am sure I would be sorry if I didn’t fix it pronto.

Backups are good but do you know how to use them?

I wasn’t worried because I had that backup and ran this command.

$ mysql -D mydbsitedbname -u mydbuser -p < ~/author-munging-save-me.sql

You see, I like to poke at my site and while I don’t always break it I have done horrible things in the past. Everyday I make a full automated backup and once a week backup all of my files and I know how to restore the full database. I could rely on last night’s file but why bother? I just made a new one before working on the database.

I forgot that I was running multisite and that this blog is the second one in my site. The wrong post_author ID was 0, the correct ID is 1. I re-ran mysql on the command line and used this:

UPDATE myprefix_2_posts SET post_author=1 WHERE post_author=0;

A quick check and I’m good. The only thing that was updated was the post_author where I wanted it to be. I’m sure I would have caught this eventually but using the Wapuuvatar plugin pointed it out to me sooner.

Update: That broke things. The Gravatars on the front page went away. I rolled back the database and will look at being a little more selective on how I update the post_author.

Update for the update: When Twenty Sixteen only sees published posts from one author then the Gravatar isn’t displayed on the main list of posts. Nothing broke and I assigned Lily’s 3 posts to her account. 😉

Featured image photo by masatsu

Internet Explorer. Oh, the pain. Make it stop.

I like CSS. It’s clean, (mostly) standards based and while not all browsers will agree on goofy features, some basics should just work. CSS3 Flexbox support should be on that list for current versions of browsers.

Guess which browser doesn’t support “flex-direction: column”? Internet Explorer will not be updated by Microsoft for anything except security patches. The CSS works fine in the Edge browser.

In my last post I described how to get CSS to visually crop and center featured images. With Internet Explorer 11 the cropping worked but the image wasn’t vertically centered. The “overflow: hidden” did it’s job but the image displayed from the top and the rest was hidden.

Centering images using javascript

This is not a new problem and I found this article on how to use a little jQuery to make a browser do it’s thing. When it’s one image then you can use the class assigned to it.

I ended up adding this class to each featured image.

mh-thumbnail-<?php the_ID(); ?>;

Then I outputted this script where any featured image was.

<script type="text/javascript">
jQuery(document).ready(function() {

	var imageHeight_<?php the_ID(); ?>,
	wrapperHeight_<?php the_ID(); ?>,
	overlap_<?php the_ID(); ?>,
	container_<?php the_ID(); ?> = jQuery('.mh-thumbnail-<?php the_ID(); ?>');

	function centerImage() {
		imageHeight_<?php the_ID(); ?> = container_<?php the_ID(); ?>.find('img').height();
		wrapperHeight_<?php the_ID(); ?> = container_<?php the_ID(); ?>.height();
		overlap_<?php the_ID(); ?> = (wrapperHeight_<?php the_ID(); ?> - imageHeight_<?php the_ID(); ?>) / 2;
			container_<?php the_ID(); ?>.find('img').css('margin-top', overlap_<?php the_ID(); ?>);
	}

	if( BrowserDetect.browser == 'Explorer' ){
		jQuery(window).on("load resize", centerImage);
	}
});
</script>

That sucks. It’s doable, but I needed to use “the_ID()” because each featured image needed it’s own calculation to center correctly.

I did not want that “jQuery(window).on” to fire for anything except but Internet Explorer. jQuery removed the ability to easily detect the browser and for good reason: you should write scripts based on the browser’s capabilities and not the version or software vendor. My javascript skills are worse than my CSS.

I ended up using this script and I can detect “Explorer” now. Adding a line to my child theme’s functions.php file took care of that.

wp_enqueue_script( 'mh-browserdetect', get_stylesheet_directory_uri() . '/browserdetect.js' );

The end result is that for any current browser the CSS does it’s job. For Internet Explorer the javascript gives it that little push to get it to play nicely. I haven’t tried Internet Explorer 8 but I’m not sure I care to.

Working with version 11 already made me feel like I need a bath.

Center cropping featured images in CSS

I’m lazy and I like to try and figure out how to get the results I want without a lot of work. In the recent past I’ve uploaded featured images that were 1200 pixels wide and varying heights. I’m playing with a child theme of  Twenty Sixteen and wanted to center crop the existing featured images.

I could have re-sampled the cropped images one at a time in Photoshop Elements or ImageMagick (for some CLI bash shell fun). Or I could have used the Regenerate Thumbnails plugin and let that go. Instead I messed with CSS until it worked the way I liked. Continue reading “Center cropping featured images in CSS”