banner ad
RSS
banner ad

How to Use Images/Photos With WP-Vybe and WordPress 2.6

August 06, 2008 | | Comments 19

A crucial part of any sexy, informative site is the use of images and/or photos … all the cool kids are doin it. Follow these few tips, and you’ll have one of the sweetest, WP-VVybe-driven sites on the block.

Understand How WordPress 2.6 Handles Images

Watch a 9 minute video demonstrating some of these features (in new window).

In previous versions of WordPress, many of the biggest complaints revolved around image handling. However, in WordPress 2.6, most – if not all – those complaints have been silenced.

In WordPress 2.6, whenever you upload a new image, 3 different versions of that image are created with various sizes:

  1. Full Size Version – Just as the name indicates, the size of this version is the size of the original image.
  2. Medium Size Version – The size of this version is based on the settings you enter in your WordPress control panel under the Settings >> Miscellaneous tab.
  3. Thumbnail Size Version – The size of this version is also set in your WP control panel.

Note: On the Settings >> Miscellaneous page, be sure your Thumbnail size dimensions and Medium size dimesnions are set to a reasonable level. The recommended Thumbnail dimensions are 150×150 or less. The recommended Medium dimensions are 300×250 or less.

In WordPress 2.6, you have 4 image alignment options:

  1. Alignment = None – You should probably never use this option.
  2. Alignment = Left – This option places your image to the left of the content.
  3. Alignment = Right – This option places your image to the right of the content.
  4. Alignment = Centered – This option centers the image on it’s own line with no text to the left or right.

In WordPress 2.6, image captions are automatic. Well, sorta. You just have to remember to add your caption to the Caption field located on the media upload screen (click thumbnail image located above).

How to Add Post Thumbnail Images and Featured Article Images to Your WP-Vybe Site

If you look at the home page of this site, you’ll see that each Featured Article has an image next to it. Likewise, all other posts below the featured articles have thumbnail images next to them.

To add these images to your posts, you have 2 options …

Option 1 – Use the “Get The Image” Plugin

This plugin, created by a savvy WordPress developer named Justin Tadlock, will greatly simplify the task of placing your post thumbnail images and Featured Article images right where they belong in your WP-Vybe-driven site.

Download the plugin here. Installation is pretty simple …

  1. Unzip the file.
  2. Upload get-the-image.php file to your wp-content/plugins folder.
  3. Activate the plugin on your Plugins page.

What this plugin will do:

1. It will look for any images that you’ve uploaded to your post.

2. If it finds one or more images, it will automatically place the 1st image where it belongs on your WP-Vybe-driven site. In other words, if you have marked your post as a Featured Article, it will display the medium version image. If your post appears in the normal flow of posts, it will place the thumbnail version image next to it.

Note 1: If you have uploaded multiple images to your post, it will use the #1 image as set in the gallery section of your media uploader (click thumbnail above).

Note 2: If you don’t want the image to appear in the post content, just don’t insert it into the post. The plugin will still grab the 1st image you’ve uploaded to the post and place it correctly.

3. If it does not find any images (because you didn’t upload any) for the post, no image will appear for that post in the Featured Article section. As for the post thumbnails, it will place a default thumbnail unless you have deactivated that feature on your WP-Vybe Theme Settings page.

Option 2 – Use Custom Fields

If, for whatever reason, you prefer not to use the plugin, you can simply use custom fields. With this method, you will need to scroll down to the Custom Fields section on the Write Post screen and fill in the appropriate data.

For post thumbnail images:

  • Key = post_thumbnail
  • Value = the URL for the image (get the image URL from the media uploader)

For Featured Article images:

  • Key = home_feature_photo
  • Value = the URL for the image (get the image URL from the media uploader)

Summary and Recommendations

1. Get very familiar with the media upload functionality available in WordPress 2.6

2. Always assign the proper alignment (left, right or center) for your image on the media upload screen.

3. On the Settings >> Miscellaneous page, be sure your Thumbnail size dimensions and Medium size dimensions are set to a reasonable level. The recommended Thumbnail dimensions are 150×150 or less. The recommended Medium dimensions are 300×250 or less.

4. Always assign the proper size for your image (thumbnail, medium or full size) on the media upload screen.

5. Install and activate the “Get the Image” plugin.

6. Use custom fields if you prefer not to use the plugin.

7. Decide whether to use a default post thumbnail when you don’t upload an image to your post. By default, the theme will use a default thumbnail. Visit your Theme Settings page to change the option.

Filed Under: Tutorials

Tags:

About the Author:

RSSComments (19)

Leave a Reply | Trackback URL

  1. Awesome Michael! This is such a good looking theme. I never thought I’d like pink so much!

  2. I got this to work but I have an odd border around my photo that is uneven. It can be seen here.

  3. Michael Pollock says:

    Joanne: try this:

    Open your Stylesheet (style.css) and find this code:

    .entry img {
    border:1px solid #ddd;
    padding:1px;
    background:#fff;
    float: right;
    clear: right;
    margin: 0 0 5px 10px;
            }

    Then delete it or comment it out like this:

    /* ----- .entry img {
    border:1px solid #ddd;
    padding:1px;
    background:#fff;
    float: right;
    clear: right;
    margin: 0 0 5px 10px;
            } ----- */

  4. Michael, could you please tell me what the color code is for the background of a post page in WP-VYBE? I want to match my Google Ads background exactly.

    Thanks in advance.

  5. Seth says:

    Love the design of this theme, id really like to purchase a developers licence i’ve just got 2 quick questions. Firstly would it be possible to place video in the Featured Article section instead of a picture?

    Secondly are there different homepage options? I really like homepage option 5 of your WP Magazine Theme 1.0 where it allows you to have 2 colums of posts. Is that easily adjustable?

    Thanks Seth

  6. cheri says:

    I used the getthisimage plug in and just specified a default image from my gallery of an open house sign but it is being replaced by a cactus picture from your site. How can I over-ride that?

    Also, the header image says that you can use a photo/logo up to 980 pxls but mine cuts it off at about 450

  7. Michael Pollock says:

    >>>>> I used the getthisimage plug in and just specified a default image from my gallery of an open house sign but it is being replaced by a cactus picture from your site. How can I over-ride that?

    1. In your WP control panel, click Design >> Theme Editor, and add this to the bottom of the Stylesheet (style.css) template:

    img.thumbnail { width:100px; height: 100px; }

    2. Then Update File

    3. Next, open the post-thumb.php file, and find this block of code at the top:

    <?php
    $defthumb = get_bloginfo('stylesheet_directory') . '/images/def-thumb.gif';
    if ( function_exists('get_the_image') && $wp_vybe_default_thumbs == 'yes' ) { ?>

    4. Delete that code and replace with this code:

    <?php global $options; foreach ($options as $value) { if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } } ?>

    <?php if ( $wp_vybe_default_thumb_url ) { ?>
    <?php $defthumb = $wp_vybe_default_thumb_url ?>
    <?php } else { ?>
    <?php $defthumb = get_bloginfo('stylesheet_directory') . '/images/def-thumb.gif'; ?>
    <?php } ?>

    <?php if ( function_exists('get_the_image') && $wp_vybe_default_thumbs == 'yes' ) { ?>

    5. Update File

    >>>>> Also, the header image says that you can use a photo/logo up to 980 pxls but mine cuts it off at about 450

    On the WP-Vybe Theme Settings page, you need to enter your Custom Image/Logo Width and Height. Be sure to enter it as the directions indicate (e.g. 300px).

  8. Jay says:

    Hi Michael,

    Jay Greene here. I was wondering about how the gravatars work. How do i create or simply add a custom avatar of my own so that it will appear in the “About the Author” box at the end of each post?

    Many thanks in advance.

  9. Dusty says:

    @Jay .. go to the Gravatar Website and setup a Gravatar.

  10. Michael Pollock says:

    Jay: You have to set up an account at http://www.gravatar.com, and upload your custom Gravatar there. When you set up your account, make sure you use the exact same email address as you are using in your WordPress User Profile. The theme is set up to pull your custom Gravatar from your gravatar.com account.

    Thanks Dusty!

  11. Dusty says:

    When I make a post for a category such as Daily Tips there is a default image I want to use just for that category. I’m finding that w/ each post I make and assign to the Daily Tips category that I have to upload the image again. Can I not choose the image I have already uploaded to the Media Libray for another Daily Tip category post? When I try doing this from the Media Library it will successfully insert an image into the post itself but it doesn’t display an image for the Post Topic. Any suggestions would be much appreciated.

    Thanks,
    Dusty

  12. J Scott says:

    Hi Michael,

    So far I like working with the theme. Couple of questions. One is the same as the second part of Dusty’s question above. When using an image from the media library. Also in the Featured category if I don’t insert the image into the post, just upload to the Gallery, gettheimage will show the image in the featured section but no image in the post view. If I upload to the Gallery and insert the image then both images show up in the featured view but only the inserted image in the post topic. See the home page

    Thanks
    J Scott

  13. Ray says:

    Hi. I am having trouble understanding the plugin getthisimage. I cannot use the media uploader on my site as it throws up this message

    “The uploaded file could not be moved to /var/www/vhosts/raystewart.biz/httpdocs/wp-content/uploads/2008/09.”

    I can ftp to that directory and the permissions are correct.

    I am not a programmer but the instructions to this plugin seem to need me to alter your coding on certain pages – or am I reading it wrong?

    Do you not supply a version of this theme, which I love by the way, that has the necessary code changes already in it for us non-techies – so that images can be controlled properly in this theme?

  14. Michael Pollock says:

    Ray:

    To use the Get the Image Plugin, you would need to upload the image via the wordpress uploader.

    Othewise, you’d have to use the custom field technique for adding images mentioned in the post.

    Based on your error message:

    > “The uploaded file could not be moved to
    > /var/www/vhosts/raystewart.biz/httpdocs/wp-content/uploads/2008/09.”

    You either have a file permissions issue or a server issue. See this post for more info and guidance:
    http://wordpress.org/support/topic/159248

  15. J Scott says:

    Hi Michael,

    Any suggestions on the problem outlined in my post above?

    Thanks

  16. Michael Pollock says:

    Hi J:

    Apologies for the late response. Your message got shuffled to the spam folder by mistake.

    As far as using images from the Image Library, the way the Get the Image plugin works, you can’t do that. You have to upload your image on each post. The only other option is to use the Custom Field technique outlined in the tutorial.

    For double images in the Featured Article area, you want to mkae sure you don’t place the code for the image within the Excerpt field (assuming you are using Post Excerpts). If you are using Post Content, you have to make sure you add the image to the post AFTER the <!--more--> tag.

    Best – Michael
    solostream.com

  17. Heidi says:

    Hello Michael – wow great theme! I may have missed it, but how do I add my picture in the “about the author” box?

    I don’t see where to load a pic in the user control panel..

    (sorry if I’m spacing it or this questions’ been answered already!)

  18. Alistair Barnett says:

    Hi Heidi,

    We’re glad that you like the theme.

    You have to set up an account at http://www.gravatar.com, and upload your custom Gravatar there. When you set up your account, make sure that you use the exact same email address as you are using in your WordPress User Profile.

    The theme is set up to pull your custom Gravatar from your gravatar.com account.

  19. Alistair Barnett says:

    Hi everyone,

    If you are looking for support, please visit our forum at http://www.solostream.com/forum/ for immediate answers to your support questions. Otherwise, there will be a delay in answering your support-related comment if left here.

    If this doesn’t apply to you, feel free to comment!

    Alistair

Leave a Reply

If you want a picture to show with your comment, go get a Gravatar.