You have to use an Ottopress to get fresh squeezed Otto.
Archive for the ‘Code’ Category.
Didn’t know about this one, but if you’re having a problem where the FB login buttons added by SFC don’t seem to do anything, try this:
Might fix the issue.
My post about how to customize WordPress images with tricks like greyscale and such got me lots of feedback, so I figured I might as well turn it into a plugin.
The ImageFX plugin allows you to customize the image sizes from WordPress or custom ones for your theme, by applying filters to them.
The way it works is basically identical to my original post on the topic, only it allows the filters to be defined on a per-image-size level. It also allows the addition of a “slug” to be appended to the image filename, which is useful for cases where you want to have two images at the same size, but with different filters.
Since it was easy to do, I went ahead and created several other simple image filters that you can use for your images:
Here’s some examples. This a pic of me, Nacin, Rose, and Matt at WordCamp San Francisco. I ran it through the sepia, blue colorize, and grey-except-red filters.
These are some of the default filters included, but since I could, I went ahead and made it easily expandable too. All you have to do to define a filter is to create a function to do the image filtering you want, then call the imagefx_register_filter() function to add it.
To implement your own custom filter, you can do it like this:
imagefx_register_filter('custom-name','my_custom_filter');
function my_custom_filter(&$image) {
// modify the $image here as you see fit
}
Note that the $image is passed by reference, so you don’t have to return it. This is because the $image resource takes up a lot of memory, so to save on memory usage, you are manipulating it in place, sort of thing.
You can use any of the image functions in PHP to change the image however you like. The filters I’ve implemented are mostly pretty simple. You can see them all in the filters.php file, in the plugin.
Caveats: The plugin will only filter JPG images, to avoid the overhead of recompressing PNGs and to avoid breaking animated GIF files. Also note that I haven’t tested these filters extensively. They’re only a starting point, sort of thing. I spent all of about 20 minutes writing them, so don’t expect miracles. 🙂
You can download version 0.1 of the plugin from the WordPress plugin directory:Â http://wordpress.org/extend/plugins/imagefx/
Enjoy!
@otto42 Did I hear you right that there’s greyscale filtering in WordPress somewhere? Could you point me in the right direction?
— Tammy Hart (@tammyhart) August 18, 2011
Manipulating images in PHP isn’t all that difficult. WordPress offers some functions to make it easier, and integrating with the WordPress uploader isn’t at all difficult, really.
For example, let’s say your theme needed a black and white version of the images, sized at 100×100, and cropped to that size. This might be suitable for Next/Previous images to use for a gallery, perhaps…
When black and white bears attack...
First, we need to create the image size itself:
add_action('after_setup_theme','themename_bw_size');
function themename_bw_size() {
add_image_size('themename-bw-image', 100, 100, true);
}
This simple function hooks into the after_setup_theme hook, which is loaded after the theme’s functions.php file is loaded. The function calls add_image_size to add a new image size for the uploader to create for each image that is uploaded into the WordPress media library. The size is specified as 100×100 with hard cropping.
Now that is easy enough, but we need to make the image black and white. To do this, we’ll hook into the wp_generate_attachment_metadata filter. This filter is called after the images have been resized and saved, but before the metadata about those resized images has been added to the attachment post. We’re not actually using this filter as a “filter”, but we need some of the meta data so this is as good a place to hook as any, as long as we remember to return the metadata again.
add_filter('wp_generate_attachment_metadata','themename_bw_filter');
function themename_bw_filter($meta) {
$file = wp_upload_dir();
$file = trailingslashit($file['path']).$meta['sizes']['themename-bw-image']['file'];
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
$image = wp_load_image($file);
imagefilter($image, IMG_FILTER_GRAYSCALE);
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
return $meta;
}
Let’s break this down piece by piece:
$file = wp_upload_dir(); $file = trailingslashit($file['path']).$meta['sizes']['themename-bw-image']['file'];
This bit of code gets our upload directory path, makes sure it’s trailing slashed, then appends the filename of our themename-bw-image file to it. Thus, after this is run, $file contains the full local path to the image we want to make black and white.
list($orig_w, $orig_h, $orig_type) = @getimagesize($file);
This line of code simply gets the image size and type into some variables. We really only need the type for later, but this is an easy way to do it.
$image = wp_load_image($file);
The wp_load_image function is a handy one. It reads in the image and returns a PHP image resource for us to work with.
imagefilter($image, IMG_FILTER_GRAYSCALE);
This simply applies the grayscale filter to the image resource, making it black and white.
switch ($orig_type) {
case IMAGETYPE_GIF:
imagegif( $image, $file );
break;
case IMAGETYPE_PNG:
imagepng( $image, $file );
break;
case IMAGETYPE_JPEG:
imagejpeg( $image, $file );
break;
}
Finally, we save the image back to the same file, overwriting the color one with the black and white one.
return $meta;
Since we used a filter, it’s important that we don’t leave out the final return to return the original information we were passed in, so that the metadata gets properly stored in the attachment post. We didn’t actually modify the metadata here, though we could.
Pretty simple to manipulate images in this way. You could apply one of the many other types of filters available, or change all the images into pictures of bears, or whatever you like, really.
First, WordPress plugin authors: Please don’t do this.
if ( isset($_GET['resource']) && !empty($_GET['resource']) ) {
$resources = array(
'icon1.png' => '... base 64 encoded code ...',
'icon2.png' => '... base 64 encoded code ...',
);
if ( array_key_exists($_GET['resource'], $resources) ) {
$content = base64_decode($resources[ $_GET['resource'] ]);
header('Content-Length: '.strlen($content));
header('Content-Type: image/png');
echo $content;
exit;
}
}I’ve seen a few different versions of this, and while the idea is nice, this is really the wrong way to go about it.
The idea is to include small icons or images in the plugin file itself, instead of as separate files. This sort of code then lets you reference them by calling a URL of ?resource=icon1.png or whatever. When that resource variable is detected, the plugin kicks in and serves up the image instead of the site.
Advantages to this sort of thing:
Disadvantages to this sort of thing:
Here’s a better way. It’s called the Data URI.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
Here’s that code in action, right here: 
Why this is better:
Disadvantage:
So use Data URIs for small images (under 32KB in size). They’re fast and easy. They’re an idea whose time has come.
Progress on the new SFC continues. Added a new plugin to it this morning: Photos. It’s a simple little plugin, and not pretty yet, but it does work. 🙂
Here’s a couple of example screenshots:
The selection screen (not pretty, but functional)
Example of the result
The plugin itself turns out actually to be quite simple. It turns out that adding to the media tabs is fairly straightforward with the existing WordPress functionality, and making links that insert things into the post code is not nearly as difficult as I thought it might be.
You can use the SFC beta version if you like. There’s a copy in the WordPress SVN directories. However, it’s buggy and unfinished and doesn’t have all the same functionality. But most of it works okay. Still needs polish before releasing it.
Note that all development on the old SFC 0.25 has ceased. I’m not making any further patches to it. If you want to upgrade now to the 0.999 beta version, feel free. Also, patches welcome.
So I got this video from a friend, and I wanted to post it on my site, but I wanted to do it without using any Flash, or any plugins, and I wanted it to work on the iPhone, and Chrome, and Firefox, and IE…
First I took the file and used Miro Video Converter to make two versions of the file. The first version I made was using the “Theora” format. This is an Ogg format, and you basically only need to make it for the video to show up in Firefox. Future versions of Firefox will support the WebM format instead (Chrome supports it now), so when Firefox 4 comes out, use that format.
Next, use Miro again and this time make a version using the iPhone preset. This basically creates an MP4 version of the file, but at the right resolution to have it show up on the iPhone. Annoyingly, the original file was from an iPhone, so it should have played, but it wouldn’t on mine. I suspect that the resolution difference between the iPhone 4 (used to make the video) and the iPhone 3GS (which I have) is the problem. Regardless, I just used the preset to downscale the video resolution.
WordPress didn’t like me uploading these files. Turned out that it was because I’m on multisite. In the Network Admin screen, find the Network Settings menu option, go to the bottom of the page, and add the mp4 and ogv extensions to the list of allowed files. Also add webm while you’re there, for the future.
Note: If you’re not on multisite but still have problems uploading the files, then add this line of code to your wp-config.php file, to turn on the unfiltered_upload capabilities for administrators:
define('ALLOW_UNFILTERED_UPLOADS',true);
One of the things WordPress relies on to know if it’s a video or not is the MIME Type. Some servers have these properly configured, some don’t. Doesn’t hurt to help the process along by explicitly defining some of them in the .htaccess file. For good measure, I added a bunch of common ones, just to be sure:
AddType text/xml .xml AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg AddType video/quicktime .mov AddType video/ogg .ogv AddType video/webm .webm AddType audio/mp4 .m4a .m4b .m4r AddType audio/mpeg .mp3 AddType audio/playlist .m3u AddType audio/x-scpls .pls AddType audio/ogg .ogg AddType audio/wav .wav
Easy one. Go into the Media->Library and upload your two videos. After doing that, get the URLs of both of them.
Make a new post and type in everything you want to type in. Then make sure you’re in the HTML editing mode, and add this code to the post:
<video width="640" height="360" controls> <source src="http://example.com/wp-content/uploads/video.mp4" type='video/mp4'></source> <source src="http://example.com/wp-content/uploads/video.ogv" type='video/ogg'></source> </video>
There’s a few things there you’ll need to manually edit.
Obviously the URLs need to point to your files. Also, it’s important that the MP4 one is first, some older iPad software doesn’t like it otherwise.
The second one is the width and height. Now, like with posting images, these don’t have to exactly match the actual width and height of the video. The browser will use these sizes and scale the video accordingly. However, you’ll want to get the aspect ratio correct, so you don’t stretch or squish the video into the wrong sized box. And you can leave the height and width out entirely to not scale it, if you got your sizes correct in the video itself. But it’s a good idea to have them there regardless, to clue the browser into the size beforehand and speed up page rendering. Also note that the iPhone doesn’t care about those width and height tags, since it will just show the video full screen when you tap on it.
Sidenote: Do NOT switch into Visual mode. TinyMCE will muck up this code, badly, and try to add a SWF player to it and Flash and a bunch of other stuff. This is probably by design, but I wanted to do this without Flash at all and see how that worked. Turns out to work fine in the browsers I tested.
Finally, preview and publish as normal.
One thing I haven’t figured out is how to target the iPhone specifically with a separate file. With this setup, Chrome and IE are now showing the iPhone file, which is lower resolution than the OGV file (which is at original resolution). In this specific case, the video was poor and so it doesn’t make much difference, but I’d prefer to have a separate file specified that only iPhones used without having to resort to user agent targeting.
EDIT: Turns out you can do this with a media query on the source that targets the iPhone. So here’s my new code:
<video width="640" height="360" controls> <source src="http://example.com/wp-content/uploads/video.iphone.mp4" type='video/mp4' media='only screen and (max-device-width: 480px)'></source> <source src="http://example.com/wp-content/uploads/video.mp4" type='video/mp4'></source> <source src="http://example.com/wp-content/uploads/video.ogv" type='video/ogg'></source> </video>
The media attribute lets you specify a CSS3 Media Query. The max-device-width of 480px = iPhone. So desktop browsers will use the video.mp4 while the iPhone uses the video.iphone.mp4. I’ve confirmed that this works properly with Chrome.
It’s interesting to see that browsers can do this reasonably well, even if you do have to make a few different versions of the video.
At the suggestion of ipstenu in the comments below, I made this into a shortcode plugin. You can download it here:
HTML5 Video Shortcode.
This plugin has the advantage of being ignored by TinyMCE. 🙂
While looking at my backlinks today, I noticed a site in French had linked to my post about making photo galleries. He mentioned that the Google Translate wasn’t great. I took a look, and while I don’t know how good the text translation was, I did notice that Google strangely tried to translate the code as well, thus screwing it all up.
A quick search revealed that all one had to do was to add the “notranslate” class to any wrapping object to prevent its contents from being translated.
Now, I use the Syntax Highligher Evolved plugin to display code on my site (although I use an older version because I like the look and functionality of it better than the latest version). So I edited the plugin and found where it inserts the PRE tag, and added the notranslate class to it. And voila, now my code doesn’t get translated anymore.
Just a helpful tip for anybody who posts code on their sites.
Google rolled out their +1 button today. So I added it here. You’ll find it below all the posts. Try it out.
Here’s the simple-stupid plugin I wrote to do it. While you can just edit your theme, I like making these sort of things into plugins. That way, I can turn them off at will, and I know exactly where to go to change them without having to dive into my theme code. Also, if I change themes, the code still works on the new theme.
<?php
/*
Plugin Name: Otto's Google +1 Button
Description: Add a +1 button after the content.
Author: Otto
Version: 999
*/
add_filter('the_content', 'google_plusone');
function google_plusone($content) {
$content = $content.'<div class="plusone"><g:plusone size="tall" href="'.get_permalink().'"></g:plusone></div>';
return $content;
}
add_action ('wp_enqueue_scripts','google_plusone_script');
function google_plusone_script() {
wp_enqueue_script('google-plusone', 'https://apis.google.com/js/plusone.js', array(), null);
}
I wrapped the button in a div so that I could style it. In my particular case, I’m floating it right and giving it a margin, same as the Twitter and Facebook plugins. One day, I’ll make all these little Google plugins more generic and configurable, and roll them into a Simple Google Connect plugin. 🙂
One thing I don’t like is that the +1 button only works for people who are logged into a GMail account. Sorry Google Apps users, you’re out of luck. Complain to Google until they fix it.
If you want to add more parameters to the plugin and reconfigure it, you can find out about the available parameters here: http://code.google.com/apis/+1button/#configuration
Just upgraded to the beta of 3.2. I like the new admin interface overall. Really, I do. But relatively minor things tend to bug me sometimes.
For example, I don’t much care for the Site Title being so tiny and hidden at the top of the admin screens. I like the site’s name to be big and prominent, as it’s a link to the front end of the site. On multi-site, it’s awfully nice to see at a glance what site I’m on. I often click that link to go to the front end of the site easily. So trying to navigate to the front end became difficult and hit or miss with this title being so tiny.
I also don’t like seeing the Page Title being so big and having a big ol’ icon there beside it. The Page Title strikes me as kinda useless. I mean, I know what screen I’m on.
So I wrote a quick tweak plugin to fix it. I’m posting it in case it bugs you as much as it bugs me. On a side note, it’s a quick little demo of how to modify the WordPress admin CSS quickly and easily.
<?php
/*
Plugin Name: Embiggen Site Title for WordPress 3.2 beta
Description: Embiggen the Site Title in wp-admin. Debiggen the Page headers. Ditch the useless icon.
*/
add_action('admin_print_styles', 'big_site_title');
function big_site_title() {
?>
<style>
.wp-admin #wphead {
height: 42px;
}
.wp-admin #wphead h1 {
font-size: 28px;
#font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; #uncomment this if you want to go to the sans-serif font
}
.wp-admin #header-logo {
background-image: url("images/logo.gif");
background-size:32px 32px;
width:32px;
height:32px;
}
.wp-admin .wrap h2 {
font-size:16px;
padding-top: 1px;
padding-bottom: 0px;
height:20px;
}
.wp-admin .icon32 {
display:none;
}
</style>
<?php
}
Feel free to tweak further as desired. Also, WordPress might change further before 3.2 is released, so this may stop working or need further tweaking.
SFC 1.0 – FB Comments Integration
Added a new feature that people have been asking me for since I created SFC to begin with: Comments Integration.
Facebook comments
When you make a post with SFC, the publisher plugin has the ability to push that post to either your Facebook Page or Profile. Up until now, the auto-publish feature has been doing this and storing meta-data with the post about the resulting “story” id that Facebook sends back. This data was stored, but not really used.
No longer. Now, if you auto-publish to Facebook, you have the option to pull comments back from that automatically published Facebook post and show them in the blog as if they were normal WordPress comments.
You can see this in action here on my own site. On the SFC 1.0 Photo Support post, you’ll find a comment at the bottom made by a user named “Kartsios Vasilis”. That comment wasn’t left here on this site, it was left on the Facebook story corresponding to that post. As you can see, the avatar for the user shows up on the comment, it’s styled differently (I felt the blue background sort of distinguished it), and it doesn’t have a reply link.
Since these aren’t “real” WP comments, and don’t live in the WP database, you can’t reply to them properly. So the reply link is automatically removed for them. I used a styling rule in the CSS to add the “This comment was originally made on Facebook, so replying to it here is not allowed.” message where the Reply link would normally be. Because this is just using a simple CSS style rule, you can make that message anything you like, or not have it at all. That’s up to you and your theme.
The new feature is relatively painless too. No configuration is needed. Every 6 hours (minimum), the plugin will retrieve the relevant comments from the Facebook posts, then store them as a transient. This reduces the amount of work since it doesn’t have to talk to Facebook every time. The comments are then integrated in with the normal comments for the post, and the comment count is updated to reflect the right number.
There’s still some minor detail work to be done.
Right now, for example, the comments are just added onto the end of the list of comments, and so they’re out of order. The final version will have the comments integrated in correctly by the date and time they were made. Edit: This is now working, comments are added in the proper order.If you want to use the beta version of SFC (currently marked as version 0.999) you can find it in the WordPress Plugins SVN repository.
Edit: The CSS to add this text, since people asked, is this:
li.comment.facebook .reply:before { content:"This comment was originally made on Facebook." }Simple, really.
Category: Code, Other | 21 Comments