Blog

Twitter Image Host for WordPress

See the new version, Twitter Image Host 2, which stores images as actual WordPress posts, for more easy customisation and management. It can be run at the same time as Twitter Image Host, for easy migration.

Twitter image hostKeep 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:

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.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 from your WordPress blog, select the “Twitter Image Host” menu item from the “Posts” administration section. Enter a title for your image, select your image file, hit Submit, and you will be given the URL for the image. If you wish to tweet straight from this facility, you will need to follow the instructions from that page to set up the plugin.

To access this facility from an application, use the access point displayed on the Twitter Image Host options page under “Settings”.

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 the API URL as listed on the options page.

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/’

Tagged , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

177 Comments

  1. Posted July 7, 2011 at 12:39 pm | Permalink

    Great plugin. Been using it since the beginning. Just wondering if you are still doing support or any updates to the plugin. You really have something great here dude.

  2. Posted July 16, 2011 at 6:39 pm | Permalink

    Moin Michael, i install the plugin, i made the setting, checked the premissions, add the allowed twitter account … so fare so well.

    but i get the following error: There was an error posting the image: Invalid username or password

    I copy paste twitter-username and twitter-password to make sure that there is no typo. no way to post to twitter. Could you give me a hint please.

    kind regards walter

    btw. i use wp de version 3.2.1.

  3. Posted July 29, 2011 at 9:55 pm | Permalink

    This is Excellent. I’m going to adding this to my blog . Thank you so much for this post.

  4. Posted August 2, 2011 at 3:43 pm | Permalink

    Hi folks,

    I’ve finally updated the plugin! Version 0.6 is still in pre-release, but if you’d like to try it out, you can grab it here – Please let me know how it goes, and if you have any problems!

  5. Posted August 2, 2011 at 4:37 pm | Permalink

    Warning: Missing argument 1 for get_userdata(), called in /var/ … /httpdocs/wp-content/plugins/twitter-image-host/twitter-image-host.php on line 1115 and defined in /var/ … /wp-includes/pluggable.php on line 103

    any hint how i could fix that?

    kind regards walter

    • Posted August 2, 2011 at 5:19 pm | Permalink

      Oh! Well spotted – I’ve fixed it now – redownload from the same link in about 10-15 minutes when the server’s had a chance to refresh the file.

      • Posted August 3, 2011 at 9:42 am | Permalink

        when i try to ‘login’ to twitter from the twitter-image-host section

        username and password, i checked more than one time.

        do you need any other information?

        • Posted August 3, 2011 at 9:45 am | Permalink

          < rsp stat="fail" > < err code="1001" msg="Authentication error" />

        • Posted August 4, 2011 at 9:57 am | Permalink

          Hey Walter,

          Just to be sure, the login is a link that takes you to Twitter to authenticate, then back, right? Have you set up the plugin with an API key, and set it to read and write on Twitter.com?

  6. Posted August 4, 2011 at 10:21 am | Permalink

    hi michael,

    OAuth Consumer Key and Secret are set.

    Log in to Twitter to enable this feature. — (this link give the error message)

    at twitter account: Access level Read and write

    • Posted August 4, 2011 at 10:28 am | Permalink

      Oh!! Duh – I found the problem. I did a stupid ;-)

      Update again in 10-15 minutes, it should be fixed!

      Thanks heaps for helping test this thing!

  7. Posted August 4, 2011 at 11:36 am | Permalink

    Your image has been uploaded and the tweet has been posted. The URL is http:// … /jexng

    I would say, label it 1.0. from my side SignOff: 2011-08-04 ;) thx 4 your great work!

    regrads from germany walter

  8. Posted August 4, 2011 at 12:23 pm | Permalink

    http://bit.ly/psfAj0 wrote some words (in DE) about that plugin

  9. Posted August 4, 2011 at 8:03 pm | Permalink

    [twitter-images columns=4 lightbox="true"]

    ‘strange’ result, pls have a look at this

    thx walter

    • Posted August 4, 2011 at 8:05 pm | Permalink

      You seem to have “pre” and “code” blocks surrounding the shortcode tag, which is why you’re seeing odd rendering. Make sure your markup and your template are correct

      • Posted August 4, 2011 at 9:00 pm | Permalink

        idiot me ;) thx a lot for that hint!!

        walter

  10. Posted August 4, 2011 at 8:48 pm | Permalink

    btw. any plan to identi.ca as well as twitter? I’m sure plenty ppl. – especially from the ‘f(l)oss world’ prefer identi.ca.

    greetings from germany walter

    • Posted August 5, 2011 at 11:27 am | Permalink

      No identi.ca plans at this stage, I’m afraid Walter, although I’d happily accept code if someone were to give it a go.

  11. Posted August 5, 2011 at 11:45 am | Permalink

    I think – well php is not the thing i master – this package come with the ‘whole interface’ (api) for identi.ca.

    as i read/hear the interface of twitter and identi.ca are nearly same.

    greetings walter

  12. Logan Garcia
    Posted August 15, 2011 at 3:27 am | Permalink

    I love! Although, like TwitPic or yFrog, a picture thumbnail shows up in the Twitter for iOS app and on twitter.com. Do you know of a way to do this?

    • Posted August 15, 2011 at 9:41 am | Permalink

      Hey Logan – I’m afraid I don’t know any way to do this. It may be site-specific and hard-coded, but I don’t know for sure.

      • Posted August 17, 2011 at 4:06 am | Permalink

        Cool, thanks! I hope that isn’t the case, but I love the plugin!

  13. Posted August 30, 2011 at 5:55 am | Permalink

    Hello, I have the plugin installed.

    It works great for uploading from the iPhone to Twitter and the image is on the blog. Sweet!

    But when I try to login to Twitter via the blog Admin to attempt to post to Twitter from there, nothing happens. I click on “Log in to Twitter”, it takes me to Twitter, I login, it goes back to the site, but it still says “Log in to Twitter”.

    and what should the call back url be exactly, I am confused about that. thanks for any help!

    • Posted August 30, 2011 at 12:27 pm | Permalink

      Hi Michelle,

      I suspect it’s not working for you from the site because the callback URL isn’t set in your app preferences on Twitter – you’ll need to set it to whatever’s shown in the Twitter Image Host settings page (it’ll look like http://your-blog-domain.com/twitter-image-host).

      Cheers! Michael

      • Posted August 30, 2011 at 9:09 pm | Permalink

        That was it!

        I just didn’t quite understand that part. thank you!

  14. Rune
    Posted September 4, 2011 at 1:40 am | Permalink

    Hi!

    I’ve made a Norwegian translation. Feel free to use it if you want. You can get it from this link. This is a direct download link.

    Regards, Rune

    • Posted September 4, 2011 at 9:28 pm | Permalink

      Thanks heaps, Rune! I’ve added the translation.

  15. Posted September 4, 2011 at 11:25 pm | Permalink

    Hey,

    While trying to login to Twitter I received the following message:

    Fatal error: Cannot redeclare class OAuthException in /home1/sajornet/public_html/dominatusfinanzas/wp-content/plugins/twitter-image-host/lib/OAuth.php on line 8

    Any ideas?

    Keep up the good work

    • Posted September 5, 2011 at 9:30 am | Permalink

      Hey Oscar – it looks like another plugin is conflicting! Are you using any other plugins that use OAuth?

  16. Posted September 8, 2011 at 10:54 am | Permalink

    Hi Michael. Love the plugin & the fact that I’m not hosting my twitter images. Thank you!

    I have a support question I’m hoping you could help with: – I mostly post images to Twitter from my iPhone. Everything works as expected. – the Twitter Images widget has stopped updating new images in my sidebar

    Any idea why?

    Thanks, Eoin

    • Posted September 8, 2011 at 10:55 am | Permalink

      Typo! “…that I AM hosting my twitter images” :-)

    • Posted September 8, 2011 at 11:11 am | Permalink

      Cheers, Eoin!

      You’ve discovered the one downside to self-hosted Twitter images: The standard image display stuff (both on the Twitter website, in the Twitter apps, and in plugins) can’t recognise that URL as an image (because they’re used to the common services, like twitpic, etc).

      There is a widget included in the twitter image host plugin that displays recent tweeted images, but I’m not sure if it’d meet your needs.

  17. Posted September 8, 2011 at 11:43 am | Permalink

    Its interesting because when I first configured the plugin, it didn’t use the same API access point string as it does now. Previously, the URL that I used on my iPhone included my username & password (tsp tsp!) and that worked. Its since updating it that its changed.

    I’ll check out the widget included in the plugin.

    Thanks for your reply :-)

    • Posted September 8, 2011 at 11:45 am | Permalink

      Yep, that’s right, it’s different now that the widget’s authentication system has been updated.

  18. Posted September 8, 2011 at 2:04 pm | Permalink

    Tweetbot is a great t-i-h compatible iOS Twitter client too. I have been using it for months now and provides all the options to use t-i-h effectively.

    • Posted September 8, 2011 at 4:32 pm | Permalink

      Thanks Jonathan. The TB app looks nice but other than “providing all the options to use t-i-h” it doesn’t actually fix my problem, right?

  19. Posted September 10, 2011 at 2:59 am | Permalink

    H e l p.

    I cannot get the comments to be enabled.

    I created the twitter-image-host.php file, but when I post an image either from Twitter or from the Admin, it says, ‘comments closed’. How can I activate the comments for the Twitter image posts??

    I thought it might be the plug-in I’m using for comments, “Ajax Comments-Reply”, but I deactivated it and still nothing.

    Here is a sample post. http://theamybrenneman.com/notebook/5mdq0

    I would like the comments enabled.

    thank you!!

    • Posted September 10, 2011 at 9:01 am | Permalink

      Hey Michelle,

      I’m afraid comments aren’t supported! Previous versions had it as an option, but it never really worked properly (you never got comment notifications, for one thing), so I disabled it until I could find a way to support it.

      If you need a workaround, perhaps you could integrate a third-party comment system (like Disqus) into the twitter image host template?

      Cheers, Michael

  20. Posted September 22, 2011 at 7:44 am | Permalink

    Hello, I am trying to run this on http://p.jcol.es/ but no matter what I do it is always returning an internal server error to Twitter for iOS.

  21. Jack
    Posted October 15, 2011 at 2:19 am | Permalink

    Hi,

    I’ve been fiddling with this plugin, as it fits my needs perfectly and works better than some others out there, when I upload through the web.

    However, I’ve been trying to upload via mobile (Android instead of iOS, an in-beta app called Trumpet that allows for custom image services, and has worked with other plugins) and the image uploads successfully, and it posts successfully to Twitter, however the link that it gives to view the image always gives a ‘Page not found’ error.

    Everything works flawlessly when posting from the dashboard.

    Thanks!

    -Jack

  22. Posted October 25, 2011 at 8:40 am | Permalink

    Will the plugin work in a WP-install with Multisite enabled? I am getting “There was an error: Twitter authentication error” after setting it all up.

  23. Sevan Willam
    Posted December 4, 2011 at 2:01 pm | Permalink

    It would be really nice if you could post the tweeted image to an actual blog post category. (so that it shows up in the stream of my blog too)

  24. Posted December 8, 2011 at 8:07 pm | Permalink

    It looks like custom image services are no longer supported in the v4.0 iOS Twitter app. This is a major loss for those of us who redirect photos back to our own blogs…

  25. Posted December 8, 2011 at 9:01 pm | Permalink

    Yea, the iOS Twitter app has ben a moving target for several years now. The frequent updates to the app have broken things several time before, but this update just simply takes away the ability upload images to a custom server completely…

  26. Posted December 8, 2011 at 9:06 pm | Permalink

    And thanks for the nudge Tweetbot. I’ll give it a look-over:)

    • Posted December 8, 2011 at 9:10 pm | Permalink

      Tweetbot is awesome! I use it so I can use this for custom images (installed on http://p.jcol.es/ ) and Yourls (installed on http://jcol.es/ ) with my Twitter account. The UI is gorgeous as well!

    • Posted December 23, 2011 at 4:39 am | Permalink

      Got your awesome plugin working with tweetbot as well. goodbye twitter ios! Thanks for sharing the app!

  27. Posted January 31, 2012 at 10:22 pm | Permalink

    Can the image pop up within the twitter app like it does when using twitpic or will the image only open up within your website in a different browser?

  28. Posted June 3, 2012 at 10:16 am | Permalink

    Thanks for this great Plugin, it’s working well. Just one Problem: the Author’s Name (the_twitter_image_author()) will not be displayed!? Any idea how to fix this? Cheers, pEtEr

  29. Posted December 26, 2012 at 2:15 pm | Permalink

    Hi Michael,

    Since yesterday I’m using “Twitter Image Host” and I have on “simple” thing that I can’t get my head around. I would like to have my twitter message as “content” at to the photo instead of the “title”. I can’t find the line in the CSS where I can change this. Can you help me out on this?

    Thanks for making this, Daniel

    PS – I also really like “Loopy HD”

  30. Posted September 12, 2013 at 11:16 pm | Permalink

    Hi this plugin works great on the iPhone BUT I cant get the images to show up in a normal computer browser. This is a url for one of my images that views fine on my phone but will not show on my laptop or other computer. Any ideas why? http://www.plantphoto.com/wordpress/dg0mq

    Cheers Simon