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
- Unzip the package, and upload
twitter-image-hostto the/wp-content/plugins/directory - Activate the plugin through the ‘Plugins’ menu in WordPress
- Visit the settings page and add your Twitter account to the list of authorised accounts
- 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:
| count | Number of items to display |
| id | Single ID (eg ‘abcde’) of one image to display, or multiple IDs separated by commas (abcde,fghij) |
| view | Image thumbnail view: squares, proportional, large or custom |
| custom_thumbnail_width | Custom width for thumbnails, when ‘view’ is ‘custom’ |
| custom_thumbnail_height | Custom width for thumbnails, when ‘view’ is ‘custom’ |
| custom_thumbnail_crop | Whether to crop custom thumbnails |
| author | Comma-separated list of Twitter account names to limit results to |
| columns | Number of columns of images to display |
| lightbox | ‘true’ to use Lightbox/Thickbox |
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):
| count | Number of items to display |
| id | Single ID (eg ‘abcde’) of one image to display, or multiple IDs separated by commas (abcde,fghij) |
| author | Comma-separated list of Twitter account names to limit results to |
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.phpis usually a good candidate – and call ittwitter-image-host.php. - Open up
twitter_image_host.php, and delete everything that looks post-related: This usually includes everything between thehave_postscall and the matchingendif, 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 Tweetie 2 for iPhone, visit Tweetie’s settings, and within Services, Image Service, select ‘Custom’, then
enter http://your-blog.com/twitter-image-host/upload
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:
- Unzip
- Double-click on ‘Send Image to Image Hosting’ to open it for editing
In the third panel down, change the ‘HOST’ value to the URL to your blog:
Save
- 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’
- 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:
- 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.
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.
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,...
45 Comments
Using your 0.2 version of the plugin seems to break the post list display under ‘edit posts’
Yes, I’m afraid I introduced a bug in 0.2 that slipped through the net. I’ve just released 0.3 – it should be online within the next hour.
I followed your instructions but I can’t get it to post via Tweetie on the iPhone.
I’ve set my Tweetie settings to use custom service at http://mashablepete.com/twitter-image-host. I’ve also created a folder in http://mashablepete.com/wp-content/twitter-image-host-content with 777 permissions.
I’ve had similar problems with other self hosted twitpic plugins.
Any other suggestions?
Hi Pete; The new version should work now, and there’re now instructions above on how to make it work. You specify http://your-blog/twitter-image-host/upload as the access point, and all should be well.
Michael! It’s working! Woohoo! However my page is getting all kinds of garbled text with this plugin activated. Check it out here > http://mashablepete.com/2mty3 Any idea’s ?
Yeah, that one’s quite mysterious, but I’ve released a fix that should make WP shut up – Update and all should be well.
Awesome I’ve got it working now. I upgraded Wordpress and the plugin.
I’d like to be able to have a “twitpic” page on my site where all of these photos get loaded too. Ideally the most recently uploaded photo would be at the top and thumbnails of all previous photos would be listed underneath it.
Can you tell me how to do this or is this what you referring to in the “create a template” section below?
Ah, this I haven’t written support for yet. Gimme a little while, I’ll get back to you
This is now supported in Version 0.5 – see documentation above for info.
Any chances that this will eventually support older phones, sending images as attachments using SMS? I currently use MobyPic as it’s the only one that does this, but would love to keep the images on my own domain.
Sorry John, I didn’t quite get around to answering you on Twitter. I don’t plan to implement this at the moment – honestly, I’m not sure how I would, as it requires an SMS receiving facility. I’m afraid it’s in the too hard basket, at this point =)
Hi Michael, This is an awesome plugin, although I seem to be having this error:
Warning: Missing argument 2 for twitter_image_host_post_link() in /homepages/3/d288889545/htdocs/Teckem/project/TBQ/wp-content/plugins/twitter-image-host/twitter-image-host.php on line 370
Do you know why this could be occuring?
Hi Michael,
I just installed the plugin and love the idea. I am getting the same error as Teckam, though.
Thanks for your work on this..
Chris
You new uprgade works like a charm, thanks!
Anyone else having this problem, should no longer have this problem after upgrading the plugin. I changed nothing and the errors were gone!
I can also confirm that the update fixes the problem. Thanks.
love using this plugin. Hope that eventually other mobile twitter apps will have custom image settings. Are there any plans to add to this plugin ie. a profile page with the gallery? This plugin has lots of potential, thanks again.
Great! Yes indeed there are plans – in fact, if you’d like to be a guinea-pig, grab the latest development version that I’ve been working on this evening; I’ve added a widget and a shortcode function that display images that’ve been added.See the readme in there for more details: http://downloads.wordpress.org/plugin/twitter-image-host.zip
Doesn’t work…And template either.
Warning: array_filter() [function.array-filter]: The first argument should be an array in /home/saturno7/public_html/wp-content/plugins/twitter-image-host/twitter-image-host.php on line 527
sorry :(
I’m sorry to hear that! If you wouldn’t mind, try downloading this version in about 15-20 minutes and giving it a go: http://downloads.wordpress.org/plugin/twitter-image-host.zip
Everything works great! Thanks for this great plugin! I owe you a beer!
Awesome! Glad to hear it ;-)
Version 0.51 broke my installation. Now when I upload a picture from Tweetie 2, or try to click on one of the pictures in my blog sidebar it returns an error.
See that here..
http://www.crucialthought.com/dq4mq/
The error is:
Warning: include() [function.include]: Filename cannot be empty in wp-content/plugins/twitter-image-host/twitter-image-host.php on line 665
Warning: include() [function.include]: Failed opening ” for inclusion (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in wp-content/plugins/twitter-image-host/twitter-image-host.php on line 665
Thanks..
Chris
Hi Chris – it looks like there’s no ’single’ template in your Wordpress theme, which is why it’s having problems; I’ve released a fix that will fall back to the index.php template from the theme. Let me know if there are further problems.
Michael,
I am thoroughly impressed. It works like a charm.
Just a note, I installed the WP-Touch plugin to make the blog more iPhone friendly and when coupled with this plugin the load times for pics are reduced and it looks great.
I owe you a coffee (or drink of your choice).
Chris
Glad to hear it! That’s great.
If you (and any other satisfied customers!) feel like it, I’d appreciate a solid rating on the Wordpress themes directory (http://wordpress.org/extend/plugins/twitter-image-host); for some reason it’s getting – excuse my French – shat on currently with 1.5 stars. Weird =)
i installed everything correctly but everytime i attempt to upload from tweetie 2 i get an error message saying there was an error posting my message. any suggestions?? thanks again.
Hi AJ,
Here are a couple of things to try:
curl -F 'media=@path-to-an-image.jpg' -F title='Testing' -F username=your-username -F password=your-password http://your-site.com/twitter-image-host/uploadThat should return something that contains a
<mediaurl>http://your-site.com/abcde</mediaurl>string.If all of that still works, then the problem may lie with your iPhone’s internet connection, perhaps.
anything else i can try? i really appreciate your help.
btw, i own talkie, and talkie for mac and i love both!
Hi Michael,
When I go to my site’s page to upload (i.e. http://www.mysite.com/twitter-image-host) I get this error
Fatal error: Call to undefined function add_options_page() in /mypathtowordpress/wp-content/plugins/wp-contact-form/wp-contactform.php on line 182
Thoughts?
I see this works on a friend’s blog. Not sure what the issue is with mine.
Thanks..
Chris
Hi! I seem to have got it working, but… 1. installed and activated plugin 2. made a twitter-image-host.php based on single.php in theme folder 3. uploading with posting to twitter works 4. page opens and shows pic but: my logfiles tell me code 404 for every page call?
The plugin used to work fine, but since I upgraded i keep getting the following error message:
“Warning: md5_file() [function.md5-file]: Filename cannot be empty in /hermes/web03/b561/moo.crownmultimedia/blog/wp-content/plugins/twitter-image-host/twitter-image-host.php on line 277″
It posts a link to Twitter, but it is a link to the last image in my Twitter Image Gallery: http://crownmultimediaagency.com/photos
Any suggestions?
Thanks for all of your hard work, Carlos
Hi Carlos,
If the filename is empty, then the image upload has failed, and it should be reporting an error.
I’ve emailed an updated version to you that should report the error better (replace the existing file in wp-content/plugins/twitter-image-host with this), but something else is causing the upload to fail, and the failure happens outside the plugin.
How are you uploading the image? Via the web interface? Is anything reported in your webserver’s error log (if you have access to it)?
Cheers, Michael
I installed the updated PHP file…this time it says, “There was an error posting the image: No image provided
Try again:”
I am using the twitter-image-host interface and uploaded the file directly from my hard drive…not sure if I’m missing something simple??? It used to work before…
Hi Michael,
Any thoughts on my error?
Fatal error: Call to undefined function add_options_page() in /mypathtowordpress/wp-content/plugins/wp-contact-form/wp-contactform.php on line 182
Chris
Ah, I’m sorry Chris, I missed you!
What Wordpress version are you using? It sounds to me like it may be a tad outdated.
Hi Michael,
No, I’m using 2.9.2!
:)
Chris
Oh dear, it’s not that, then! I suggest you get in touch with the author of the troublesome plugin in question (WP Contact Form). Unless there’s something more weird going on, it’s not Twitter Image Host that’s causing the error.
I deactivated the Wp-Contact form plugin and got the correct page.
However, when I upload a pic, I get the same error reported by Carlos. My web host logs say
[Thu Feb 18 08:02:16 2010] [warn] RewriteCond: NoCase option for non-regex pattern ‘-f’ is not supported and will be ignored.
I suspect the permissions need to be changed in some folder to allow the world to write to it. Is this correct?
Also, how to prevent the world from using me as their twitpic? I want this for me only.
Thanks..
Chris
Hi, Tried the Terminal trick above & get curl: (26) failed creating formpost data
For info, I have wp installed in a subdirectory http://www.mysite.co.uk/blog/wp
I have set the content folder up as you suggest as well with permissions 777 Don’t get to see a post page when I navigate to http://www.mysite.com/blog/twitter-image-host or /upload
I know its me, but please help anyways!?
Thanks Martyn
Hi Martyn, Unless you’re using IIS too, make sure you have a custom permalink structure set up, not just the default ?p=###. This will enable URL rewriting, required for the plugin.
I installed this but cant work out why its not working? i cant visit the address as mentioned above (i assume mine should be http://lewisjuggins.co.uk/wordpress/twitter-image-host but nothing happens.
If i go directly to http://lewisjuggins.co.uk/wordpress/wp-content/plugins/twitter-image-host/form.inc.php it stops at the very first <?php call… so renders only upto:
html xmlns=
then stops… any ideas!??
Hi James, It looks like you’re using IIS – I’m afraid I have no idea how to support it, and thus I don’t =)
If you do figure it out, I’d love to know how, though. Sorry I can’t be more help.
ahh. care to point me in the right direction!? is it likely to be a rewrite issue somewhere? (i do have an re-write module so if thats poss the problem, i can try figure it out)
I’d say it’s probably a rewrite issue, yes – I’d try turning it on, and see if it works. I’m not quite sure if this plugin’s at all IIS compatible, but it’s worth a try. Good luck!
Thank you very much. Playing with it and it works great.
One problem though: Cannot seem to change the ‘image dimensions’ from the settings-menu. After saving there back to 500px