Keep your traffic in the family! Host Twitter images on your own site, with support for comments and trackbacks, image resizing and thumbnailing with Lightbox.

Twitter doesn’t yet come with its own inline image support, so we tend to be limited to using image hosting services, and linking to them with short URLs. So, services like Twitpic host the image, and we direct traffic to them in return.

Better to take advantage of that traffic, and host images on your own site. This way, viewers come to your site, instead of someone else’s!

Posted images are displayed in your normal WordPress template, with support for comments and trackbacks, without any setup required. Most themes should work with this, but if not, or if a different layout is required, a custom theme template can also be provided (see ‘Creating a Template’).

Provides an HTML form for posting image content, as well as an API modelled on that of img.ly, compatible with Tweetie (for iPhone) and any other Twitter clients that speak this protocol and offer configuration of custom image hosting services.

Uses Twitter’s authentication and a list of authorised accounts, so you can let others use your image host too. You can even post status updates to Twitter while submitting images.

Provides a widget and shortcode to display uploaded images. This supports filtering by Twitter account, styling with CSS, and Lightbox/Thickbox.

Download

Download the plugin at WordPress’s plugin directory

If you like Twitter Image Host, please consider buying some awesome Mac/iPhone software. Then tell all your friends.

Installation

1. Unzip the package, and upload twitter-image-host to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Visit the settings page and add your Twitter account to the list of authorised accounts
4. Start submitting images – See the ‘Posting Images’ section for more

FAQ

I get “Couldn’t place uploaded file” messages

You probably need to create the folder in which Twitter Image Host stores uploaded images — it will try to create the folder automatically, but it will fail if it doesn’t have permission.

Create a folder called twitter-image-host-content within the wp-content folder of your WordPress installation, and make sure it has write permission for the web server user.

I keep getting 404 errors

Make sure your blog is using URL rewriting (i.e. your permalink structure is anything but the boring default ?p=###).

Widget

To use the widget, simply visit the Widgets page and drag the “Twitter Images” widget into a sidebar and configure it.

Shortcode

Shortcodes are snippets of text that can be inserted into pages and posts. These snippets are replaced by various generated content. Twitter Image Host provides a ‘twitter-images’ shortcode to display images you have uploaded within a page/post.

Available parameters:

Example (square brackets replaced by curly brackets):

  {twitter-images columns=4 lightbox="true"}

PHP function

As well as the shortcode, you can also use call twitter_image_host_images() from within a template to produce the same output. Pass the same arguments as the shortcode as associative array values:

<h3>Recently submitted images</h3>
<?php twitter_image_host_images(array('author' => 'ATastyPixel', 'columns' => 6, 'lightbox' => true)); ?>

Tip: Use this in the twitter-image-host.php template (see ‘Creating a Single Template’, below) to display other posted images when viewing an image. Use the_twitter_image_author() to filter the list, to show only other submissions by the same Twitter account as the one of the currently displayed image.

Template Tags

This plugin provides several template tags, for use both in displaying single posts (see ‘Creating a Single Template’), and for custom pages which display many posts in a loop (see ‘Using Template Tags in a Loop’).

The available template tags are:

Single Entry Tags

the_twitter_image_permalink

Returns the URL to the view page

the_twitter_image_url

Returns the full URL to the image, or the image thumbnail if the original image was large

the_twitter_full_image_url

Returns the URL to the full-sized image, if one exists, or false otherwise

the_twitter_image_title

The title of the image

the_twitter_image_date

The date (timestamp) of the image – use date() to configure the display

the_twitter_image_author

The associated Twitter account

the_twitter_image

Returns HTML to display the image and a link to the full-sized image if it exists, with Lightbox rel tags.

Loop Tags

query_twitter_images

Search for Twitter images

Available parameters (passed as associative array):

has_twitter_images

Use with loop: Determine if there are more images

next_twitter_image

Use with loop: Get the next image

Creating a Single Template

By default, this plugin will use the standard post template (‘single.php’). However, if you wish, you can create a custom template to display hosted images. The template should be called ‘twitter-image-host.php’, located within your current theme directory.

Creating a template to use this information is fairly straightforward if you have just a little knowledge of HTML or PHP:

• On your server (via an FTP program, etc.), navigate to your current theme. This will live within wp-content/themes.
• Copy an existing template – single.php is usually a good candidate – and call it twitter-image-host.php.
• Open up twitter_image_host.php, and delete everything that looks post-related: This usually includes everything between the have_posts call and the matching endif, and may include some other surrounding content like an ‘Edit this post’ link.
• Replace that which you have just deleted with something that uses the ‘single entry’ template tags above, like the following:

<?php echo the_twitter_image() ?>
<h1 class="center"><?php echo the_twitter_image_title() ?></h1>
<p class="center">
	From <a href="http://twitter.com/<?php echo the_twitter_image_author() ?>"><?php echo the_twitter_image_author() ?></a>
	 on <?php echo date('F jS, Y', the_twitter_image_date()) ?>
</p>

• Save the file, add some content (see the ‘Posting Images’ section), and see how it looks.

Using Template Tags in a Loop

Just like the WordPress Loop template tags, the template tags provided by this plugin can be used to display multiple posted entries. This can be used to create a custom page template that lists all submitted entries, with more flexibility than that offered by the shortcode.

Use begins with a call to query_twitter_images(), possibly with an argument to configure the search. If the result is true, then the loop begins, conditional upon has_twitter_images(), and starting with next_twitter_image() to load the next entry. The single template tags can then be used to customise the display of each entry.

Here is an example of use:

<?php if ( query_twitter_images() ) : ?>
    <?php while ( has_twitter_images() ) : next_twitter_image(); ?>
        <div class="item entry">
          <div class="itemhead">
            <h1><a href="<?php echo the_twitter_image_permalink() ?>" rel="bookmark"><?php echo the_twitter_image_title(); ?></a></h1>
            <div class="date"><?php echo date('F jS, Y', the_twitter_image_date()) ?></div>
          </div>
 
          <?php echo the_twitter_image() ?>
          <p class="center">From <a href="http://twitter.com/<?php echo the_twitter_image_author() ?>"><?php echo the_twitter_image_author() ?></a></p>
          </div>
    <?php endwhile; ?>
<?php else : ?>
    <p>There are no Twitter images.</p>
<?php endif; ?>

Posting Images

To start posting straight away, a simple form is provided at http://your-blog-url/twitter-image-host. Enter a title for your image, your Twitter account details, and select your image. Hit Submit, and you will be given the URL for the image.

To access this facility from an application, use the access point http://your-blog-url/twitter-image-host.

The API is more-or-less the same as that of TweetPic, img.ly, etc.

To post from Twitter (Tweetie 2) for iPhone, visit Twitter/Tweetie’s settings, and within Services, Image Service, select ‘Custom’, then enter http://your-blog.com/twitter-image-host/upload. Note that version 3.0.1 of Twitter has a bug that prevents it sending the username and password. For this version, you must use http://your-blog.com/twitter-image-host/upload?username=YourTwitterName&password=YourPassword, at your discretion. Version 0.5.7 of Twitter Image Host now supports this.

Automate it

For Mac users, an Automator service has been created to upload images by right-clicking on a file in Finder, then selecting a context menu item, if you are using Snow Leopard. This may still work for Leopard users, via the ‘Services’ menu.

Download it here: Send Image to Image Hosting Automator service

To use it:

1. Unzip
2. Double-click on ‘Send Image to Image Hosting’ to open it for editing

3. In the third panel down, change the ‘HOST’ value to the URL to your blog:

4. Save

5. In Finder, navigate to the ‘Library’ directory under your home folder. Create a folder called ‘Services’, if it doesn’t already exist, then drag ‘Send Image to Image Hosting’ into ‘Services’
6. Right-click on an image file, and you should see:

If not, you may need to log out and log back in first.

Making the URL even shorter

If you run WordPress from a sub-directory (for example, http://your-site.com/blog), then the short URLs generated by this plugin will look like http://your-site/blog/xxxxx. You can remove that ‘blog’ component via a little .htaccess trickery.

Here’s how:

1. Create and open a new file in your site’s webroot called “.htaccess”. If there’s one already there, just open that up and prepare to edit at the bottom.

2. Add the following, replacing ‘blog’ with the real subdirectory under which WordPress is installed:

   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_URI} ^/([^/]+)/?$
   RewriteCond %{DOCUMENT_ROOT}/blog/wp-content/twitter-image-host-content/%1.jpg -f [OR]
   RewriteCond %{DOCUMENT_ROOT}/blog/wp-content/twitter-image-host-content/%1.png -f [OR]
   RewriteCond %{DOCUMENT_ROOT}/blog/wp-content/twitter-image-host-content/%1.jpeg -f
   RewriteRule (.*) /blog/$1 [L]
   </IfModule>
   

   This will take any requests that:

   • Are located in the web-root (start with a slash, followed by anything but a slash until the end)
   • Have a corresponding file within Twitter Image Host’s content directory Then, it’ll rewrite the request silently to the real Twitter Image Host URL, without the viewer seeing.

3. In Twitter Image Host settings, set the ‘Override URL Prefix’ option to ‘http://your-site.com/’

Related posts

• Flickrpress: WordPress Flickr widget Flickrpress is a widget to display items from Flickr in...
• DIY Twitter image hosting Twitter doesn’t yet come with its own inline image support,...
• Twitter posting lists with images A Wordpress plugin to display recent Twitter updates, with images...
• Smart 404 for WordPress Save visitors to your Wordpress site from unhelpful 404 errors!...
• Adding Twinkle to Twitter posting lists A utility to display Twinkle images in Twitter posting lists,...