Ben83 Comments on Using TimThumb Part 2: External Websites

Using TimThumb Part 2: External Websites


Of all the TimThumb feature requests the most popular are being able to crop an image from a specified location, and being able to load images from external websites. Resizing images from external images was added at the start of 2010 and seems to be working really well.

Like all things TimThumb I tried to make it as easy as possible to use the external images feature, however I had to keep security in mind. Opening up external resizing would potentially open up the opportunity to inject code onto peoples websites. My solution to this was to restrict the sites that have resizable images to a select few.

By default TimThumb can resize images hosted on flickr.com, picasa.com, blogger.com, wordpress.com, and img.youtube.com. In my experience these are the sites people request to be able to resize from the most (actually Flickr is the most popular – I thought the others might be useful).

If you want to change this list yourself you will need to open up timthumb.php in your favorite text editor (notepad is fine) then find and update the $allowedSites array.

Usage

Usage for this feature is nice and easy. You use the same commands as you would when resizing any other image. Just specify the src parameter as mentioned in the Getting Started with TimThumb article and you will be golden.

Potential Problems

There are two areas where there could be problems with offsite image resizing.

  1. Folder Permissions. Accessing the external images can be slow so they are stored in the cache directory setup in getting started article. For this to work the ‘cache’ directory must be created in the same directory as timthumb.php and it must have it’s file permissions set to 775.
  2. Allowed Site Restrictions. As I mentioned earlier in this article there is a list of websites inside the TimThumb script and if you are trying to resize an image that is not on an allowed domain then it simply won’t work.

Demo

Not really sure a demo is needed for this but I made one anyway 🙂 – check it out the TimThumb External Image Resizing on the demo site.

Posted in: TimThumb Web Design

Ben

Ben is a lifelong Nintendo fan who likes to build websites, and make video games. He buys way too much Lego.

83 thoughts on “Using TimThumb Part 2: External Websites” Leave a comment ›

  1. This looks like it could be really useful for an export from an old site I’m doing, where the images aren’t part of the export, but the urls are. Once the old site goes down, will the cached version be enough, or does this still rely on the original image being present?

    Reply

    1. The temp files (for external sites) are kept indefinitely I think. The cache files (for resized images) get refreshed, but as far as I can remember that doesn’t happen for the external files.

      Reply

    1. Thanks for the link however I’m not sure that article has a huge amount of helpful content in it. For starters the script is GPL – and secondly modifying the code for a theme is totally unnecessary and not recommended. If there are updates to the script then you will need to make those changes again. Currently I am releasing updates quite regularly so this could become quite a problem.

      Reply

  6. I’m having problems pulling images from media.tumblr.com. I’ve added it to the $allowedSites array, and tried hunting down the relevant code in the Cross Domain version, but to no avail.

    Is this an issue with accessing tumblr by curl? or am I missing something.

    Reply

  7. Well, you have to check if there is any TEMP directory in …/wp-content/themes/”your theme”/ (where “timthumb.php” file is located). If not, you have to create it and set permissions to 755. 😉 (example: “…/wp-content/themes/obscrure/temp/”)

    Reply

  8. Hi Ben!
    I am using TimThumb with Mimbo free theme for WordPress. I have tried everything (updated to 0777, created the temp folder…) but still not able to see images from external URLs in homepage. I updated the theme’s timthumb with the latest code (which includes the allowed servers) but it didn’t work either… actually, it did not even show the pictures I have uploaded to my server. So I had to reverse to Darren’s version. I have read all the threads open about this known issue but I am a bit confused about the solution… is there any new recipe around to fix it? Having to upload all the pics to the server will be a big issue in my case 🙁
    thxs
    maria

    Reply

    1. This isn’t a known issue. It’s probably just one tiny thing wrong with your setup. I am actually in the middle of writing a post on common problems with TimThumb, and how to solve them. It will be published in the next couple of days.

      Reply

      2. The problem is that people don’t know how to make the required changes. The code works fine so it’s not a technical issue I can solve with code. If you follow all of the instructions in the post above then it ‘should’ work.

    2. How did you do this? Where do i go to do this….whicj file and where in the code? I have recently migrated a bunch of blogs and they tt script isn’t firing the images.

      Reply

      1. You need to edit TimThumb.php – there are comments in the file that explain what to change (this is mentioned in the article above).

  9. The script allows you to define ALLOW_EXTERNAL which should allow any external domain to be used, but ALLOW_EXTERNAL does not appear to be referenced in the script.

    Change line 603

    if ($isAllowedSite) {

    to

    if ($isAllowedSite || ALLOW_EXTERNAL) {

    and all should work well

    Reply

    1. You’ve been reading the source code 🙂 I have been playing with the source and added that in but I haven’t actually added the code to make it work 🙂 To be honest I had forgotten I had added the define, so I shall make it all work in the next update.

      Reply

  10. Hi Ben,
    Thanks for the script, it’s great. Any possibility in allowing percentages for width and height anytime soon? Is that possible?
    That would be great for fluid layouts.

    Thanks again!
    Libby

    Reply

    1. Hi Libby. Unfortunately percentages is not technically possible. TimThumb needs to know a width and height to be able to scale the image. What you would need to do is to set the width and height of your image in the html. This is how any images would be resized on a web page.

      Reply

    1. Glad you like the script 🙂

      Default images are left up to your website to decide. All TimThumb does is resize the images in you give to it. If there’s nothing to send to it then don’t display it or give it your default image.

      Reply

    1. Not that I am aware of I’m afraid. Would need to have some sort of api, and that’s not really something I want to start building into TimThumb as that moves away from the simplicity of the script (ie – it resizes images)

      Reply

  13. Hi Ben,

    Is there any tweak that make the thumbnails show for both images that are hosted in my own domain and external source simultaneously? If yes, could you tell me how?

    I can have external images show up in the thumbnail, but then images hosted at my own domain is no longer showing in the thumbnail.

    Reply

    1. Hi – the information I posted above explains how to do this. If you are getting something different then you have modified the script incorrectly I’m afraid

      Reply

  14. Hi Ben,

    Thanks for the great script.

    I’ve been trying to use the script to generate thumbnails for images hosted on posterous.com. For some reason, the script failed to work. I guess the image URL provided by Posterous is not actually the real URL as my internet browser gets forwarded to another URL everytime I access an image URL from Posterous. Have you ever come across this issue?

    Thanks!

    Reply

    1. If you view a posterous image (right click, open image in new tab, or something like that) then it’s likely the image url will change. It looks like Posterous store their images on amazon s3/ cloudfront, so link to that, and make sure amazon is in the white list, and the resizing should work.

      Reply

      1. Thanks for the reply.

        Yes, I have put Amazon S3 (the proper URL) in the white list but it didn’t work. I got an error message saying ‘Invalid src mime type:’ when I tried to access the Timthumb-generated image URL.

        I also found out that there are some additional parameters in a Amazon-hosted image URL, e.g. AWSAccessKeyId, Expires, and Signature. Do you think these parameters prevent TimThumb from working? I tried to delete those parameters and access the image URL. I was forwarded to an XML page saying ‘Access denied.’

      3. This is an example:

        Posterous URL:
        http://posterous.com/getfile/files.posterous.com/jenrusso/2HewI75bDcQ16Gps6jaeXhLX8BCZ5m5vgdh4CZsxNoLeTkceF6FT1wIHvAqK/PastedGraphic-3.tiff.scaled.500.jpg

        Amazon S3 URL:
        http://s3.amazonaws.com/files.posterous.com/jenrusso/2HewI75bDcQ16Gps6jaeXhLX8BCZ5m5vgdh4CZsxNoLeTkceF6FT1wIHvAqK/PastedGraphic-3.tiff.scaled.500.jpg?AWSAccessKeyId=1C9REJR1EMRZ83Q7QRG2&Expires=1295996551&Signature=lcu0CYpgzjfzlMjMHO%2Fk2sWHxD4%3D

        As for the Amazon S3 URL, chances are that you can access it or that it will give you an XML error message saying that the request has expired (because it will have been a while since I post this message and the time you read it). You will then have to access the original Posterous URL to get new values for the parameters, i.e. AWSAccessKeyId, Expires, and Signature.

        Thanks a million.

      4. Ben, I replied to your previous comment the other day. Hopefully it didn’t get caught as spam.

        Thanks.

      5. Hi Hanna – it didn’t get caught in the spam, but it did require approval and I haven’t been online. I’ll take a look at the problem when I get a chance.

        For the time being I would recommend linking directly to the amazon s3 image rather than posterous. The script doesn’t follow forwards so won’t work properly. Once downloaded the amazon image will be cached on your website so you won’t need to access it again.

  15. Hello,

    after hours of research and try and error unfortunately I have to ask for help. Unfortunately I am not that familiar with PHP.

    I am using TimThumb with the MIMBO 3.0 theme – it works great with all pictures. Unfortunately I had to upgrade my server package so I try to optamize as much as possible so I decited to upload my pictures on a subdomain ‘images.my-website.com’. Since this change the thumbnails don’t work anymore.

    1. problem: the MIMBO Version of TT ist a lot different that the recent version. I tried to paste single lines and refresh but a lot of them disabled TT for all pictures.

    I added the lines in this article – I added the subdomain to the array but nothing changed.

    2. the generated path to the image looks like:

    /wp-content/themes/mimbo/scripts/timthumb.php?zc=1&w=70&h=140&src=/picture.jpg

    with massege: “/picture.jpg not found.”

    BUT when I edit it to:

    /wp-content/themes/mimbo/scripts/timthumb.php?zc=1&w=70&h=140&src=images/picture.jpg

    the thumbnail is shown correctly. I suppose the problem is than the subdomain ‘images’-part in ‘images.my-website.com’ has been ignored.

    What can I do to integrate the subdomain to the path – and how can I change it without make it my old pictures disappear?

    PS: as I moved from blogspot for a while a lot of my older pictures are hosted on picasa. They don’t show up eather. The same with imageshack.us.

    Thank you for your time!

    Reply

    1. I just replaced the MIMBO-Version with the new TimThumb-Version that you tweeted. All old pictures work this time. I am happy to use the newest version. But the new pictures with the subdomain still don’t appear.

      I right-clicked on the picture and received the error:

      Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(../../../../../CIMG2531-640×480.jpg) is not within the allowed path(s): (/www/htdocs/w00baad6/:/tmp:/usr/bin:/www/htdocs/w00baad6:/bin:/usr/local/bin:/usr/share/php) in /www/htdocs/w00baad6/wp-content/themes/mimbo/scripts/timthumb.php on line 763

      Warning: Cannot modify header information – headers already sent by (output started at /www/htdocs/w00baad6/wp-content/themes/mimbo/scripts/timthumb.php:763) in /www/htdocs/w00baad6/wp-content/themes/mimbo/scripts/timthumb.php on line 790

      file not found
      Query String : zc=1&w=70&h=140&src=/picture.jpg
      TimThumb version : 1.22

      Reply

      1. Glad the new version is working well for you 🙂

        Do you have a url I can look at so I can see the problem for myself?

      2. Sure,

        it’s http://www.magi-mania.de (if you don’t mind, maybe you can edit and remove afterwords).

        I left the article BEI INGLOT HAT MAN BLUT GELECKT (German) with the subdomain-thumbnail on the homepage. All newer ones I edited and changed the url (destination folder) so they show up correctly for the readers.

        Thanks a lot.

  17. Ben, Is there any code for thimbthum that make the thumbnails show for both images that are hosted in my own domain and external source simultaneously? If yes, could you tell me how?

    Reply

    1. Hi Vino – what you’re asking for is exactly what happens now. The thumbnails should work for your website and the sites mentioned in the allowed_sites array.

      Reply

  18. There is something wrong with validate_url regex function. It gives false positive results. For example: http://i.ytimg.com/vi/dMH0bHeiRNg/default.jpg

    This is the location of the thumbnail of a youtube video coming from API (Not like this: img.youtube.com/vi/dMH0bHeiRNg/0.jpg ). However, i.ytimg.com form gives a false positive “invalid url” error. The same is true for vimeo and dailymotion thumbnails.

    Why do we need a validate_url by the way? We will try to take it by curl (or file_get_contents) and if url is wrong we will get an error there already. I think this should not be an error. It should be an additional warning to display if curl gives an error also, like “error reading file from blabla. please check url: http://i.ytimg.com/vi/dMH0bHeiRNg/default.jpg“.

    Reply

    1. 🙂 I got what you mean. Thanks for the report. I must admit I googled for the regex. I shall see if I can find something better.

      Reply

  20. Although i am not as technical as Puck, I suspect i have the same issue.
    I am using the mshots ability of wordpress to get a preview thumb.

    From my frontpage code i get this:

    domain.com/wp-content/themes/themename/scripts/timthumb.php?src=http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.binarymoon.co.uk

    which results in:

    invalid url
    Query String : src=http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.binarymoon.co.uk
    TimThumb version : 1.25

    But, http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.binarymoon.co.uk is a valid and working url.

    So somewhere, something is going wrong 🙁

    Reply

    1. you can’t use mshots with TimThumb I am afraid. You can specify a width when you call the mshots function, but otherwise it’s not going to work 🙁

      Reply

  22. i managed to implement the regex from:
    http://daringfireball.net/2010/07/improved_regex_for_matching_urls

    and that seems to “validate” the ytimg.com images. certainly not checked extensively (i wouldn’t know how- regex loops like voodoo to me), but here is the new pattern:


    $pattern = '#(?i)\b((?:[a-z][\w-]+:(?:/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}/)(?:[^\s()]+|\(([^\s()]+|(\([^\s()]+\)))*\))+(?:\(([^\s()]+|(\([^\s()]+\)))*\)|[^\s`!()\[\]{};:\'".,?«»“”‘’]))#';

    however, i have to wonder if Puck isn’t right about the valid url check being redundant. if i mod the script to

    function validate_url ($url) {
    return true;
    }

    or i could probably have commented out the


    if (!validate_url ($src)) {
    display_error ('invalid url');
    }

    but since i was playing w/ the regex pattern I was in the area and went w/ the former. either way, essentially removing the URL validation-

    then i tried passing an improper URL and i get the error that the file wasn’t found… which makes sense as if you pass an invalid URL you aren’t likely to find the file!

    Reply

  23. Also getting a file not found error even when using the cat image you use in the demo. What would cause this?

    Reply

  25. Hi

    Thanks for the lovely script and writing such a nice Tutorial.

    I have a doubt and I want to share one of my weird experience.

    First My Doubt
    —————
    If we want to turn off Caching .. I do not think it really turns off. Though we have a option defined in start for that.

    My Weird Experience
    ——————–
    First of all it is confusing. At some places of your tutorial you say .. Create Cache and Temp file and have 777 permission on them, and at same place 775 permission. I gave 777 to temp and cache dirs on a linux server. (Though in all of your script i could not locate “temp” dir and its use. 😉 but i created temp dir just to be obedient to you)

    On going to

    http://www.myserver.com/tim/timthumb.php?src=http://farm3.static.flickr.com/2340/2089504883_863fb11b0a_z.jpg

    I was getting 403 Forbidden error.

    I then disabled the code of CURL so that script can use file_get_contents function . It did not helped me.

    //if (function_exists (‘curl_init’)) {
    if($skipthisstep == “yes”) {

    Then I added following line on top to see what input the script was getting
    if (isset($_GET[src]))
    $bensrc = $_GET[src];
    else
    $bensrc = “”;

    echo $bensrc;
    exit();

    I am very much surprised on the results that i saw.

    If i do this

    http://www.myserver.com/tim/timthumb.php?src=http://farm3
    The script echoes “http://farm3”

    http://www.myserver.com/tim/timthumb.php?src=http://farm3.
    The script echoes “http://farm3.”

    http://www.myserver.com/tim/timthumb.php?src=http://farm3.static
    I get 403 Forbidden error instead of any echo from script.

    It has nothing to do with your script as your script code even do not gets executed. This is what is happening to most people who are saying they are getting 403 Forbidden page error. This seems to be some weired server setting.

    This is most weird error i have seen. The GET variable is dying on a DOT .

    So i added urlencode along with str_replace of all dots in urls with a replaceable string (BENDOTT). And inside script i changed them back to dots.

    Now my code is like this.

    First lines after <?php

    if (isset($_GET[src])) {
    $bensrc = $_GET[src];
    $bensrc = str_replace(“BENDOTT”,”.”,$bensrc);
    } else
    $bensrc = “”;

    and a little below that look for

    $src = get_request (‘src’, ”);

    and comment it out and add $src = $bensrc; code

    // sort out image source
    //$src = get_request (‘src’, ”);

    $src = $bensrc;

    And WOW !! The code now works.

    Make sure the place where you call the code you urlencode the URL and also convert the dots .

    Ex: For a 300 width image at 80% Quality

    $flickrpath = “http://farm3.static.flickr.com/2340/2089504883_863fb11b0a_z.jpg”;
    $benurl = “300×300“;

    This way all dots will be converted to BENDOTT and when received by resize script they will be converted back getting you rid of 403 Forbidden error.

    I hope it helps someone.

    Regards
    BSMob.com Mobile Dev Team Member

    Reply

    1. Thanks for the pointers. I would always recommend people urlencode the paths as well, in fact I say so in the TimThumb tips and tricks article I wrote a few months ago.

      Regarding the temp directory, that’s no longer needed. If you’re using the latest version of the script, which it seems you are, then you can forget about that. I should update the tutorial to reflect this.

      Reply

  26. In the above post

    $benurl = “300×300”; is actually the HTML code that got executed here

    $flickrpath = “http://farm3.static.flickr.com/2340/2089504883_863fb11b0a_z.jpg”;
    $benurl = “<a href=\”/tim/timthumb.php?src=”.urlencode(str_replace(“.”,”BENDOTT”,$flickrpath)).”&w=300&q=80\”>300×300</a>”;

    Reply

  27. The script is working perfectly, even with many images on the same page (tested with 120 images). Still there is something missing!

    Is it possible to do html/css resizing when the external host is NOT in the $allowedSites ???

    In other words, i would like the TimThumb.php to ignore any image that is not allowed, and let css/html to do the resizing.

    Is it possible?
    Thanks in advance

    Reply

  28. It would be a nice addition for a future version though, to provide options for not-allowed images handling.

    another question:
    what can i do for image urls of this kind
    http://i533.photobucket.com/albums/ee337/quiqliquid/Labels/Key Music/folder-3.jpg
    there is blank space in the url, image is not parsed.

    even if i use
    http://i533.photobucket.com/albums/ee337/quiqliquid/Labels/Key%20Music/folder-3.jpg (%20 instead of space)
    again image is not parsed.

    is there a known solution for this?

    Reply

  29. Hi, i have one question.

    If you got add a post thumbnail in 3.2.1, and use the “From URL” option, there is no link to set the image specified as the thumbnail. You can only put it in the post. So can you fix this?

    Reply

  31. @Puck No.

    When i have to choose one thumbnail, the page have 3 tabs right?

    “From PC”
    “From URL”
    “From media”

    but i only can set one thumbnail from PC or from media, for other words i have to host the thumbnail on my server and i would like to know how can i fix this.

    My English is not very good. 😉

    Reply

  32. I would like to have any external webpage images loaded. Instead of having a whitelist, how do I allow all sites?

    Thanks

    Reply

  34. I’m having trouble trying to get the thumbnails to resize. I edited the timthumb.php to get the images to a 200×200 rather than the original thumbnail image size you added, but it stays the same. I changed the chmod and deleted the cached files, but nothing changes :\ Any help?

    Reply
  36. Pingback: TimThumb Troubleshooting Help and Tips

  37. Hi, noob question re allowing external sources. I get what I’m supposed to do, and where I’m supposed to do it, but I don’t know the proper syntax for HOW to add the external domain.

    How do I add the domain I want allowed below? BTW, the domain I want allowed is: http://rlv.zcache.com (it’s Zazzle)

    // If ALLOW_EXTERNAL is true and ALLOW_ALL_EXTERNAL_SITES is false, then external images will only be fetched from these domains and their subdomains.
    if(! isset($ALLOWED_SITES)){
    $ALLOWED_SITES = array ();
    }

    Thanks!

    Reply

  38. If you want to change this list yourself you will need to open up timthumb.php in your favorite text editor (notepad is fine) then find and update the $allowedSites array.

    Can you provide an example, because I don’t know how to modify this code.

    I have a gallery plugin that uses TimThumb, but it is failing. I’ve checked permissions on folders, but it might be because I’m behind a CDN, or not using “absolute paths”.

    I’m just trying to fix this, if I can.

    I read your article on TimThumb and CDNs, but I didn’t understand what to do, or even if I need to do anything.

    I use prettyphoto (does this deploy TimThumb?) and generally have no image problems. Just with this gallery plugin.

    Any help much appreciated.

    Reply

    1. I am afraid I don’t know what prettyphoto uses.

      The allowedSites array is at the top of the script however it’s no longer called allowedSites, it’s now labelled as $ALLOWED_SITES – just search through the code – it should be straight forward.

      Reply

  42. Awesome function! I’m using this to resize amazon Partnernet images that I retrieve over the API. Really easy! Thanks a bunch!

    Reply

  43. Hi. I am trying to help a friend: http://pedagogul.com/ His WP blog uses timthumb and it worked for local hosted pictures, but now he is posting pictures from external sites (picasaweb.google.com) and I can’t seem to make them appear on the homepage

    The error log says:
    [06-Aug-2012 17:34:01 UTC] TimThumb Debug line 1127 [0.000045 : 0.000000]: Starting new request from 5.13.71.112 to /wp-content/themes/mimbo/scripts/timthumb.php?zc=1&w=105&h=85&src=/-ElZ4SOP5Q4Y/UB5zhMTbgyI/AAAAAAAAADk/RTP-iCffKII/s128/pedagogo_gaze.jpg
    [06-Aug-2012 17:34:01 UTC] TimThumb Debug line 1127 [0.001420 : 0.001366]: Could not find the local image:

    My question is shouldn’t the src look like this: wp-content/themes/mimbo/scripts/timthumb.php?zc=1&w=105&h=85&src=https://lh6.googleusercontent.com/-ElZ4SOP5Q4Y/UB5zhMTbgyI/AAAAAAAAADk/RTP-iCffKII/s128/pedagogo_gaze.jpg ?? Why is the script shorting it? why is it cutting the first part, the domain..?

    Or am I looking the problem at a wrong angle? Thanks for any kind of help.

    Reply

    1. It’s the theme that is changing the image path – not the script. You’ll need to change how the theme manages the image thumbnails

      Reply

      1. Hi, thanks for the response. Any advice an how to do that? How to change the way the theme is managing thumbnails? thank you!

  44. I have an issue with accessing the absolue URL of the images generated by the timthumb.php. I was doing SEO on my website, when I found about 10, 400 BAD REQUEST errors. I took a look at the URL it was giving me for each one, this is an example one of them:

    http://927creative.com/wp-content/themes/kingsize/timthumb.php?src=http:/927creative.com/wp-content/uploads/2012/07/AudioSolutions.jpg&w=220&h=140&zc=1&q=100

    Now the error is obvious, in this url like all the other urls it is missing a backslash in the ?src=http:/“/” . Where in timthumb.php do I inset this backslash?

    Reply

    1. You need to edit the theme/ website content, not TimThumb. The image is wrong wherever the image path is set so you need to change the stored path.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Open Source Sustainability

Javascript VS. HTML & CSS