Support » Fixing WordPress » Separate post from image

  • i created a three column template. hoping it would look like this…

    column 1 = image(s)
    column 2 = description ( either the post or the excerpt ok )
    column 3 = other

    the problem, in column 1 the post follows image. is it possible to hide the post or move it to another div = column 2 ?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The answer is Yes it is possible.

    What you have provided is so sketchy no one can tell you how since it is different for every layout / theme. Are you able to post a URL? that is the best way


    I would approach this differently than you have. You are displaying the post twice, once in each column.

    I would display it once and combine the left and middle columns into one, then move the image part into the left half and the text in the right half on displaying it.

    This approach requires that the post width be at least 550 – the columns are defined within the post.

    With both the images and text in the same post, one approach is, within the post, wrap the images in a DIV that is the width of the left column, and float it left. Wrap the text in another div that is the width of the middle column and also float it left. That will cause the text to display to the right of the images.

    There are other positioning techniques that can be used if there are problems with that – position: absolute within a position:relative,
    however, the float: left is the simplest, so give that a try.

    You will need to manually add two div’s in each post needing this treatment on the HTML tab.

    Wrap the images in a div like
    <div class="post-images">
    ..... image code
    Wrap the text like
    <div class="post-text">
    ..... post text

    add to your stylesheet something like

    .post-images {
       width: 270px;
       float: left;
    .post-text {
       width: 270px;
       float: left;

    These are separate though identical because you will wind up styling the image box differently than the text box.

    Think that through and see if it works for you.


    1) what’s up there now = actually column one is the content and column two the excerpt ( using the excerpt reloaded tag for links, etc. in the excerpt ) .

    2) was able to achieve the look by deleting the words and leaving the image and putting all words in the excerpt option in admin. note: any link in the excerpt option shows up in the “social” icons.

    3) your approach will work. however, trying to avoid having to add the div info in the content menu as i won’t be only person adding content. but maybe it will be unavoidable.

    4) i believe the default for the excerpt is 120 words. don’t want the (more) to show up for longer excerpts. looking how to change the default to maybe 200.

    so not perfect but doable. and thanks for the help! any other ideas? 😉

    You could enter the image URL’s in a custom field rather than in the post, and have the theme template display the images in the left column.

    here is some code for handcrafting excerpts. You can change the # of words in the excerpt. You can eliminate or change the […] and add a
    read more link if you care to.

    You’d put the function below in functions.php – change 55 to however many words you want. In your template, instead of calling the_excerptor the_content, call
    <?php echo wp_trim_excerpt(get_the_content()); ?>

    function wp_trim_excerpt( $content )  {
        if ( " == $content )  {
            $text = get_the_content('');
            $text = strip_shortcodes( $content);
            $text = apply_filters('the_content', $content);
            $text = str_replace(']]>', ']]>', $content);
            $text = strip_tags($content);
            $excerpt_length = 55;
            $words = explode(' ', $content, $excerpt_length + 1);
            if (count($words) > $excerpt_length) {
               array_push($words, '[...]');
               $content = implode(' ', $words);
        return $content;

    you can replace this array_push($words, '[...]);
    with this if you wish
    array_push($words, '<a href="'.get_permalink().'">Read more...</a>');

    ok, i deleted the images in the post and added this code in column 1 =

    <img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" alt="" />

    and the image is there, not in the right position, but an image is there.

    my question is the url for “thumbnail.jpg” is in custom field and it displays. how do i write 2-3 urls in custom field so more than one photo displays? separate with a comma, semicolon ? or do i have to write another custom field = thumbnail-2 and insert the appropriate code in the template.

    hi – either way will work. one field is more flexible in that there are no limits to how many images you can have, but either will work.

    One way to use one field is to make them comma delimited (comma and a space after each image). In the template use the PHP explode() function to turn the comma delimited string into an array, then process that array to display the images. Although if there could ever be a comma in say the alt attribute use a different character than a comma as a separator.

    If you are having multiple people preparing these posts, you have to decide if you can count on them doing that the right way. For the non-technical multiple custom fields might be easier.

    I have been using a plugin called custom-field-template that lets you create data entry forms for custom fields, to make it easier to enter custom fields.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Separate post from image’ is closed to new replies.