Display first, second, and third posts as list item

  • Resolved juliabarry

    (@juliabarry)


    12 years, 2 months ago

    Heya. I’m trying to make a slider that pulls in the image uploaded to a meta box on its post. I’ve tried different combinations of get_post, query_post, offset=x arg etc. based on other forum answers and don’t know what I’m doing wrong.

    When using this code:

    <?php query_posts('category_name=featured&posts_per_page=3'); ?>

			<div id="blueberryslider">
<?php while (have_posts()) : the_post(); ?>
    <div class="blueberry clear center">
      <ul class="slides">
        <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900"></a></li>

    it shows 3 of the latest posts in one <li>, but I can’t figure how to get it to show one post per <li>, which is what I need.

    Here’s what the html has to be for the slider to work:

    <div id="blueberryslider">
    <div class="blueberry clear center">
      <ul class="slides">
        <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900"></a></li>
        <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900"></a></li>
        <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900"></a></li>
      </ul>
    </div>

    Where/how do I call the posts into each <li>? Thanks!

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

  • your posted code is incomplete;

    generally, pull the div and ul to before the line with while( have_posts()) and close them after the line with endwhile

    Thread Starter juliabarry

    (@juliabarry)

    Thank you! Knowing the order of ops helped me get things working like this (for anyone else who’s wondering):

    <div id="blueberryslider">
			<div class="blueberry clear center">
      <ul class="slides">
      <?php query_posts('category_name=featured&posts_per_page=1&offset=0'); ?>
<?php while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900" height="300"></a></li>
          <?php endwhile;?>
           <?php query_posts('category_name=featured&posts_per_page=1&offset=1'); ?>
<?php while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900" height="300"></a></li>
          <?php endwhile;?>
           <?php query_posts('category_name=featured&posts_per_page=1&offset=2'); ?>
<?php while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900" height="300"></a></li>
          <?php endwhile;?>

      </ul>
    </div>
</div>

    Much appreciation for your tip!!

    try this simplified code with only one loop:

    <div id="blueberryslider">
			<div class="blueberry clear center">
      <ul class="slides">
      <?php query_posts('category_name=featured&posts_per_page=3'); ?>
<?php while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_field('slider_url') ?>" title="<?php the_field( 'slider_video_tagline' ); ?>" rel="prettyPhoto"><img src="<?php the_field( 'slider_image' ); ?>" alt="<?php the_field( 'slider_video_title' ); ?>" width="900" height="300"></a></li>
          <?php endwhile;?>

      </ul>
    </div>
</div>
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Display first, second, and third posts as list item’ is closed to new replies.

Tags