WPGarage.com

New CSS for aligning images, block elements and captions

I was recently working on a WordPress site, and I just couldn’t get my images to left-align with the text so that the text would wrap around it. It was wrapping in the text editor in the admin, but on the front end the image stuck out of the top of the text.

Rebecca, our genius Web Project Manager at illuminea, did a search and discovered on the WordPress Codex that a bunch of new styles are needed in your style.php file in order to get the images to do what you want from WordPress version 2.5 and up. If you are using an older theme, you may not have these styles in your style sheet. The same classes are used to align images that have a caption (as of WordPress 2.6).

Here are the styles – you can just copy and paste them into your style.css file or wherever your CSS styles are located:

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

Posted in CSS | Tags: captions, Images, upgrades | 15 Comments »

Automatic thumbnail image resizing options

I manage a few blogs that use thumbnail images to spruce up the appearance of the site, and make it more enjoyable for readers. As we’ve discussed here in the past, an efficient method for adding thumbnails to your blog is with custom fields. But finding the right image, resizing it (ugh), uploading, etc., is such a pain in the neck that I often find myself not blogging because I can’t face it. On one of my blogs, I’ve just decided to post without the images, since I know it’s the only way I’ll ever publish anything.

So imagine my delight when I found the following two fantastic solutions: Justin Tadlock’s brilliant Get the Image WordPress plugin and Darren Hoyt’s TimThumb PHP Script. Both the plugin and the script take most of the annoying work out of inserting thumbnail images in your blog.

Justin Tadlock’s Get the Image plugin

This plugin works in three steps (as explained on Tadlock’s blog):

1. It activates a script that gets an image either by custom field input or post attachment.
2. Then it tells the script what the default image size should be. It tells the script to look for the WordPress-generated thumbnail if there are no custom field images found. You can use the values “thumbnail,” “medium,” or “full” for this (those are three image sizes WordPress generates).
3. If there are no images found, the script displays a default image found at “/wp-content/my-image.jpg.”

As Justin says, this has a lot of potential applications – you can use to for feature images, for displaying images in your sidebar, etc. He even offers to help users implement the plugin on their blogs if they ask in his forums.

Darren Hoyt’s Tim Thumb PHP Script

Hoyt originally created this script for use in his Mimbo Pro premium WordPress theme. To use it, you need to complete two steps:

1. Copy the source code into a new document called ‘timthumb.php’ and place it in a folder on your site (ex: /scripts/).
2. Call the source code from the place in your theme files where you want the resized image to appear as follows:
   <img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="" />

This script is more complicated than Tadlock’s plugin, and when I tried it I couldn’t get it to work. But many people are happily using it in their themes.

Talk about filling a need. If you want to include thumbnail images on your blog without the headache, this plugin or script is a must.

Get The Image WordPress Plugin

TimThumb PHP Script

Posted in Plugins | Tags: custom fields, Images, PHP | 6 Comments »

Great tips for finding and modifying images for your blog

Oak Innovations has a great guide to finding and editing images for use on your blog. The guide goes through copyright issues, licenses, and sources for finding images, and then introduces Picnik, an online image editor. Since reading this post, I’m hooked on Picnik. I used to open Photoshop just to resize images, but now I right-click on an image thanks to the handy-dandy Firefox Picnik addon, and do what I gotta do in Picnik.

Two Tips for Easily Finding and Processing Images for your Blog Posts by Oak Innovations Blog

Posted in Shorties | Tags: Images | No Comments »

Get rid of bandwidth image theft once and for all

Herself Webtools gives us the recipe for a .htaccess file that prevents hotlinking images on your site.

Get rid of bandwidth image theft once and for all

Posted in Shorties | Tags: Images, security | No Comments »

Changing where WordPress saves your uploaded images and files

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:

1. Go to Option > Miscellaneous in your WordPress admin
2. Under Store uploads in this folder, enter the file structure that you want. For example, wp-content/themes/themename/images.
3. 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.
4. 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.]

Posted in Tips | Tags: admin, file management, Images, uploads | 1 Comment »

Images, thumbnails and custom fields in WordPress

I’ve learned a lot about custom fields since I posted about programming thumbnails into your WordPress theme with custom fields, thanks to everyone’s comments here and on weblog tools collection, who referred to my post. I decided to collect all the links posted in the comments here so that we all have easy access:

Custom Fields + Images

• Lonewolf Online has a detailed tutorial about adding a string of thumbnail images to your post by inserting a comma-separated list of image URLs in a custom field called “pictures.”
• Gate 303 also explains how he used custom fields to add thumbnails to his posts. Check out his blog (or Blogg as he calls it) homepage to see how nice it looks – he has mini-thumbnails there, and bigger images in the single post page.
• Justin Tadlock wrote a whole series about using custom fields, which I’ve definitely got to take a closer look at when I have time, and one of these posts is about adding images with a custom field for greater flexibility.

Plugins + Images

• Don’t want to mess with your code and custom fields? Justin also created a plugin for WordPress theme designers that allows them to easily display their themes with thumbnails, description, and demo and download links.
• Yet Another Photoblog (YAPB) plugin takes your plain ol’ WP blog and extends it into a whopping photo blog with a ton of features, like easy image upload and on-the-fly thumbnail generation. I’ve never tried it, so if you have, I’d love to hear feedback.
• Photopress is another image management plugin that says it adds a pop-up uploader and a pop-up image browser to the posting page, a random image function for your template, and a simple album to display the photos you’ve uploaded.
• The Post Thumbs plugin claims it will also do the thumbnail thing for you. The reason I say claims is because I have a feeling I tried it out at some point without success. But maybe it will work for you.
• MIA Wordpress Plugin page is in Spanish (I think) so I don’t really know what it does, but after using Google Translator (thanks Ryan!) it seems that it places random images from your blog wherever you put the code in your template. It’s supposed to be a local FlickrRSS, I think.

Between custom fields and these plugins WordPress can really become a platform for eye-catching sites and blogs.

Posted in Plugins, Tips | Tags: custom fields, Images | 19 Comments »

Giving each WordPress post a thumbnail, and display the thumbnail on the home page

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:

1. Upload the plugin and activate it.
2. Go to Options > Uploads.
3. 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.
4. Enter the URI of the folder. It’s something like http://www.yoursite.com/wp-content/themes/themefolder/images.
5. You might as well up your maximum file size. I make it 500 kb.
6. Allowed file extensions: jpg, jpeg, gif, png, pdf – I add PDF and other types of files I think clients may want to upload.
7. Minimum level to upload: I leave it at 6 since I have no idea what this means.
8. Click Update Options.

That’s done. Now for how to create a post with a thumbnail image.

1. 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.
2. Go into the admin of your site. Click on Upload (it’s on the upper nav bar).
3. 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.
4. 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.
5. 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.
6. Enter the word Image (with a capital I) in the Key field.
7. In value, enter the exact name of the file you uploaded. For example picture.jpg or image.gif. Click Add Custom Field.
8. 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 »

Displaying Flickr images in sidebar or footer of WordPress blog

We were building a site where we wanted a strip of flickr images from a specific flickr group, or with specific tags, to show up in the footer, and to update automatically as new images became available on the flickr group or with those keywords.

The best solution seemed to be FlickrRSS, and we gave it a chance for a good few weeks. But it was very unstable – some days the pictures would show up, and some days they wouldn’t. We tried fiddling around with all the settings, but nothing seemed to work.

It became apparent that we needed another solution. After testing out a whole bunch of plugins, we discovered a simple way to display the flickr images in the way we wanted: the flickr badge!

Here’s how you do it:

1. Go to the main flickr badge page.
2. In Step 1, select An HTML Badge. Click on Next: Choose Photos.
3. In Step 2, select where you want the pictures to come from. The available options are: Yours, From a Group, Everyone’s. Let’s say you want the pictures to come From a Group. Select that, and in the drop-down box, select the group. You need to be a member of the group in order for it to appear there. Click Next: Layout.
4. In Step 3, you have the following options:
   1. Would you like to include the group icon & a link to the group? Select No.
   2. How many photos would you like to show? Select whatever number you want. We found 10 worked well across the width of our 940px wide site.
   3. Which ones? You can choose either Most recent, or A random selection.
   4. What size? You can choose Square, Thumbnail, or Mid-size. Select Square – it looks the nicest because it is even.
   5. Which orientation would you like? You can choose Vertical, Horizontal or None – None being where you wan to style the layout yourself. I chose Horizontal for displaying the photos in the footer. If you want to display them in a sidebar, you would probably select Vertical.
5. Click Next: Colors.
6. In Step 4, select the colors you want to appear in the background, border, links, and text. You can select to have No background, and No border. Click Next: Preview & Get Code.
7. Copy and paste the code into your WordPress template file.

You may need to style it a bit to match your theme, or get rid of some quirky things. For example, we got rid of the flickr.com link, added a blue border to each image that matches the blue on the site, and centered the whole thing with a div since it was skewed to the left.

Here’s the code with our changes (it may not be pretty, but it works):

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 3px solid #103B5A !important; margin: 0 5px;}
#flickr_www {display:block; padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<div align="center">
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="0" border="0"><tr><td><table cellpadding="0" cellspacing="0" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=10&display=latest&size=s&layout=h&context=in%2Fpool-israel%2F&source=group&group=73319449%40N00"></script>
</tr>
</table>
</td></tr></table></div>
<!-- End of Flickr Badge -->

Wanna see how it turned out? Check it out on our new site, israelplug - scroll down to the bottom where is says FlickrIsrael.

Posted in Tips | Tags: flickr, Images | 3 Comments »

TechSmith’s SnagIt now publishes directly to WordPress.com

For those of who aren’t familiar with it, SnagIt is an amazing screen capture tool with a slew of features. The creators of SnagIt, TechSmith, have now released their free SnagIt blogging-output accessories. According to their press release, “users can capture any image they see on their computer screens, add text, and post the images directly to their LiveJournal, TypePad, Moveable Type or WordPress.com blogs in just a few mouse clicks.”

The ability to quickly and easily post screen-captures and text to a blog is really useful. It’s just too bad that this only works with the hosted version of WordPress, and not with the self-hosted version. I know this is easy for me to say, but they should probably be able to develop an accessory that allows publishing of screen captures to self-hosted WordPress blogs by using the XML-RPC thingy that applications like Windows Live Writer uses to publish to blogs.

In the meantime, it’s a good start…

See a screencast of their blogging-output accessories in action»
SnagIt»
Download SnagIt’s free blogging accessory»

Posted in News & Views | Tags: Images | No Comments »

Make sure images aren’t too wide for your blog

If you insert an image in your post that is too wide for your blog layout, it will break the design. The iMax width plugin sets a maximum width for photos. This is useful for the following reasons:

1. It won’t allow you or other users to inadvertently break your blog design with photos that are too large.
2. By having consistently sized photos, your site gains points in aesthetics.

The plugin’s developer lists the following additional benefits of the plugin:

• Conserves bandwidth, server storage, and decreases load times.
• Reduces reader annoyances (keeps text from appearing to auto-scroll as images load in)
• Lightweight (does all processing on post save)

Wordpress Plugin – iMax Width>>

Posted in Plugins | Tags: Images, posts | No Comments »