WordPress Trick: Create A Google Viewer PDF Shortcode

Want your PDFs to view through Google Reader? Wrap it in a shortcode like this: [raw][pdf href="http://noscope.com/photostream/albums/various/no.pdf"]Link to a PDF[/pdf][/raw]. Drop the following in your functions.php:

function pdflink($attr, $content) {
	return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $attr['href'] . '">'.$content.'</a>';
}
add_shortcode('pdf', 'pdflink');

[Update]: Here’s an updated shortcode function which allows you to also embed PDFs using this syntax: [raw][pdf=http://noscope.com/photostream/albums/various/no.pdf]Link to a PDF[/pdf][/raw]. Note how it’s just a tad shorter, and you don’t have to remember the “href” parameter, though you can still use it.

function pdflink($attr, $content) {
	if ($attr['href']) {
		return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $attr['href'] . '">'.$content.'</a>';
	} else {
		$src = str_replace("=", "", $attr[0]);
		return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $src . '">'.$content.'</a>';
	}
}
add_shortcode('pdf', 'pdflink');

Also, here’s an example PDF link using the above code: [pdf href="http://noscope.com/photostream/albums/various/no.pdf"]Link to a PDF[/pdf].

WordPress Trick: Output Content In Two Columns Separated By <!–more–> Tag [Updated]

Need to split up your WordPress content in two columns without too much of a hassle? How about if you could do that by simply inserting the  to indicate where you want the split? Well that’s what you can do using this trick.

Replace the_content(); in your theme with this code. That probably means editing your themes “post loop” (usually in page.php, single.php or postloop.php):

$more = 0;
$content_1 = wpautop(do_shortcode(get_the_content('')));
$more = 1;
$content_2 = wpautop(do_shortcode(get_the_content('',true)));

// check if the more tag is used at all
if ($content_1 == $content_2) {
	echo $content_1;
} else {
	echo '
'
	. $content_1 .
	'
'
	. $content_2 .
	'

	';
}

Paste this in your themes style.css:

#column_one {
	float: left;
	width: 50%;
}
#column_two {
	float: right;
	width: 50%;
}

From now on you can use the “More” tag to switch your content into columns.

[Update]: Fixed problem with paragraphs.

Sliding Doors In WordPress

A default WordPress page menu is built like this:

'0', 'sort_column'=>'menu_order'));
?>

– which outputs a plain menu, <li><a href=" ... ">Menu Item</a></li> and so on.

If you want to use the sliding doors CSS technique, however, you need more markup. So do this:

]*)>\]*)>(.*?)\<\/a>@i', '
$3', wp_page_menu(array('echo'=>false,'depth'=>'0', 'sort_column'=>'menu_order')) );
?>

– which’ll output this a more CSS friendly markup: <li><a href=" ... "><span>Menu Item</span></a></li>.

WordPress 3

Work has started on version 3 of WordPress, and while I’m looking forward to custom post types (so I can build “Add News”, “Add Employee”, “Add Video” sections), the big news is the merge with WordPress Multi User. Rumors are, it’ll be renamed WordPress Multi Site.

Image Symlinks, quick bulk image upload for WordPress [Updated August 2011]

Image Symlinks is born of a desire to speed up and simplify WordPress post images, while retaining quality. Very briefly, it works like this:

Upload large source image
Use Symlink-image-button to insert image into post
Decide width and/or height of inserted image

How’s that different from using the built-in WordPress image upload and insertion mechanism? To put it shortly, step 2 and 3 have switched place. WordPress scales your images according to preset sizes when you upload, and doesn’t allow you to change those sizes without changing a global setting and uploading again. Image Symlinks creates the image cache on demand, and according to either a global setting, or individual image settings.

This is smarter than it sounds, and the reason for which I created Zenphoto Short-tags in the first place, so I’ve written about it at length before.

Features

Image Symlinks is powered by TimThumb, so some of its features are care of the great gentlemen Ben Gillbanks and Darren Hoyt. Symlink Images does the following:

Lets you use the built-in WordPress image uploader, but insert them via Symlink Images for extra scaling options
Decide on a custom upload directory, and get access to a custom and super userfriendly Symlinks image uploader
Easily browse your WordPress images or Symlinks-uploaded images and insert with one click (guaranteed to be faster than the bulky WordPress interface)
Cache is created on-demand, and tidied up automatically
Transparent PNGs keep their 24bit transparency when scaled

A lot more features are on the drawing board. Read on.

Built-in Image Uploader

Image Symlinks uses Uploadify to upload images. Upon upload, you can insert image directly, or you can go browse your repository.

Using the Symlinks uploader, you by-pass the WordPress database entirely and deal only with clean image files in one directory and cache files in a separate directory.

If you want your images to be saved in the WordPress media library, use the built-in WordPress uploader, but insert those images using Image Symlinks. That way you both get access to the new 2.9 crop and edit features, and Image Symlinks’ advanced cache and scaling features.

Options

Image Symlinks currently allows you to specify a default width and a default CSS class. The above image, for instance, has no CSS class (but you could specify “alignright” if you want your images right-aligned by default), and a default width of 600px.

Inherently Extensible

Since Image Symlinks built-in uploader by-passes the WordPress database, it allows you to easily combine your WordPress with your custom gallery CMS. Simply specify your custom upload directory to point to the gallery album folder and you’re all set. I’ve integrated Image Symlinks with ZenPhoto, for instance, so any image I upload is also added to my ZenPhoto photostream.

In addition to this, all images are auto-linked by default, pointing to their larger versions with a simple hyperlink. This is optimal for search engine optimization, and makes it super-easy to combine with a Lightbox solution.

How To

Simply upload and insert your image using the custom Image Symlinks media button. If you want to be manual, the syntax is:

[raw]
[/raw]

Upon activation of the plugin, you should make the cache directory writable by the webserver. By default, the built-in uploader is disabled, and you use Image Symlinks only to insert images. If you want to specify your own upload directory, that also has to be writable.

Download

Download Image Symlinks (currently beta) from the WordPress Repository

Future Features

Image Symlinks is currently a rather early release. I’m taking a page from Google and dogfeeding myself, using it on this blog. So far it’s super-snappy and very stable, but not quite feature-complete. Any feedback is welcome, but here’s what’s planned:

Image Symlinks should offer to create custom directories for you
Option and shortcode attribute to disable auto-linking
GUI for inserting more than one image at a time
GUI for adjusting width/height of inserted image
Shortcode attributes and GUI for cropping images
Gallery widget
Recent images widget

Aside from this, I’d like to simplify the whole installation process to the point at which it’s “activate and you’re done”.

Look for more features next year.

Updates

April 2010: Bulk insertion! The image insertion dialog no longer closes whenever you click to insert an image, but only tells you the image is now inserted. Much faster.
May 2011, 0.7: TimThumb has been updated, and the cache directory is now created automatically in the wp-content folder (provided it’s writable). This should make first installation, as well as subsequent updates way easier.
0.8: Large polish update. Plugin now translatable, and new beta shortcode: latestimages, which shows your last x images, like this:
0.8.5: Security fixes.

WordPress QuickTip: Pagination

For some websites, WordPress’ builtin pagination feature () is supremely useful. Storing here, as much for my own posterity as for yours, a few tricks to get it up and running.

Restore the “Nextpage” button in the Visual editor by adding the following to your functions.php:

/**
 * Restore Nextpage Visual Editor button
 */
add_filter('mce_buttons','nextpage');
function nextpage($btns) {
	$pos = array_search('wp_more', $btns, true);
	if ($pos !== false) {
		$temp_btns = array_slice($btns, 0, $pos+1);
		$temp_btns[] = 'wp_page';
		$btns = array_merge($temp_btns, array_slice($btns, $pos+1));
	}
	return $btns;
}

Convert the pagination to “next” and “prev” buttons by adding this to your WordPress “post loop”:

&after=

&next_or_number=next&nextpagelink='.__("Next").'&previouspagelink='.__("Previous").''); ?>

WordPress: Create Your Own YouTube Embed Code

I have yet to find a good way of embedding YouTube videos in WordPress posts. If you copy the embed code YouTube provides, it’ll work unless you switch to the visual editor which mangles such code. If you look for a plugin to help you with the embedding, you’re in for an experience less pleasant than not using the visual editor.

A future version of WordPress promises to change this and give us mediatags to properly embed things. Until then, I would suggest you avoid the plugin repository entirely and use this little code snippet to write your own little shortcode tag to do the trick:

/**
 * YouTube Shortcodes
 */
add_shortcode('youtube', 'insertYouTube');
add_shortcode('yt', 'insertYouTube');

// Insert YouTube function
function insertYouTube($attr) {

	// defaults
	if (!$attr['width']) {
		$yt_w = 500;
	} else {
		$yt_w = $attr['width'];
	}
	if (!$attr['height']) {
		$yt_h = 400;
	} else {
		$yt_h = $attr['height'];
	}

	$yt .= '';

	// output YT
	if ($attr['src']) {
		$yt_id = str_replace( "=" , "" , $attr['src'] ) ;
		$yt_id = str_replace( "http://www.youtube.com/watch?v" , "" , $yt_id ) ;
		$yt_id = str_replace( "https://www.youtube.com/watch?v" , "" , $yt_id ) ;
		$yt_id = str_replace( "http://youtube.com/watch?v" , "" , $yt_id ) ;
		$yt_id = str_replace( "https://youtube.com/watch?v" , "" , $yt_id ) ;
		$yt_id = split('&', $yt_id);
		$yt_id = $yt_id[0];

	} else if ($attr[0]) {

		$yt_id = str_replace( "=" , "" , $attr[0] ) ;
		$yt_id = str_replace( "http://www.youtube.com/watch?v" , "" , $yt_id ) ;
		$yt_id = str_replace( "https://www.youtube.com/watch?v" , "" , $yt_id ) ;
		$yt_id = str_replace( "http://youtube.com/watch?v" , "" , $yt_id ) ;
		$yt_id = str_replace( "https://youtube.com/watch?v" , "" , $yt_id ) ;
		$yt_id = split('&', $yt_id);
		$yt_id = $yt_id[0];

	}

	// output
	$yt .= '
    
	';

	$yt .= '';
	return $yt;

}

Syntax:

Dump the above in your themes functions.php file, or pluginify it. I’m releasing this code under a Creative Commons Attribution 3.0 Unported License.

An Alternative Way Of Posting Images To Your WordPress Blog Using Symbolic Links To Zenphoto Images

WordPress has image management features which makes uploading and inserting images easy. When it comes to resizing and cache management, however, WordPress falls short. WordPress works like this: you configure your media sizes in the “Media” section of WordPress. Once this is done, every image you upload to WordPress is resized into these predefined sizes and saved in the same folder as the uploaded image.

The shortcoming? If you decide you want to change the media settings down the road, the new sizes won’t affect previously uploaded images. If you want the new sizes reflected on your old posts and galleries, you have to delete each old image, one by one, post by post, and upload the source image anew. Because caching and resizing is done during the upload of each source image.

This is where Zenphoto comes in. Cached images are stored seperately in a cache folder, and images aren’t “inserted” anywhere, they’re simply linked. Meaning: if you change media settings, linked images will request a new image with the new sizes.

I built the Zenphoto Short-tags plugin to try and take these superior image management features with me to WordPress. To use the plugin, you have to have Zenphoto deployed to your webserver and instead of uploading images to WordPress, you have to upload images to Zenphoto. Using short-tags you then insert highly customizable image links in WordPress. With recent features of the plugin (just yesterday, I added a WordPress Media button) you can now do all the management you want to, directly in WordPress.

Notice the new ZP Media button.

By the way, the above image was inserted using this code: [zp src=”Shorttags_01.png” crop=”tl” height=”300″]. The crop parameter ensures the image isn’t scaled, and cropped to the top left corner. It takes its width from a media setting in the backend. The album folder is normally a required parameter, but it’s not filled in because the image happens to be in the default folder.

Once clicked, the new media button shows your most recent images from your Zenphoto gallery. If you simply click one of these images, the shorttag for showing the image is inserted.

You can also click the “Upload image to ZenPhoto” tab to get an at the moment rather inelegant view of the Zenphoto backend, which lets you upload right then and there.

The bottomline is, Zenphoto Short-tags and Zenphoto offers you a different way of posting images to your WordPress blog. It requires a different way of thinking, and there aren’t any previews of your images in your visual editor. On the flipside, tweaking the width, height and crop of your images can be done by simply changing the parameters and without uploading anew. Worth a shot?

← Older Newer →

Noscope

“Noscope” – v. without aim