Hi,

I know someone on here must have done something like this before so here I ask. I'm looking to style my posts as such:

Left 1/3 Right 2/3
Picture title, body, footer

I figured I could accomplish this using an image divide and then a 'body' divide, styling each with with CSS. Also, I'm assuming I can insert the image as a custom field using the url as the image address? But not 100% sure. I'm not a coder at all so was reaching out to see if someone in the forum has done something similar?

Thanks,
Gary

Originally Posted by gcarson

I'm looking to style my posts as such:

Left 1/3 Right 2/3
Picture title, body, footer

that didn't' come out like i had hoped! I meant was the left 1/3 of my post contain a full image and the right 2/3 of my post contain all the written information.

try

<div class="myfunkypost">
<table>
<colgroup><col class="col1" /><col class="col2" /></colgroup> 
<tr>
<td><img....></td>
<td>a bunch of text here</td>
</tr>
</table>
</div>

with a CSS insert

.col1 {width: 40%;}
.col2 {width: 60%;}

juggle.. Thank you. I am in the process of splitting it up into tables right now.. playing around with it. Have to make sure it only does it on posts and not on pages. Also, took me a while to figure out how to insert an email. I learned what a thumbnail is and how to insert that into a post.

I think after I'm done I'll post what I did as it might be useful for others. My trouble always is.. I know what I want to do but never know how to word my question in the correct 'lingo' to find the solution.

Got it to work. Took a little bit of messing around so I thought I would share. I'm sure this isn't the most efficient way to do it but it worked for me. Here goes.

So i wanted the thumbnail picture on the left and the post on the right. Here is my code for the loop:

<?php /* For SINGLE post pages if activated at ATO -> Next/Previous Navigation: */

bfa_next_previous_post_links('Top'); ?>

<?php /* Post Container starts here */



if ( function_exists('post_class') ) { ?>

<div <?php if ( is_page() ) { post_class('post'); } else { post_class("$odd_or_even"); } ?> id="post-<?php the_ID(); ?>">
<?php } else { ?>
<div class="<?php echo ( is_page() ? 'page ' : '' ) . $odd_or_even . ' post" id="post-'; the_ID(); ?>"> <?php } ?>

<?php if ( !is_page() ) { ?>
<table>
<colgroup><col class="postcol1" /><col class="postcol2" /></colgroup>
<tr>

<td align="center" valign="top">


<div class="Thumbnail"><img src="<?php $values = get_post_custom_values("Thumbnail"); echo $values[0]; ?>" alt="<?php the_title(); ?>" /></a></div>
</td>

<td align="left" valign="top">

<?php } ?>

<?php bfa_post_kicker('<div class="post-kicker">','</div>'); ?>
<?php bfa_post_headline('<div class="post-headline">','</div>'); ?>
<?php bfa_post_byline('<div class="post-byline">','</div>'); ?>
<?php bfa_post_bodycopy('<div class="post-bodycopy clearfix">','</div>'); ?>

<?php bfa_post_pagination('<p class="post-pagination"><strong>'.__('Pages:','atahualpa').'</strong>','</p>'); ?>

<?php bfa_post_footer('<div class="post-footer">','</div>'); ?>

<?php if ( !is_page() ) { ?>
</td>
</tr>
<?php } ?>

</div>

<?php if ( !is_page() ) { ?>
</table>
<?php } ?>
</div>
<!-- / Post -->

I had to put the !is_page() in command in a few times as i didn't want the thumbnail to appear on pages, just on posts. So anything that wasn't going to be on the pages, all the table information, was wrapped in that command.

My final step is to link the thumbnail to the post's tag. I'm trying to use this but can't get it quite working yet. Will be my final post when it works!

<a href="http://www.mysite.com/tag/'.$tag->slug.'" rel="tag">

So i hope this was helpful to anyone out there. I saw this on one site and it looked very slick. Although they only used this format for their multipost page and had it display normally on a single post.. so there probably will need to be a slight modification to this.

should also mention. To get the 'Thumbnail' to work. When adding a new post, create a custom field called 'Thumbnail' , or whatever you want, and add the exact url to the thumbnail. That's it!