Post Thumbnails and Arthemia
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.
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!
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…Please see my blog, I don’t see any thumbnails after I follow the instructions in this post. Somebody help me.
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:
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.
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:
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?
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.
Ok. I’ll try it, but I fall in love with Arthemia. ^^
Btw, thanks for your help!
\(^o^)/
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?
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?
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.
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
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…
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?
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.
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
No problem at all, Mary – I am glad to help!
You Sir are a GENIUS!!!!
THANK YOU SO MUCH!
Thanks for this.. one of the wordpress upgrades must have killed timthumbs or something as suddenly I was getting very erratic behaviour.
sometimes I would have to refresh the page a few times to get the thumbnails to show and internet explorer would requently not show that at all.
I made the changes here.. quickly ran through the last 50 or so posts and added new thumbs using the wordpress engine..
all working a treat
thanks again
andy
Mate, this post should be stickied all over the Internet, thanks a lot for your help. Worked like a charm (though at first I must’ve pasted something in a wrong place as I got an error similar to Miko’s; I repeated the procedure on a clean index.php and it worked nicely).
Cheers
@Andy Bird
@Halibutt:
No problem – happy to have it posted – glad it helped you both out. While my instructions are geared toward the arthemia theme – it looks like it is easy enough to figure out with others as well.
Just to confirm, I used it on Arthemia 2 Free edition and it worked like a charm. Combined with this Picasa plugin http://clyang.net/blog/2009/02/06/128 it makes uploading and using pics a no-brainer. In a matter of hours I added relevant pics to an 8 year old site. A huge upgrade to my older CMS-like skin (The Morning After) that needed the pics to be resized manually, manually uploaded and then manually inserted in the right custom fields. Thanks again.
BTW, another thing to note: if your site is using Lightbox Plus or any similar plugin, be sure to tell it not to fire on all possible pics it finds on the site, or else the thumbs on main page will not work properly.
thank you for yu tip, it is clearly easier to add the thumb.
unfortunately, my site don”t display the thumnail…
http://www.bubblzzz.com/f/
Do you have an idea of why?
Thanks in advance
No, no … I had changed the script by the same and not the new one you proposed ;-)
So that’s ok now!!!
it works perfectly!!!
Thanks a lot
Excellent hack/tutorial, thank you! I spent a few frustrating days trying to the Arthemia 2.0 Free to work with the author’s CHMOD and other tweaks, but nothing seemed to solve the problem. This definitely fixed the Headline and Featured thumbnail problem.
But…. Now, I am not getting a thumbnail in the actual post page. If I use WordPress’ “Insert into post” function, I (obviously) end up with two thumbnails in the Headline and Featured columns and one in the actual post.
Does it require some code added to Page Template(page.php) that will insert the thumbnail?
@Victor:
Are you using some plugin or special excerpt code that is allowing img tagged items o show up in your excerpts? I don’t think the generic wordpress excerpt code allows that by default? At any rate, I changed the Arthemia code to use the Advanced Excerpt Plugin because I did not like how the generic wordpress excerpt code handled the excerpts. The plugin allows you to have different lengths of excerpts for different parts of your site, you can use word count or letter count to determine the length of the excerpt, and you can decide what tags are displayed. For instance, I want anything that is href tagged to show up as a link, but I do not want to see images, so I just disallow the image tag. I really, really like the fine grained control this plugin gives this site.
Alternatively, I suppose you could could use the “the_post_thumbnail” code in your single.php file (this is the file that styles the single post page, not page.php). You simply would need to add the code just before the “php the_content” code, I think. You could of course even give this thumbnail a different size and css styling if you wish.
I still insert the image into the post the old fashioned way, as a hand full of my posts don’t have a thumbnail image to display though…
Let me know if either of those methods work for you?
@Rusty,
It turns out that I had installed Advanced Excerpt Plugin, but hadn’t set the options. By simply unchecking “img” under the “Keep markup” category, I now can get thumbnails on the Arthemia index page by the “Use as Thumbnail” option in “Add an image” and then get thumbnails on the single post page too by using the “Insert into Post” option.
So, everything is working perfectly now. Thank you for this great mod/hack, it takes a very good theme and turns it into a great one.
Victor
Great @Victor! Glad you got it fixed; I am happy that this solution worked for you as well.
Hello, I used your hack/tutorial and it worked very well! However, I’m have some questions:
I want to make posting an image in the single post as simple as possible for my clients, so I have them just use WP’s default “add image” button. But to get the thumbnail for the Featured/Headline sections, I then have to click on “Post Thumbnail” and then choose the previously uploaded image and click “Use as thumbnail.”
Now here’s the two big problems:
1) I can’t get the thumbnail to work in the Featured section unless I hit “Save all changes.” When I do this, it backs the lightbox back into the “media gallery” section so that my client will have to reselect the photo in order to choose “insert into post.”
2) If I do this in reverse and choose “insert into post” first, it will shut the lightbox completely then I’ll have to reopen the media gallery in order to post the thumbnail.
Is there a way to make this more streamline and automatic while using the Arthemia theme? Finally, do you have any suggestions for how I can have it that the image is *always* centered within the post w/o having the client click on the image or add html tags to center it?
I truly appreciate your help and looooove this tutorial!
Thank you so much! Arthemia is the best :-).
Hey, no problem – and damn, those are some big carp! ;-)
I think there is another small problem in Arthemia.
I use Excerpt to set the text in the feed.
I think there is not the possibility to add automatic thumb in the feed.
Am I correct?
Fabrizio
Just to throw a new problem at you… :)
I made these edits, but it still doesn’t work, maybe because I’ve uploaded to WordPress 3.0? This new version doesn’t have the “set thumbnail” feature any longer.
Hi BarbC – I have not tried it yet, but it should work just the same in 3.0. However the WordPress team have changed the terminology a bit – they have changed “set thumbnail” to “Featured Image.” I just upgraded to 3.0, so have not tried it yet with a new post, but it looks like it should work just the same…? I will give it a whirl this afternoon.
Hi! I have played a bit with my Arthemia footer.php, and now only the right box is dispalayed. (no middle+left).
Could anyone post the basic footer.php, so i could paste it?
Thanks,
Shai
Hi Shai – it is against the license to distribute individual files from the theme – but you can re-download the whole thing from here and just copy the bits you need – it is always good to have a backup!
hello Rusty! have you had any issues with the upgrade. I am on Arthemia too, just a bit skeptical at the moment to update to 3.0 — would love to hear if you have had any issues?! and how the set thumbnail / Featured Image thing worked out?
Thanks!
Fonda LaShay
Fonda – I only upgraded a couple of days ago myself, but everything seems to be in order with Arthemia. Yes, the “Featured Image” seems to work just fine.
Fabrizio – just realized I never responded. I am not sure – I have images show up in my feed because I actually embed images in my post as well – they are not displayed in the excerpt though, so you never see them any where I use the post-thumbnail function. I could see where your request would be really useful, however – maybe there is something you could do with the tutorial here?
Leave your response!
advertisement:
and another thing...
March 30, 2010 | 9:00 pm
A man goes to the brain clinic to get a fresh set of brains. At the front desk is a sign that says “Doctor Brains: $20 per ounce. Scientist Brains: $30 dollars per ounce. Architect Brains: $1000 per ounce.”
$1000 dollars per ounce!” the man exclaims, “Why are architect brains so expensive!?!”
“Because it takes a loooooot of architects to get an ounce of brains,” replies the receptionist.
March 27, 2010 | 8:59 pm
1) those that understand ternary.
2) those that don’t.
10) those scrambling for an Oxford English Dictionary.
March 26, 2010 | 10:29 pm
Q: Why don’t cannibals eat clowns?
March 23, 2010 | 11:41 pm
Q: What is brown and sticky?
blogs
links
what's cookin'
the daily mugshot
Most Viewed