WordPress.org

Forums

[resolved] Display first, second, and third posts as list item (4 posts)

  1. juliabarry
    Member
    Posted 2 years 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!

  2. Michael
    Forum Moderator
    Posted 2 years ago #

    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

  3. juliabarry
    Member
    Posted 2 years ago #

    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!!

  4. Michael
    Forum Moderator
    Posted 2 years ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags