Aug 23 2008

Tutorial: TimThumb Thumbnail Generation with Arthemia

Posted in Web Development

If you still have problems getting the thumbnail automatic generation working, please read this tutorial. I spent a lot of my time creating this tutorial, including screen shots for some significant steps, and adding narrative text to each image. Please consider reading the whole instruction again, again, and again because I found out that there is 90% possibility that you missed one spot and there are many occurrences one say that he/she did not missed anything but ended up saying “Ah, yeah, I forgot that one.” :D

The CHMOD 777

Upload and activate the Arthemia theme. Then, the first step is to make the scripts and cache folder writable. You can either try ’777′ writable or ’755′ writable. Some web hosting company prevent you making any folder ’777′ writable due to some security reasons. But, I suggest you to try with ’777′ writable first. I use FileZilla to do the FTP work because it is free and has a lot of features. To make the folders writable, simply right click the folder name and select ‘File Attributes’ and a dialog box will show up.

You can tick all the attributes there, consider it a finger exercise, or directly type 777 as the folder attribute. Do this to both scripts and cache folder.

You’re done with FTP work and may continue to the image uploading procedure.

Uploading an image

To upload image, you can use the built-in Add Image WP feature. In the post editing page, notice the Add media icons just below your post title and permalink. Click “Add Image” and an image uploading page will show up.

Upload any image that you like, preferably the properly sized one (for example: 300×300 pixel or bigger for Arthemia theme).

After the image is uploaded, you can see the image location from the ‘Link URL’ field. In this tutorial, it is: http://michaelhutagalung.com/wp-content/uploads/2008/08/1.jpg. Values may vary depending on your blog settings. One may have the time-structured folder while others may not. Copy that value but remember to get rid of your blog home page location. In my case, the final value will be wp-content/uploads/2008/08/1.jpg.

Then, close the image uploading page and you do not need to clik ‘Insert to Post’ button if you do not want to. When you’re back in the post editing page, scroll down until you find “Custom Fields”. Make a new Custom Field with “Image” as the key and the image location as the “Value”.

You’re done. Please note that there is no support provided for Arthemia Free. Support is only provided for Arthemia Premium. If you have any problem with Arthemia Premium, please submit a support ticket to http://colorlabsproject.com/support.

—

Whether you want to pass CCNA voice or interested in CCNA wireless, our CCNA security training contains everything you need for exam prep.

Short URL: http://jubel.co/kVJLgC

Comments and Reactions

What if you have your say?

Newer Comments →
  • http://www.michaeljubel.com Michael

    @Mike: try this:
    http://michaelhutagalung.com/forum/topic.php?id=3&page=2

    read my post, third from the top.

  • Mike

    the images are generated ( i can see them at the uploads folder) but nothing is shown in the homepage.

    yes I started with wp-content

  • http://www.michaeljubel.com Michael

    @balibuddy: thanks for the info. it’s quite a life-saver. :)

    @Sufi-sticate: the Full-Size/Medium/Thumbnail options have nothing to do with this. WordPress already has a feature to make thumbnails from images but this TimThumb script is not using nor related to that option.

    And I can see that TimThumb thumbnail is already working there. The headline post has its thumbnail showing now. And your next problem is why there are another 100×67-pixel thumbnails for all of your posts. are you using any plugin that auto-generates thumbnails? are you using any plugin that put thumbnails in excerpts? please deactivate that plugin. and, don’t delete anything from the index page because it has nothing to do with that file.

    @Mike: did you put the correct value in the field? Start with ‘wp-content’?

  • Mike

    I tried what you have said to fabrizo and the other one:
    here is the error message:

    //wp/wp-content/uploads/2008/09/1kreasons.png not found.

  • http://www.sufisticate.com Sufisticate

    Hi Michael:) again

    Okayyy! I got it to work. Only thing is I have this little 150×150 image showing in the headline article preview, next to the big image. It dawned on me that it was told to be there by the index page, so I looked for anything with 150×150 and found the code, but I did not want to delete anything without checking with you first, lest I screw things up.

    Please point out what it is I ought to be deleting.

    Many thanks! Many Many Thanks:)

  • http://www.sufisticate.com Sufisticate

    Hello Mochael Jubel!

    I am a fan of your work and have made a move to download your arthemia template.

    I have spent the last 6 or so hours trying to get the headline photo to show and I promise I have followed ur tutorial, as well as the advice in the forum and have harassed fellow acquaintances on how to do this, to no avail.

    So this is my last glimmer of hope. I truly hope you might be able to assist.

    I invite you to view my site. Perhaps you can see what it is I am not doing right.

    When I upload a photo, I tend to select full-size as opposed to thumbnail, but regardless it doesnt show up on the mainpage’s headline space.

    I have made sure the caps used in “Image” are correct as well as the “wp-content/2008/09/tetedemoine.jpg” path.

    I have also changed the writable access to the script folder and cache to 777 and then to 755 and still nothing.

    Please help Obi-Wan-Kenobi, you’re my only hope.

    Thanks:)

  • http://www.wisata-bali.com balibuddy

    there is a plugin can do that job, cek here http://weblogtoolscollection.com/

  • http://www.michaeljubel.com Michael

    @Andie:
    :)
    /wp-content/themes/arthemia/scripts/cache

  • http://smashingcook.com Andie Summerkiss

    Michael, ini theme yang sangat bagus.

    One question though. Might be a very dumb one. You said to set chmod to “777″ for “script” and “cache” folders. I can’t find “cache” folder. Where is it?

    I am now using MassivePress for the foodie site and would like very much to change to yours, but I have problem with it, even I have done all you said above – except the “cache” part. I had no problem with custom fields at MassivePress. So there must be something that I am doing wrong with your theme.

  • http://www.michaeljubel.com Michael

    @Fabrizio + Yoav: right-click the box that should contain the image and click View Image (in Firefox). There should be an error message. There we could start to analyze the problem.

  • Fabrizio

    no puedoooooooo :cry:

  • Yoav

    I have followed your instructions and no thumbnails are working. :(

  • http://www.michaeljubel.com Michael

    @vnSymbianblog: well, from the tutorial above you may see that pictures are uploaded via HTTP using WordPress built-in upload feature. Pictures are not uploaded via FTP. :)

    And you can’t have thumbnails generated from images that are not located in your web server. So, if abc.com is not your blog, you can’t have that. And if it is your blog, you’ll still need to get rid of the blog URL and start with ‘wp-content’.

  • http://vnsymbianblog.co.cc vnSymbianBlog

    Hi michaeljubel,

    This tutorial is good! But can we use pictures from other direct links to make thumbnails? Exp: http://www.abc.com/image.jpg instead of wp-content/uploads/2008/08/1.jpg.

    Because I have problem uploading my pictures to my host (I'm using free-host at byethost.com), I have to upload them manually by CuteFPT. My free-host provide just ONE FTP account so my blog's authors can't upload pictures manually to make thumbnail :(

    Thanks for creating such a great theme! I love it!

  • http://michaelhutagalung.com michaeljubel

    @Peter: well, i never even say that the theme works with WP MU. :)

    but, i hope this discussion will help.
    http://michaelhutagalung.com/forum/topic.php?id=63#post-249

    savesheep did some tweak to the theme and make the script work for WP MU. sorry i can’t be a big help because i never use WP MU.

  • http://e11.eko.org.pl Peter

    End, I’m using WPMU also. And I have a problem with thumbmails. Yes, i check everything You wrote. And I done everything. And It doesn’t work.

  • http://wadleighscholars.org Richie Rich

    Mas, aku dah coba, namun tetep ngak bisa. Kenapa ya? apakah harus download ulang kembali filenya?

  • http://michaelhutagalung.com michaeljubel

    @Richie Rich: udah coba ditimpa ulang semua file instalasi nya? Kayaknya file index.php nya broken. Coba klik kanan kotak yang seharusnya ada thumbnail nya, lalu pilih View Image (pakai Firefox). Lalu Anda akan dibawa ke halaman lokasi gambarnya berada. Liat di address bar, alamatnya salah. Contoh, untuk yang post jual beli paypal, alamatnya malahan begini:
    http://wadleighscholars.org/%E2%80%9D%E2%80%9Dalt=%22Jual

    pernah diedit2kah templatenya?

  • http://wadleighscholars.org Richie Rich

    Mas, tetep ngak bisa juga. Kenapa ya?

  • harry

    Here is the solution: edit timthumb.php go to line 284 replace: readfile ( $cache_file ); with echo file_get_contents( $cache_file ); hope this help (semoga bermanfaat) :razz:

  • http://robbysusanto.com The Dreamer

    Mantapp, seneng rasanya gambar-gambar tempat wisata kita jadi nampang di seluruh dunia, Nice Job Bro…

    Teruskan perjuanganmu, hajar tuh Adii, Mimbo, Woo, dll-nya hehehehe…

  • http://www.sheaallen.com Shea

    Hello,

    I’m dying to get this timthumb to work, I’m using WPMU and it isn’t liking it for some reason. I’ve followed everything step by step, but it never generates an image. I’m assuming it has something to do with the way WPMU configured my .htaccess file. Anyway, http://sheaallen.com/wp-content/themes/arthemia/scripts/timthumb.php?src=files/2008/08/143014w_sm.gif&w=300&h=275&zc=1&q=100

    My .htaccess file contains the following three lines which I think may be throwing it off:

    #uploaded files
    RewriteRule ^(.*/)?files/$ index.php [L]
    RewriteCond %{REQUEST_URI} !.*wp-content/plugins.*
    RewriteRule ^(.*/)?files/(.*) wp-content/blogs.php?file=$2 [L]

    If I move both the timthumb.php file AND the sample.gif out of the main wordpress folder, then it works no problem. Any suggestions?

    Thanks a lot for a great theme!!

  • http://michaeljubel.com michaeljubel

    @hening: gak bisa gitu. alamat blognya harus dipenggal karena domain awalnya itu udah masuk ke variabel $doc_root. silakan dibuka source code-nya. hehehe.. dan di tutorial mimbo juga dipenggal kok.

  • http://walkingwithaids.org Hning

    Sedikit share, di tutorial yang untuk mimbo, seharusnya kan nggak harus dipenggal dari “wp-content/uploads/…” d bisa, tapi kenapa ya nggak bisa???

    Aku juga ngelakuin persis seperti tutorialmu ini bro… Waktu itu bingung karena gambar g bisa nampil… Apa theme yang lain yang pake resizer juga seperti itu? Misal WOO Theme-lah…

  • aniec2

    Great Job!

Newer Comments →