Thursday, November 29th, 2007
In my previous post on using thumbnails with WordPress’ custom fields feature, I explained a way to change where WordPress saves images and files you upload from the Write Post/Page page. Generally, any images or files you upload while writing a post are saved on your server under wp-content/uploads in folders that are organized by month and year, i.e. wp-content/uploads/2007/03.
Uploading files on Write > Page in WordPress admin:
I explained that you could use a plugin called Filosofo Old-Style Upload Plugin to change where files are saved on your server.
Well, Ryan Hellyer pointed something out that I can’t believe I never noticed: you can change where and how files are saved in WordPress!
Many of you are probably saying “Duh!” But I really never noticed this, so please humor me.
To change where your uploaded files are saved on the server:
- Go to Option > Miscellaneous in your WordPress admin
- Under Store uploads in this folder, enter the file structure that you want. For example, wp-content/themes/themename/images.
- Where it says “Organize my uploads into month- and year-based folders”, you can unselect the check box so that all images will be saved in the one folder you specified in step 2.
- Click on Update Options to save your new setup.
I can’t really see any advantage to saving the images in folders according to year and date, so I would make this change right from the beginning of any WordPress blog.
[By the way, did you notice my snazzy new screenshots? Until now I've always hesitated to add screenshots because I was using a free but not-very-efficient screen capture tool. But now I'm using the free and amazing SnagIt from TechSmith. If you haven't heard, TechSmith is offering older versions of their SnagIt and Camtasia Studio software for free! If you want to upload to their most recent version, it's only half price once you've downloaded these older versions!
They are both so great, that you really should download them, even if you don't think you'll have any use for them right now. Go to Quick Online Tips for information on how to download and get the license keys.]
![[Slashdot]](http://slashdot.org/favicon.ico)
![[Digg]](http://digg.com/favicon.ico)
![[Reddit]](http://reddit.com/favicon.ico)
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif)
![[Facebook]](http://www.facebook.com/favicon.ico)
![[Technorati]](http://technorati.com/favicon.ico)
![[Google]](http://www.google.com/favicon.ico)
![[StumbleUpon]](http://www.stumbleupon.com/favicon.ico)
Posted in Tips | Tags: admin, file management, Images, uploads | 1 Comment »
Wednesday, November 21st, 2007
You may encounter situations where you need to automatically display a thumbnail or image of some kind that will link to posts. Here’s an example of this kind of situation: you want to display recent posts from a certain category on your home page, with a thumbnail for each post and maybe the title and an excerpt. Or, I recently had a client that had a box on their homepage for multimedia where they wanted an image to appear that would represent the latest post in the Media category and would link to that post. A link to this site is at the end of this post, so read on.
I found the solution in two amazing WordPress themes: Mimbo and The Morning After. They both use thumbnails on their home page, and they do it by using WordPress’ mysterious Custom Fields feature.
You need to be able to upload images to your server in order to do this. You can do this via FTP, but to make this as easy as possible for clients, I use the Filosofo Old-Style Upload Plugin which creates a link on your nav bar where you select files for uploading. But first you need to configure this plugin and select a folder where all uploads will be saved:
- Upload the plugin and activate it.
- Go to Options > Uploads.
- Enter your destination directory. I think the best is to use your images folder in your theme folder so that any images you upload will be in an easily portable place. So the path could be something like /home/server/public_html/wp-content/themes/themefolder/images. The plugin will suggest a path, and it is usually right.
- Enter the URI of the folder. It’s something like http://www.yoursite.com/wp-content/themes/themefolder/images.
- You might as well up your maximum file size. I make it 500 kb.
- Allowed file extensions: jpg, jpeg, gif, png, pdf – I add PDF and other types of files I think clients may want to upload.
- Minimum level to upload: I leave it at 6 since I have no idea what this means.
- Click Update Options.
That’s done. Now for how to create a post with a thumbnail image.
- Create an image for your post with the right width and height. The size of the image depends only on the design of your site and where it is going to appear.
- Go into the admin of your site. Click on Upload (it’s on the upper nav bar).
- Select the file you are uploading, select No Thanks so it won’t create a thumbnail, give it a description (that’s good for Google) and click Upload File.
- Once it’s uploaded it will show you the entire URL of the image. Note particularly the last part of the link where it says the name of your image, especially if there are any capitals in any part of the name. You will have to enter the exact file name in step 8.
- Go to Create Posts. Enter your post and title as you wish. Make sure to select the category you have selected as the one that will appear with the thumbnails. Now scroll all the way down to the bottom of the screen where it says Custom Fields. Click on the plus button to expand it.
- Enter the word Image (with a capital I) in the Key field.
- In value, enter the exact name of the file you uploaded. For example picture.jpg or image.gif. Click Add Custom Field.
- Save your post.
Now we need the code that will make this thumbnail appear where you want it to appear. Following is the code for having a thumbnail appear with the title underneath it. This code is adapted from the Mimbo theme, but the code in The Morning After is similar:
<?php
// this is where the Features module begins
query_posts('showposts=1&cat=199'); ?> //change the showposts number to the number of posts that you want to appear, and change cat=199 to your category number, which you can find out by going to Manage > Categories
<?php while (have_posts()) : the_post(); ?>
<div class="thumbnails"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php echo get_option('home'); ?>/wp-content/themes/themefolder/images/<?php
// this is where the custom field prints images for each Feature
$values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" /></a>
<p class="title"><a href="<?php the_permalink() ?>" rel="bookmark">
<?php
// this is where title of the Feature gets printed
the_title(); ?></a></p></div>
<?php endwhile; ?>
Wanna see an example? Check out this site, scroll to the bottom and look at the left-most column that is called Media. That image there is a thumbnail that was uploaded and entered in the Custom Field of the post it links to.
Update Nov. 27, 2007: This post got a lot of comments here, and on Weblog Tools Collection who referred to it. Lots of people gave more recommendations on how to manage thumbnails with custom fields and/or plugins, so I collected these tips into one post which you can see here: Images, thumbnails and custom fields in WordPress.
Posted in Code Snippets, Tips | Tags: custom fields, Images, posts, uploads | 162 Comments »
