Specific div layout using wp_query

  • b4thebigbang

    (@b4thebigbang)


    15 years ago

    Hi all,

    The last few days I’ve been struggling to get the following output by using WP_query (outside the Loop):

    <div id="slider">
   <img src="http://urlof.the/image/goes/here.jpg" title="slide1"/>
   <img src="http://urlof.other/image/goes/here.jpg" title="slide2"/>
</div>
<div id="slide1" class="nivo-qhtml-caption">
  <p><span>Caption title Slide1</span></p>
  <p>Caption contents slide 1</p>
</div>
<div id="slide2" class="nivo-qhtml-caption">
  <p><span>Caption title Slide2</span></p>
  <p>Caption contents Slide2</p>
</div>

    The reason I want my output this way, is to use a nivo slider on my website. All the attributes get their values from variables coming from a custom post type. To add a slide, you can just use the custom post type and add a new post.

    Through this post type a user would enter the url of the slide image, an id used for the slide (used for the title of the image and the div id for the caption that goes along with the image). A user can also has a box to fill in the caption title and a box to use for teh caption. Only thing I need now is to get my ouput sorted in teh above way.

    I allready tried different ‘while’ loops, but with no result. Any ideas anyone?

    Thanks in advance!

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

    (@alchymyth)

    15 years ago

    is that code example for two posts?
    it is not totaly clear, where the looping is.

    for example with three posts would this psrt loop:

    <div id="slider">
   <img src="http://urlof.the/image/goes/here.jpg" title="slide1"/>
   <img src="http://urlof.other/image/goes/here.jpg" title="slide2"/>
   <img src="http://urlof.the/image/goes/here.jpg" title="slide3"/>
</div>

    and the second part as well?

    you might ned to work with rewind_posts() between the sections.
    http://codex.ww.wp.xz.cn/Function_Reference/rewind_posts

    do the numbers need to come automatically from the loop?

    Thread Starter b4thebigbang

    (@b4thebigbang)

    15 years ago

    Thanks for the quick response!

    You’re right about the posts. The example I gave contained two posts. Problem is, with the way I’m using nivo slider all the images must be grouped within the “slider” div and all the captions need a diff of their own.

    It’s easiest for my client to have all the numbers come from the loop… I’ve tried to do it by adding a counter in the while-loop, but that didn’t give the result I’m after.

    Thanks for the quick tip on rewind_posts(), started reading up on it, cheers!

    Thread Starter b4thebigbang

    (@b4thebigbang)

    15 years ago

    The code I´m using is:

    <div id="slider-wrapper">
	<div id="slider">
		<?php $slider_query = new WP_query('post_type=rt_slider&showposts=5');
		while ($slider_query->have_posts()) : $slider_query->the_post();
			$do_not_duplicate = $post->ID; ?>
			<?php $image_href = get_post_meta($post->ID, '_image_href', $single = true);?>
			<?php $slide_id = get_post_meta($post->ID, '_slide_id', $single = true);?>
			<?php $caption_title = get_post_meta($post->ID, '_caption_title', $single = true);?>
			<?php $caption = get_post_meta($post->ID, '_caption', $single = true);?>
			<?php $caption_link_href = get_post_meta($post->ID, '_caption_link_href', $single = true);?>
			<?php $caption_link_text = get_post_meta($post->ID, '_caption_link_text', $single = true);?>
			<?php if($image !== '') { ?>
				<img src="<?php bloginfo('template_directory');?>/images/slider/<?php echo $image_href;?>" alt="" title="#<?php echo $slide_id; ?>"/>
			<?php } // end if statement
			else { ?>
				<img src="<?php bloginfo('template_directory');?>/images/slide5.jpg" alt="" title="#<?php echo $slide_id; ?>"/>
			<?php } ?>
			<?php endwhile;?>
			<?php rewind_posts();?>
	</div>
			<?php while ($slider_query->have_posts()) : $slider_query->the_post();?>
				<div id="<?php echo $slide_id;?>" class="nivo-html-caption">
					<p><span><?php echo $caption_title;?></span></p>
					<p><?php echo $caption;?> - <a href="<?php echo $caption_link_href;?>"><?php echo $caption_link_text?></a></p>
				</div>
			<?php endwhile;?>
	</div>

    And it generates the following output:

    <div id="slider-wrapper">
		<div id="slider">
																																												<img src="http://localhost/wordpress/wp-content/themes/RallyTiming/images/slider/slider2.jpg" alt="" title="#slide2"/>
																																																		<img src="http://localhost/wordpress/wp-content/themes/RallyTiming/images/slider/slider1.jpg" alt="" title="#slide1"/>
													</div>
										<div id="slide1" class="nivo-html-caption">

					<p><span>Welkom op de website van RallyTiming</span></p>
					<p>RallyTiming is dé tijd waarnemer van het Nederlands Rallykampioenschap en het Nederlands Short Rallykampioenschap. Via onze websites voor pc, smartphone en tablet blijf je altijd op de hoogte van de laatste uitslagen! - <a href="http://www.rallytiming.nl/over_ons/">Meer over RallyTiming</a></p>
				</div>
											<div id="slide1" class="nivo-html-caption">
					<p><span>Welkom op de website van RallyTiming</span></p>
					<p>RallyTiming is dé tijd waarnemer van het Nederlands Rallykampioenschap en het Nederlands Short Rallykampioenschap. Via onze websites voor pc, smartphone en tablet blijf je altijd op de hoogte van de laatste uitslagen! - <a href="http://www.rallytiming.nl/over_ons/">Meer over RallyTiming</a></p>

				</div>

	</div>

    Problem seems to be that instead of generating the caption 2 div, it generates the caption 1 div again…

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

The topic ‘Specific div layout using wp_query’ is closed to new replies.

Tags