Skip to Main Content

Month: June 2015

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

Posted on by gschoppe

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.

read more »

Fix the Avatar Cropping Issue in Buddypress

Posted on by gschoppe

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.