Home » working

Post Thumbnails and Arthemia

19 January 2010 337 views 19 Comments

Anybody who works with WordPress for very long will begin to hack around on their install in order to customize it to their liking. Trouble is, I can never quite remember what I did to get something working, and the next time I integrate a new theme, or a theme gets updated I have to re-remember my hacks. I wrote this one down so I could remember next time…

The excellent theme that I am using is called “Arthemia” designed by Michael Hutagalung. One of the cool new features of WordPress is the ability to attach a thumbnail to each post. Upon upload, the image is scaled, cropped, and optimized based on a variety of parameters that your theme establishes. This allows a single image to be used in a variety of sizes and formats as each post requires, perfect for a theme like Arthemia that has different size thumbnails that are called depending on the context in which the post is displayed. Unfortunately Arthemia was designed before this was possible in WordPress; it instead uses the TimThumb php script to crop and re-size the images for each post. TimThumb is pretty cool, but you have to add a custom field to each post which gets a little dreary…

So, following Mark Jaquith’s excellent tutorial, I hacked up the appropriate files in Arthemia and BAM! I have a much easier way to associate images with my posts. Finally, thanks to the cool Regenerate Thumbnails plugin by Viper007Bond, it is a snap to get all of your thumbnails re-sized as is needed should you ever switch themes, change thumbnail sizes, etc. A couple of warnings though, Viper007Bond’s plugin kept stalling out on me, it took a couple of times to get all the thumbnails converted. Also, and perhaps most important: I am not a coder. This works for me on my installation – your mileage may vary. So here you go, what I did to get the WordPress post_thumbnail function integrated into Arthemeia:

At line 40 of functions.php
add:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, hard crop mode
add_image_size( 'headline-thumbnail', 300, 275, true ); // headline category thumbnail size
add_image_size( 'featured-thumbnail', 100, 65, true ); // featured category thumbnail size
add_image_size( 'spoiler-thumbnail', 150, 150, true ); // spoiler category thumbnail size

Start on Line 15 of index.php

change:

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=275&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="300px" height="275px"  /></a>

to:

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_post_thumbnail( 'headline-thumbnail' ); ?></a>

Start on Line 33 in index.php

change:

<?php $values = get_post_custom_values("Image");
if (isset($values[0])) { ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
	<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=100&h=65&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="100px" height="65px"  /></a>
      <?php } ?>

To:

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
	<?php the_post_thumbnail( 'featured-thumbnail' ); ?></a>

Start on line 86 in index.php

change:

<?php	$values = get_post_custom_values("Image");
	if (isset($values[0])) { ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
	<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=150&h=150&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="150px" height="150px"  /></a>
      <?php } ?>

to:

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
	<?php the_post_thumbnail( 'spoiler-thumbnail' ); ?></a>

Start on line 36 in archive.php

change:

<?php	$values = get_post_custom_values("Image");
	if (isset($values[0])) { ?>
      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">	<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=150&h=150&zc=1&q=100"<br />alt="<?php the_title(); ?>" class="left" width="150px" height="150px"  /></a>
      <?php } ?>

to:

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
	<?php the_post_thumbnail( 'spoiler-thumbnail' ); ?></a>

finally, somewhere in your style.css add:

.attachment-headline-thumbnail {
	float:left;
}

.attachment-featured-thumbnail {
	float:left;
	}

.attachment-spoiler-thumbnail {	float:left;
	}

Let me know if this works for you, or if you have any better pointers – However I probably will not be able to help you much if it does not!

CODE EDITED: Turns out you don’t need all that php if/else blargity blargity, so I deleted it from the instructions above. You can use those arguments if you want to make your theme backwards compatible with all of the images that you have associated with a post using timthumb and custom fields, or if you want a generic image associated with a post that has no image.

19 Comments »

  • Miko Makela said:

    I’ve modified all the necessary code, but when i tried to access my homepage, i got this error:

    Parse error: syntax error, unexpected ‘}’ in /public_html/wp-content/themes/arthemia/index.php on line 70

    any clue what can cause this error???

    thanks!

    # 3 February 2010 at 6:45 pm
  • Rusty Smith (author) said:

    Miko Makela:
    Well, it is easy to say why, but harder to fix without seeing your actual code – like it says, you have somehow inserted an extra ‘}’ on line 70 of index.php

    Not sure what that would be doing floating around on line 70 of an out-of-the-box install of arthemia; my guess is that you have modified much more than that of the index file? Do you edit your files in the WordPress edit window, or do you (hopefully) use an external editor that gives you line numbers? If the latter, open your index,php, look at line 70, and see what you have there. My best guess without seeing it is that you have an extra < ?php } ?> inserted on line 70. If you do, delete it and see what happens…

    # 3 February 2010 at 7:12 pm
  • Mossack Anme said:

    Please see my blog, I don’t see any thumbnails after I follow the instructions in this post. Somebody help me.

    # 4 February 2010 at 7:14 am
  • Rusty Smith (author) said:

    Mossack Anme – this may be a silly question, but have you actually set an image as a thumbnail to a new post by using the “Post Thumbnail” interface, located directly below the “Category” interface in the edit post window? See image below:

    # 4 February 2010 at 10:09 am
  • Mossack Anme said:

    Yes, I use that Set Thumbnail facilities. I use WP 2.9.1, and I updated several php files in my theme like the instructions. If I click Set Thumbnail button, the USE AS THUMBNAIL button isn’t load in my Post Thumbnail facilities, I don’t see it in “From URL” tab. What’s happened? It’s only load in “Media” tab, not in “From URL” tab.

    Can I use an external image url as my post thumbnail without upload it into my server? I use free image hosting such as Photobucket etc. to host my images.

    # 4 February 2010 at 11:37 am
  • Rusty Smith (author) said:

    Massack Anme – no, to the best of my knowledge you cannot use external images as your post thumbnail using the new “the_post_thumbnail” function. You have to upload images to your own server. Upon upload, Wordpress immediately resizes the image correctly to all of the sizes you list in the functions.php file and stores them locally for use later by the “the_post_thumbnail” function.

    If you upload a file “from computer” when you are making a post, you should then have the following option when you select the image in the media browser:

    # 4 February 2010 at 2:28 pm
  • Mossack Anme said:

    Hmm…
    I use limited server space, so I need to use a minimal amount of filesize in my server.
    Do you know what the best way to compress an image without loosing too much image quality? I converts my pictures from *.jpg and *.png into *.gif but it’s not too significant.
    - If I use MediaLibrary, the function.php is converts the image with resize or crop? How each way works?
    - How about if I upload a an image that has width-height below the minimal width-height in function.php? What’s the consequences?

    # 4 February 2010 at 8:20 pm
  • Rusty Smith (author) said:

    Mossack Anme:
    I could be wrong, but I don’t think you can successfully use a theme like Arthemia with images stored remotely. The problem is that the theme uses 3 different sizes of thumbnails for each post. It uses a large square thumbnail for the headline article, a small rectangular thumbnail for the featured content, and a 150px square thumbnail for archived posts. These thumbnails are not generated dynamically; they are cropped and optimized when they are initially uploaded. It does not mean that it does not exist, but I do not know of an easy way for wordpress to grab an image stored remotely, and resize/crop it on the fly based on where/how that post is displayed. Based on the limitations of your server, I would recommend you use a different theme that only uses a single size thumbnail for each post no matter where/how it is displayed.

    Combined with such a theme, I suggest you also look into the Get the Image plugin.

    The media library function in wordpress resizes/crops versions of each image you upload based on the parameters you set in settings > media.

    For photographs you really should stick to .jpg or .png – .gif is really only better for line art/solid color images.

    # 4 February 2010 at 9:10 pm
  • Mossack Anme said:

    Ok. I’ll try it, but I fall in love with Arthemia. ^^

    Btw, thanks for your help!

    \(^o^)/

    # 4 February 2010 at 11:22 pm
  • Mossack Anme said:

    Hmm..one question again.. ^^

    What is the right CSS to get the post thumbnail placed “float left” and the excerpt is beside the thumbnail like this blog’s homepage?
    In my http://www.mossackanme.web.id/tutorial/ the excerpt placed below the thumbnail. What is the right CSS code?

    # 4 February 2010 at 11:30 pm
  • Rusty Smith (author) said:

    The way I do it using the_post_thumbnail function I had to add:

    .attachment-headline-thumbnail {
    float:left;
    }

    .attachment-featured-thumbnail {
    float:left;
    }

    .attachment-spoiler-thumbnail { float:left;
    }

    If you are using arthemia out of the box it should *just work* – and it looks like it is on your site – where are you having a problem?

    # 5 February 2010 at 12:34 pm
  • Mossack Anme said:

    I added margin-right code to get a distance between thumbnail and text in the right of thumbnail. So my CSS is:


    .attachment-headline-thumbnail {
    float:left;
    margin-right: 10px;
    }

    .attachment-featured-thumbnail {
    float:left;
    margin-right: 10px;
    }

    .attachment-spoiler-thumbnail {
    float:left;
    margin-right: 10px;
    }

    Can you visit my http://www.mossackanme.web.id/tutorial/ and capture it into a picture, and send it to me at mossack [dot] anme [at] gmail [dot]com, so I can see how my web works in another browser, computer, and country. Thanks before.

    Btw,,another question : What is the best way to get Featured post list become slideshow like Arthemia Premium? So, if I have more than 4 post in Featured category, my guest still see them.

    # 6 February 2010 at 9:29 pm
  • Joern said:

    thanks for the good work you did for all arthemia users having problems with timthumb.
    I used the links you show in your post to get more information about post thumbs in WordPress 2.9 and mixed all up in a new theme Aranovo2.

    @Mossak: the latest timthumb script can download and resize external images! This script is still being developed and much better now than the version you get with arthemia.

    anyway, I would go for the integrated WordPress features as explained here, it really works

    # 10 February 2010 at 10:45 am
  • Rusty Smith (author) said:

    Thanks Joern – nice job on Aranovo2. I think the real thing that would help Arthemia users is to work out the if/else stuff so that old posts could still use timthumb and new posts going forward could use the_post_thumbnail – that would help a lot of users transition their legacy stuff without a lot of work. It is on my list to try to work out, but just for fun – as all my posts are 100% post_thumbnail now…

    # 10 February 2010 at 4:41 pm
  • Charlie said:

    I am just experimenting with my first ever wordpress build. Your tips were spot on, thank you!!

    Have you got any recommendations for good plugins with this theme?

    # 11 February 2010 at 10:36 pm
  • Rusty Smith (author) said:

    Sure thing:

    Advanced Excerpt Plugin so you that you can control the length of the excerpts more explicitly. I did not like the length of the excerpts out of the box in Arthemia, especially in the archive section.
    Regenerate Thumbnails Plugin so that you can reload your existing thumbnails to the correct sizes, if you are upgrading Arthemia to use the_post_thumbnail function. After you run this one once, you can disable it.
    WP-PostViews Plugin Arthemia is pre-styled to use it.
    W3 Total Cache Plugin to speed up page loading
    WordPress Database Backup Plugin to make sure that you always have a daily backup of your data.
    WPtouch iPhone Theme Plugin for smart phone viewing – Arthemia can be a little “heavy” on portable devices. Plus, since you are now using the post_thumbnail function, posts look extra-nice

    There are others that I use, but those are the ones that I find essential for Arthemia.

    # 12 February 2010 at 9:18 am
  • Mary Hunter said:

    Thank you, thank you, thank you, thank you.

    And maybe again, thank you. :)

    I have spent more than 2 hours trying to get tinthumb (and various other plug-ins) to display thumbnails on a wp arthemia website I am making for a friend. with nothing but frustration.

    Your instructions were clear and concise and worked perfectly!

    Mary

    # 10 March 2010 at 12:40 am
  • Rusty Smith (author) said:

    No problem at all, Mary – I am glad to help!

    # 10 March 2010 at 1:25 am
  • Peter P said:

    You Sir are a GENIUS!!!!

    THANK YOU SO MUCH!

    # 17 March 2010 at 2:04 am

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.