WordPress.org

Ready to get started?Download WordPress

Forums

Single post page - text in Left Column, Images in Right? (8 posts)

  1. soluble
    Member
    Posted 3 years ago #

    Hi,
    I've been tearing my hair out, any help greatly appreciated.

    All i'm trying to do is filter my post content within the single post page so that the post text can be placed in a div in a left hand column & then post images be placed in a right hand column.

    I'm working on my localhost, so can't post my dev link, however, please see this example, which does exactly what I want to do: http://atelier6.co.uk/?p=1

    Thanks,
    Matt

  2. cryha1
    Member
    Posted 3 years ago #

    Hey ive also been trying to figure this out?! Any luck?

  3. spherical
    Member
    Posted 3 years ago #

    Generally, you specify two divs, one floated left and the other floated right, with their widths limited to be less than the total width of the available horizontal space.

    On that page, the text is in a div floated left:
    .si_info {width:290px margin-right:0; float:left}

    Title text is in a div inside that:
    .si_title {width:290px; margin:0 0 20px 0}

    Body Text is nested the same:
    .si_body {width:220px}

    Images are stacked in another div floated right:
    .si_pics {width:620px; float:right; margin-top:0}

    Limiting the width of the two parent divs: .si_info and .si_pics is what creates the two column layout. Then the other elements stay captured within them.

  4. soluble
    Member
    Posted 3 years ago #

    Hi Spherical,
    Thank you for your reply, sorry - I didn't explain myself very well. I've got the positioning divs & css sorted, my problem is that I don't know how to get the relevant bits of information from the post to appear in their appropriate areas on the page.

    I'm trying to work out what code I need to put within the index.php file to get the just the title & body text from the post to appear in the .si_info div & just the images from the post to load within the .si_pics div.

    PHP is not a strength of mine, however I think I need to alter the code in the theme that loads the content (shown below):

    ‘<?php
    if ($flg_img_extract) {
    $content = get_the_content();
    $content = apply_filters('the_content', $content);
    $content = adjust_single_image($content);
    echo $content;
    }
    else {
    the_content();
    }
    ?>‘

    I guess I need a separate filter for each element to then place the content in each div on the page?

  5. soluble
    Member
    Posted 3 years ago #

    Think I might have entered the code in the above post in the wrong format for the forum, here it is again...

    <?php
    if ($flg_img_extract) {
    $content = get_the_content();
    $content = apply_filters('the_content', $content);
    $content = adjust_single_image($content);
    echo $content;
    }
    else {
    the_content();
    }
    ?>
  6. spherical
    Member
    Posted 3 years ago #

    That should do it, yes.

  7. soluble
    Member
    Posted 3 years ago #

    That's the code which comes built in to the basic tanzaku theme when you download it. I'm trying to workout what I need to do to add to this to filter the text into one div & the images into another div.

  8. dotpress
    Member
    Posted 3 years ago #

    I've been successfully using the Page Columnist plugin:
    http://www.code-styling.de/english/development/wordpress-plugin-page-columnist-en
    It has many more options to organize the single page content.

Topic Closed

This topic has been closed to new replies.

About this Topic