How to Use Jetpack Photon for WordPress Header Image

When doing some performance testing of the new site design, I realized that the header image wasn’t being processed by Photon.

Since there’s a filter for almost everything in WordPress, I look around a bit and found the theme_mod_$name filter.


/**
 * Filters the theme modification, or 'theme_mod', value.
 *
 * The dynamic portion of the hook name, $name, refers to
 * the key name of the modification array. For example,
 * 'header_textcolor', 'header_image', and so on depending
 * on the theme options.
 *
 * @since 2.2.0
 *
 * @param string $current_mod The value of the current theme modification.
 */
return apply_filters( "theme_mod_{$name}", $mods[$name] );

Using that filter, we can then modify the image source so that the image will be handled by Jetpack’s Photon.

add_filter( 'theme_mod_header_image', 'moh_photonize_header_image' );
function moh_photonize_header_image( $image ) {
  if ( $image && function_exists( 'jetpack_photon_url' ) ) {
    $image = jetpack_photon_url( $image );
  }
  return $image;
}

At this point, if you were to reload your home page and check the source for your header image, you’ll notice that the image has something like i1.wp.com in front of it. This means that our little snippet worked. ????

What I haven’t yet figured out is how to properly set the width and height arguments for the image since we only have the URL and not an image attachment. ¯_(ツ)_/¯

New site design

In anticipation for .blog domains going live on November 21st, I’ve been thinking about changing the look of this blog.

After stumbling upon the Ecto theme last week, I knew what I wanted the site to look like. Unfortunately, that theme has been retired on the WordPress.com themes list. I was lucky enough to grab a copy before it was retired though. 🙂

A few modifications

By default, the sidebar is hidden in Ecto until a user clicks a button. While this does help a website stay “clean”, I’m not a big fan in hiding the menu behind a click. So, I decided to show the sidebar for screens wider than 1200px.

new-site-main

I did that with this CSS:

@media only screen and ( min-width: 1200px ) {
    #page.site {
        left: 0;
        width: 75%;
    }

    #slide-menu-toggle {
        display: none;
    }

    #slide-menu {
        display: block;
        right: 0;
        visibility: visible;
    }

    #infinite-footer .container {
        float: left;
        width: 75% !important;
    }
}

That actually turned out to be a much simpler task than I thought it’d be. I’m sure I’ll figure out that I’ve missed something here in the near future. ¯_(ツ)_/¯

The next thing I did was not to show featured images in the archive view. Since most of my posts are images that are imported from Instagram, it didn’t make sense to show the image above the title and then show it again in the content.

Compare to the old

My previous site was a modification of the TwentySixteen theme. While I was a fan of its simplicity, I was ready for something different.

old-site

Some pictures from WordCamp DFW

This past Saturday, I attended WordCamp DFW as a co-organizer. It was interesting to be a small part of the organizing team and to get an idea of how a WordCamp gets put together.

Since I had just been in Canada for 9 days, I took Hero along with me so we could hang out. He had quite a bit of fun at KidsCamp, which Brad Griffin led.

Some personal highlights were:

  • WP Engine brought breakfast burritos ❤️
  • The after party was a bit more kid friendly since it was at a bowling alley ????
  • Hero was introduced to the WordPress community and had an amazing time with other kids

Pictures

Sanitize array of integers in PHP

I was recently working on a pull request where I wanted to take an array of object IDs and convert that into a string to be used in a SQL statement.

But, to prevent potential issues such as SQL injection, I needed to find a way to sanitize the array of integers and make sure that we only had integers in the array. Here is the solution that I used.

// Sanitize so that the array only has integer values.
$sanitized_array = array_map( 'intval', $ids );

// Now that we have all integers in our array, we can safely implode the
// array to be used in a SQL statement.
$ids_string = implode( ', ', $sanitized_array );
$sql = "SELECT * FROM {$table} WHERE {$object_id_column} IN ( {$ids_string} ) AND meta_key = %s";

If you’re not used to mapping an array of values, you may be wondering what the heck array_map() is doing. What array_map() does is iterate over an array (the second argument) and apply a callback function (the first argument) to each value in the array.

We then get back the resulting array with each value being sanitized by intval().

Alternative solution to sanitizing an array of integers

If you’re still a bit confused about what array_map( 'intval', $ids ), here’s another way to approach the issue:

// Sanitize so that the array only has integer values.
$sanitized_array = array();
foreach( $ids as $id ) {
  $sanitized_array[] = intval( $id );
}

// Now that we have all integers in our array, we can safely implode the
// array to be used in a SQL statement.
$ids_string = implode( ', ', $sanitized_array );
$sql = "SELECT * FROM {$table} WHERE {$object_id_column} IN ( {$ids_string} ) AND meta_key = %s";

In both examples, we iterate over the $ids array and apply the intval() function to each value.

The All-New Jetpack: Let’s See How You React

The Jetpack UI has been completely overhauled in 4.3. Release candidate 1 dropped today, so be sure to give it a spin.

The easiest way to test Jetpack 4.3 is to use the Jetpack Beta plugin.

Jetpack 4.3 is coming out next week! It’s the culmination of thousands of hours of work from dozens of talented engineers and designers. The Jetpack interface has been completely rethought …

Source: The All-New Jetpack: Let’s See How You React — Jetpack for WordPress

Jetpack 4.2 and 4.2.1: Performance Improvements and More

Jetpack 4.2.1 dropped today. ????

We had a rough start last week, but have since been hard at work fixing the performance issues that we had on large networks (8 Million+ users), so be sure to check out the updates for your WordPress site and get the latest version!

While I came in late to the project, having spent the past month or two focusing on SSO for 4.1, it’s been an honor to work with my Poseidon team (Miguel Lezama, Dan Walmsley, Enej Bajgoric) to get this out the door. Many thanks to all Automatticians who also helped make this a possibility by settings up systems, testing, providing feedback, etc.

Jetpack 4.2 and 4.2.1 brings you performance improvements along with some important security updates and enhancements to existing Jetpack modules.

Source: Jetpack 4.2 and 4.2.1: Performance Improvements and More — Jetpack for WordPress

Jetpack 4.1: My first large contribution to Jetpack

While I have contributed to a few Jetpack releases in the past, Jetpack 4.1 is the first release where I have contributed a significant amount of work.

The past couple of months I have worked hard on refreshing the Single Sign On (SSO) module. SSO makes it as easy as clicking a button to log in to a self-hosted WordPress site!

It was a fun project because I got to touch several different code bases, including: Jetpack, the WordPress.com API, Calypso (JavaScript version of WordPress.com), and the PHP parts of WordPress.com. Also, for each code base, unit tests were either created or updated.

Personally, this was an exciting release for me, but I’m stoked for the next two releases. We have some great UI and performance updates coming. ????

Check it out

Jetpack 4.1 dropped today. You can check out the release post for more information, or just head to your dashboard to update to the latest.

Jetpack 4.1 is here and it’s packed with performance improvements, new features, improvements to existing features, and bug fixes!

Source: Jetpack 4.1: Secure Sign On Improvements, Two New Sharing Buttons, and More — Jetpack for WordPress

Join our amazing team

While I did have the opportunity to write most of the SSO code for the release, the SSO refresh in 4.1 was only possible because of the amazing team we have.

  • Rick Banister and Michael Arestad provided mocks as well feedback on the UX and UI.
  • Brandon Kraft provided lots of feedback, pointed out old issues as well as conflicts with other plugins, and even created a core patch to add more actions to the login form.
  • Jeremy Herve did a ton of work getting the release ready.
  • The entire division participated in pre-release testing.
  • My team reviewed my code and listened to my complaining. ????

If you’re interested in joining our team, we’re always hiring.

jpop-full-2015
JPOP division at 2015 Grand Meetup in Park City.

Bulk generating meaty WordPress posts

This past week, I created a new test site so that I could test Jetpack 4.1. As part of the process, I wanted to create some filler content, so I did a quick search and came across a post that describes how to generate WordPress filler content from the Bacon Ipsum API.

I love BBQ, as do many Texans and Automatticians. So, this post naturally caught my attention. And after a conversation I had at php[tek] with a coworker, Timmy Crawford, about how he is always integrating food into tests, I had to take this for a test drive.

The post’s instructions worked great and it was nice to have some interesting, and “meaty”, filler content.

If you also find this interesting, check the post out! ????

Using the WordPress command-line interface and the Bacon Ipsum API, you can bulk generate posts for a new WordPress install.

Source: Bulk generating WordPress posts with filler content using WP-CLI and the Bacon Ipsum API – Bacon Ipsum

Disable Jetpack’s Photon module for Keying Social Importer

Since migrating my site to a new server, I’ve been noticing mixed content SSL errors. ????

After doing a bit of digging, I found that when my Instagram posts were being imported by Keyring Social Importers, that the image source was being set with an http Jetpack Photon URL.

So, my post markup looked like this:

<img src="http://i2.wp.com/manofhustle.com/wp-content/uploads/2016/04/13130026_1061188440605739_999811134_n.jpg?fit=640%2C640&quality=80&strip=all" width="640" height="640" alt="Bees in a tree" class="keyring-img" />;

Instead of this:

<img src="https://149404021.v2.pressablecdn.com/wp-content/uploads/2016/05/13113885_1541803272790749_1295774627_n.jpg" width="640" height="640" alt="&quot;No more pictures. No! No! No! No!&quot;" class="keyring-img" />;

I wasn’t sure why the http was being used instead of https. That being said, I knew that the post content should have manofhustle.com for the image source instead of a Jetpack Photon URL. So, I set off to fix it.

Finding the fix

Within a few minutes, I stumbled across one of my coworker’s (Erick Hitter) blog posts about conditionally disabling Photon, which made the work pretty easy! Thanks Erick ????

In that article, Erick suggests this code to disable Photon conditionally:

$photon_removed = remove_filter( 'image_downsize', array( Jetpack_Photon::instance(), 'filter_image_downsize' ) );

// Call wp_get_attachment_image(), wp_get_attachment_image_src(), or anything else that ultimately calls image_downsize()

if ( $photon_removed )
add_filter( 'image_downsize', array( Jetpack_Photon::instance(), 'filter_image_downsize' ), 10, 3 );

Modifying for Keyring Social Importers

The above code works great when you know that Jetpack is installed and when you have access to whatever function is calling for the image source. But, in the case of a plugin like Keyring Social Importers, we need to find actions to use so that we don’t modify the plugin code.

So, after looking around a bit, I found the import() method in Keyring Social Importers which seems to kick the process off. Within that method, there are two actions which are useful to us – import_start and import_end.

With that in mind, I modified Erick’s code to specifically work with Keyring Social Importers.

add_action( 'import_start', 'moh_disable_photon_social_importer' );
function moh_disable_photon_social_importer() {
if ( ! class_exists( 'Jetpack_Photon' ) ) {
return;
}

remove_filter( 'image_downsize', array( Jetpack_Photon::instance(), 'filter_image_downsize' ) );
add_action( 'import_end', 'moh_enable_photon_social_importer' );
}

function moh_enable_photon_social_importer() {
add_filter( 'image_downsize', array( Jetpack_Photon::instance(), 'filter_image_downsize' ), 10, 3 );
}

You can place this code in a custom functionality plugin for your site or in the functions.php file of your theme.