Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialRaquel Rodrigues
2,876 PointsHow do I custom this list in PHP?
Hi everyone. I need to customize a list made of images so that they appear in a certain way. This list is from an internal page (content-causes.php) and the first 5 items will be displayed on the home page.
The code I have so far (in the content-causes) is this:
<?php
$num_posts = (is_front_page() ) ? 5 : -1;
$args = array(
'post_type' => 'Causes',
'orderby' => 'date',
'order' => 'ASC',
'posts_per_page' => $num_posts,
);
$query = new WP_Query ($args);
?>
<section class="row no-max pad">
<?php if( $query->have_posts()) : while($query->have_posts()) : $query->the_post(); ?>
<div class="medium-4 columns grid-item">
<ul>
<li>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
</li>
</ul>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
</section>
I believe the problem is in the highlighted section above.
In html it would be something like this:
<section class="row no-max pad">
<div class="medium-4 columns grid-item">
<ul>
<li><a href="#"><img src="1.png" alt=""></a></li>
<li><a href="#"><img src="2.png" alt=""></a></li>
</ul>
</div>
<div class="medium-4 columns grid-item">
<ul>
<li><a href="#"><img src="3.png" alt=""></a></li>
</ul>
</div>
<div class="medium-4 columns grid-item">
<ul>
<li><a href="#"><img src="4.png" alt=""></a></li>
<li><a href="#"><img src="5.png" alt=""></a></li>
</ul>
</div>
</section>
I'm not sure if anyone can understand what I need, but all help is welcome.
Thanks
3 Answers
udslwxmrlw
8,196 PointsHi!
You wont be able to achieve this using the loop, as the loop repeats the exact wrapped code for the amount of times you set "posts_per_page".
If your site wont ever need to show more than 5 images on the frontpage I'd try a more static approach. Your code would look like this e.g.
<section class="row no-max pad">
<!-- First Column -->
<div class="medium-4 columns grid-item">
<ul>
<li>
<a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
</li>
<li>
<a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
</li>
</ul>
</div>
<!-- Second Column -->
<div class="medium-4 columns grid-item">
<ul>
<li>
<a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
</li>
</ul>
</div>
<!-- Third Column -->
<div class="medium-4 columns grid-item">
<ul>
<li>
<a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
</li>
<li>
<a href="<?php the_permalink($post_id); ?>"><?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?></a>
</li>
</ul>
</div>
</section>
udslwxmrlw
8,196 Points<?php echo get_the_post_thumbnail( $post_id, array( 'class' => 'yourclass' ); ?>
$post_id -> Replace this with the ID of your corresponding post.
'yourclass' -> Replace with your classes for your images
The reason i'm using "get_the_post_thumbnail" instead of "the_post_thumbnail" is that first works outside the wordpress loop, where as second needs to be nested in the loop.
P.S. Not sure if using <ul> tags in this situation is semantically correct. Your second column e.g. just has one <li> element so it isn't actually a list. You could just wrap your images with <div> tags to keep them blocked.
Raquel Rodrigues
2,876 PointsThank you Selwyn, it worked :)
Raquel Rodrigues
2,876 PointsThank you Sean. i didn't know about this "rules" :)
udslwxmrlw
8,196 PointsHi Sean!
How do you want your images to appear ? Currently it looks like your aiming at three columns. Having set "post_per_page" to "5" your images are split 2 -1 -2
Raquel Rodrigues
2,876 PointsHi Selwyn! I want my images to appear precisely like you say 2-1-2. The problem is that I want image 1 to show on the top left corner, the second one beneath this one, then the third one should appear alone centered, and the 4th and 5th, on the right side, being the 4th on top of the 5th. (Image 3 is higher than the others, which all have the same height.) Can you understand what I need? Thank you
Sean T. Unwin
28,690 PointsSean T. Unwin
28,690 PointsI have formatted your code to be more readable.
Please see this thread regarding posting code to the forum. :)