Link to home
Create AccountLog in
Avatar of Pancake_Effect
Pancake_EffectFlag for United States of America

asked on

Wordpress Theme Developement

I am working on a template that displays all the featured images from recent posts on one page. And the images link to that particular post. So far I have got it to work and it looks like this:User generated image
As of now it stacks on top of one another but I would like to add php code similar to this: //settings
$column = 9;

so I can decide how many columns of images to display in a row.

This is my code so far:
 
  <?php
  
global $post;
$myposts = get_posts ();
foreach( $myposts as $post ) : setup_postdata($post); ?>

			<div class="post" id="post-<?php the_ID(); ?>">
				<h3 class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>



 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('feat_image'); ?></a>
<?php endforeach; ?>

Open in new window


Could someone add php to set columns in my code for me?
Avatar of PortletPaul
PortletPaul
Flag of Australia image

Just dropped in - sorry not a Wordpress guru - but I don't see from that code snippet where the image is provided (is it inside the_permalink() perhaps?)

Wouldn't this be a combination of .css as well as php logic?
both <div class="post" and <h3 class="title" will influence the presentation.

from what I can understand you would need another "for each" loop (e.g. for columns 1 to 9), however how is this to affect <div> positioning? This is unclear to me. Would you need different classes for each column? (unless you want to use a table?)

ps: nice screen already
Avatar of Pancake_Effect

ASKER

<?php the_post_thumbnail('feat_image'); ?> This is what provides the image, It's a featured image from each post. I've been trying to incorporate this piece of code in with no luck:

 
$c = 1; //init counter
$bpr = 3; //boxes per row
$args=array(
  'post_type' => 'post',
  'post_status' => 'publish',
  'posts_per_page' => -1,
  'caller_get_posts'=> 1
);

Open in new window


Tables could be an option too.
ASKER CERTIFIED SOLUTION
Avatar of dmgroom
dmgroom
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
You are an internet wizard thank you so much! didn't work at first and then closed a div so final code was:

                <?php
  
global $post;
$myposts = get_posts ();
$counter = 0;
foreach( $myposts as $post ) : setup_postdata($post); 
if ($counter == $column) {
	$counter = 0;
	$otherclass = " floatclearer";
} else {
	$otherclass ='';
}

?>

			<div class="floatleft <?php echo $otherclass;?> " id="post-<?php the_ID(); ?>">
				<span class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></span>

 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('feat_image'); ?></a>
  </div>
<?php 
$counter ++;
endforeach; ?>
                

Open in new window


and your css worked well to just to have it one place incase someone else would like it was:

.floatleft {
	float:left;
	height: 200px;
	width: 200px;
	
	margin:5px;
	background-color: #00CC99;
}
.floatclearer {
	clear:left;
}

Open in new window

so happy with how this worked!