Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End WordPress Posts Image

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23674
    in4308
    Member

    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!

    #51596
    Toby Pitman
    Participant

    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:

    You should now see this.

    Code:
    #51716
    Toby Pitman
    Participant

    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:
    • #51713
    in4308
    Member

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

    Thanks again! :D

    #61695
    srface
    Member

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Back End’ is closed to new topics and replies.