I’ve been taking another look at old code recently, and I dusted off a couple on-the-fly smart cropping demos that I wrote, years ago. At the time, they relied on questionable hacks and ran extremely slowly, making them impractical for real-world use.
However, with the rise and widespread adoption of CSS3, and the recent incorporation of Responsive image srcsets into WordPress 4.4, The timing seemed right to finally complete the toolkit, and offer WordPress users truly responsive images.
WP SmartCrop is a free WordPress plugin that allows you to specify a ‘focal point’ for the images you upload. Then, when the image is used in a post, or as a featured image, it will automatically crop the image to any dimensions set by the site’s stylesheet.
With this new feature, you can (for the most part) decouple your media from your design, without sacrificing the impact it has for viewers.
When creating a custom taxonomy in WordPress, you get a different default interface for hierarchical taxonomies than for non-hierarchical taxonomies. Hierarchical taxonomies get a checkbox-based interface, like Categories, while non-hierarchical taxonomies get an auto-complete interface, like Tags.
You can select the metabox interface used with the ‘meta_box_cb’ attribute of the ‘register_taxonomy’ call. By default, hierarchical taxonomies use the callback ‘post_categories_meta_box’ and non-hierarchical taxonomies use the callback ‘post_tags_metabox’. Unfortunately, the two options aren’t compatible with each other.
For some reason, when a post is saved or updated, non-hierarchical taxonomies expect to receive an array or comma-separated list of term names (as strings), while hierarchical taxonomies expect to receive an array of term ids (as ints). Luckily, it is fairly trivial to translate between the two formats.
Here’s the code to make a non-hierarchical taxonomy that uses the category-style metabox:
WordPress 4.4 brought an awesome new feature to the CMS system: Responsive images. As of 4.4, WordPress automatically adds the HTML5 srcset attribute to the image tags that it auto-generates. These srcset attributes define other sizes of the image, to be downloaded on devices with other screen resolutions and orientations. Using responsive image tags allows sites to load faster on mobile, use less data, and be optimized better for the viewer’s screen.
Unfortunately, because of the way WordPress implemented the feature, these new srcset attributes can cause trouble on some sites.
If you are using Cloudflare, with Universal SSL, or if you are serving your site over both HTTP and HTTPS, you may see broken image tags in Chrome, or receive security warnings in other browsers.
The problem is pretty simple. Wordpress expects your site to be served at the address stored in the ‘siteurl’ option, including the protocol stored there. The new srcset image urls are built from that assumption, without running through the usual filters. So, HTTPS sites can end up serving HTTP images in the srcset tag, causing all kinds of trouble.
Lockily, I’ve come up with a simple fix for the problem. Just add the following code to your functions.php file, and your srcset images will all be served as protocol-independent urls:
This same approach can also be used to fix CDN urls in srcset tags, by using a different replace function.
Buddypress is a great option for running closed social networks in WordPress. However, if it doesn’t perfectly fit your needs out of the box, you’ll soon realize that it has some serious shortcomings.
Consider a text-based company logo. It may have an aspect ratio of 3:1, but a square crop of the image would lose all meaning, and look sloppy. You could tell users to send it to a graphic designer to get a square version created, but that is a great way to lose users. Instead, I tackled the issue programmatically.
If you require the following script in your theme’s functions.php file, it will detect when users upload non-square profile photos, and will add padding to make them square, before displaying the crop interface. That way, if the image must remain complete, it can simply be displayed centered in the square, with padding surrounding it.