Grow your CSS skills. Land your dream job.

WordPress Posts Image

  • # November 28, 2008 at 2:30 pm

    Hi All,

    I know Chris started to talk about this slightly in his last wordpress article but i was wondering if anyone could elaborate on it a little more or had any useful links, etc.

    I want to be able to add an image to the left hand side of my posts on the homepage but as yet haven’t figured out how to do it and also haven’t found any links for it.

    An example i’ve been looking is: http://www.psdtuts.com where they have the image on the left hand side of the posts preview.

    Any help would be really appreciated.

    Thanks in advance!

    # November 29, 2008 at 8:10 am

    This is done with Custom Fields. These can be a bit scary at first but here’s a bullet proof way if you’ve never done it before.

    Add this to your functions.php in your theme inside the php tags.

    Code:
    function get_custom_field($key, $echo = FALSE) {
    global $post;
    $custom_field = get_post_meta($post->ID, $key, true);
    if ($echo == FALSE) return $custom_field;
    echo $custom_field;
    }

    Now add this into your index.php where you want the image to be. Maybe just above <the_content>?I’m assuming they’re all going to be the same size, lets say 200x200px.

    Code:
    Post Thumb

    You’ll notice there’s no source for the image. We’re going to add this via a custom field called ‘frontImage’ in the post write page later.

    Add this code into src=" " attribute.

    Code:
    < ?php get_custom_field('frontImage', TRUE); ?>

    You should now see this.

    Code:
    # December 1, 2008 at 1:09 am

    Wow. that seems like a lot of work. I was wondering how they did that. there has got to be an easier way. Thanks for the post. I am going to bookmark it and give it a try when I am not tired.

    # December 1, 2008 at 9:51 am

    Hi Cybershot,

    Maybe it is a bit of a longer way. You can just use ‘the_meta()’ or ‘get_post_meta($post->ID, ‘key name’, true);’ which will bring in any post or page custom fields but they have to be ‘inside‘ the loop. Also using just ‘the_meta()’ requires HTML knowledge as the ‘value’ needs to be wrapped in some sort of tag! What if the client has none?

    Also using this you can display them anywhere ( sidebar, footer, header etc ). I’m currently building a company site which is not really a blog type site using wordpress as the CMS. Using this method in conjunction with the Custom Field Template plugin I can ad content to a Top Section, Left Content and Sidebar all from the same Page Editor. The client doesn’t need any HTML skills as the tags are in the theme ( like the above code ). They just see another write panel.

    I’ve just done this with the jQuery ‘Innerfade‘ plugin in the theme.

    In the Page editor you get three boxes each with it’s own image uploader. Upload the image, paste the url and that’s it. It also avoids the crappy image uploader ‘img class’ issue.

    The code in the theme looks like this.

    Code:
    • ” title=”” width=”600″ height=”180″ alt=”Fade Image”>
    • # December 1, 2008 at 2:09 pm

      Thanks for all this…..your first post worked brilliantly and was exactly what I needed!

      Thanks again! :D

    # August 3, 2009 at 8:12 am

    hey,
    just what I was looking for.. :)

    I have one question:
    When I insert images they either squeeze or stretches to fit the box. I’ve tried to add the overflow: hidden to the css

    Code:
    #content .exerpt img {
    height: 175px;
    width: 175px;
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    overflow: hidden;
    }

    but that didn’t work. What am I doing wrong?

    in advance, thanks for all help

    # August 3, 2009 at 9:53 am

    You need to resize the images, either using the wp thumbnail function or in your image editor before you upload them.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".