Fix Broken images after WordPress 4.4 update

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.

ADVERTISEMENT:

Add Auto-sensing File Type Icons to lists of downloads, with FontAwesome and CSS

Recently, I needed to create a downloads area that was going to be managed by a client.  It’s a reasonably straight forward task, except for one snag: They wanted icons next to the links, denoting what filetype the download was.  I could have created a few custom classes to add to the links, but the client is not at all technical, and I wanted to involve as little manual editing as possible.

Instead, I wrote a quick set of CSS selectors that filter the links by their href attributes, and provide the proper icon.  I still provided override classes, in case it doesn’t always detect properly, but so far, it seems to be working perfectly.

I’ve included the CSS below.  If you want to use it or modify it, feel free to do so.  To use, just include FontAwesome in your project, include the css below, and add a “link-icon” to any link you want to display an icon for.

Examples
(note: the links below are fake, but you can inspect them to see how the icon is selected)


read more »

ADVERTISEMENT:

Fix the Avatar Cropping Issue in Buddypress

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.

One of the most common issues I see posted about buddypress, that up till now had no solution, is the issue of Avatar cropping.  In buddypress, all user profile pictures must be square.  Any non-square image uploaded will be provided with a javascript-based crop tool, that allows the user to choose what square to show.  However, many images have no good square option.

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.

ADVERTISEMENT:

Implement Transparent File Caching for functions in PHP

Sometimes a script needs to call a function that either uses a large amount of system resources, or that performs external calls to servers or APIs that place limits on requests. Often, however, the data returned by these functions isn’t highly volatile, and can be expected to remain the same for subsequent calls.

In these cases, it is necessary to implement a form of cache, to store the results of running the function once, and use the same results on subsequent calls (clearing the cache regularly, to prevent buildup).

Caching to disk is fairly easy to implement in PHP, but it is nice to have a prebuilt, general purpose solution that can be dropped in to any project.
read more »

ADVERTISEMENT:

Sort by Last Name First in PHP

This is less of a post, and more of a useful snippet. I’ve seen many posts online about sorting an array of names by surname, and they’ve all failed to be complete. Here is my addition to the pile. Keep in mind that it has known issues with compound last names that contain a space, like “Von Zinger”, “Mac Innis”, or “Di Vece”. However, it is a more robust solution than many others online today.

ADVERTISEMENT: