Single post page – text in Left Column, Images in Right?

  • 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: https://atelier6.co.uk/?p=1

    Thanks,
    Matt

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

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

    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.

    Thread Starter soluble

    (@soluble)

    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?

    Thread Starter soluble

    (@soluble)

    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();
}
?>

    That should do it, yes.

    Thread Starter soluble

    (@soluble)

    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.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Single post page – text in Left Column, Images in Right?’ is closed to new replies.