Support

Account

Home Forums Front-end Issues 1 Custom post type, 2 different meta-values, same loop?

Solving

1 Custom post type, 2 different meta-values, same loop?

  • Hi,
    I’m having a problem with my custom post type “slides”. I have images and videos in a Flex slider. By using Advanced Custom Fields I have a conditional in the admin: I’m using a radio button to choose whether the slide is an image or a video, then I conditionally provide the appropriate code. I’ve just discovered that instead of having one loop with an elseif statement, I’ve got two loops with one with a conditional one without. This is causing issues with reordering the slides manually or with a plugin.

    I’ve tried many different solutions but I’m ending up with the slider and everything below it simply disappearing.

    This is what I currently have:

    <div class="flexslider">
    	  <ul class="slides">
    	  	<?php 
    			$args = array(
    				'post_type' => 'slide',
    				//'meta_key' => 'slide_media_format',
    				//'meta_value' => 'Image',
    				'posts_per_page' => -1,
    				'meta_query' => array(
    					'relation' => 'OR',
    					array(
    						'key' => 'slide_media_format',
    						'value' => '%Image%',
    						'compare' => 'LIKE'
    					),
    					array(
    						'key' => 'slide_media_format',
    						'value' => '%Video%',
    						'compare' => 'LIKE'
    					)
    				)
    			);
    	  
    			$loop = new WP_Query( $args ); ?>
    		<?php if($loop->have_posts()) : while ($loop->have_posts()) : $loop->the_post(); 
    			if ( get_field('slide_image') !=false) {
    		?>
    		
    			<li>
    				<?php $attachment_id = get_field('slide_image');
    					$size = "full"; // (thumbnail, medium, large, full or custom size) ?>
    				<a href="<?php the_field('slide_page_url'); ?>"><?php echo wp_get_attachment_image( $attachment_id, $size); ?></a>
    				<?php if(get_field('slide_header_dark') !=false || get_field('slide_text_dark') !=false) { ?>
    				<div class="contents" style="top: <?php if(!is_mobile_device()) { echo the_field('css_top'); }?>px;left: <?php if(!is_mobile_device()) { echo the_field('css_left'); }?>px; background: url('<?php bloginfo('url'); ?>/wp-content/uploads/2013/09/light-overlay.png');">
    					<a href="<?php the_field('slide_page_url'); ?>">
    					<h1 style="color: #371C1C;"><?php echo get_field('slide_header_dark'); ?></h1>
    					<p style="color: #371C1C;"><?php echo get_field('slide_text_dark'); ?></p>
    					</a>
    					<?php } ?>
    				<?php if(get_field('slide_header_light') !=false || get_field('slide_text_light') !=false) { ?>
    				<div class="contents" style="top: <?php if(!is_mobile_device()) { echo the_field('css_top'); }?>px;left: <?php if(!is_mobile_device()) { echo the_field('css_left'); }?>px; background: url('<?php bloginfo('url'); ?>/wp-content/uploads/2013/09/dark-overlay.png');">
    					<a href="<?php the_field('slide_page_url'); ?>">
    					<h1 style="color: #fff;"><?php echo get_field('slide_header_light'); ?></h1>
    					<p style="color: #fff;"><?php echo get_field('slide_text_light'); ?></p>
    					</a>
    					<?php } ?>
    				</div>
    			</li>
    			<?php 
    			} elseif {
    			( get_field('static_slide_image') !=false) {
    			?>
    			<?php 
    			//$args = array(
    			//'post_type' => 'slide',
    			//'meta_key' => 'slide_media_format',
    			//'meta_value' => 'Video',
    			//'posts_per_page' => -1
    			//);
    			?>
    			<li>
    				<?php $attachment_id = get_field('static_slide_image');
    					$size = "full"; // (thumbnail, medium, large, full or custom size) ?>
    				<?php echo wp_get_attachment_image( $attachment_id, $size); ?>
    	      	<a class="fancybox-media play-icon" href="http://vimeo.com/<?php echo get_field('vimeo_id'); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/2013/10/slider-video-play-icon.png" alt="play button for video" /></a>
    			</li>
    			<?php } ?>
    			<?php if(get_field('youtube_or_vimeo') == "Youtube") { ?>
    			<li>
    				<?php $attachment_id = get_field('static_slide_image');
    					$size = "full"; // (thumbnail, medium, large, full or custom size) ?>
    				<?php echo wp_get_attachment_image( $attachment_id, $size); ?>
    					<a class="fancybox-media play-icon" href="http://www.youtube.com/watch?v=<?php echo get_field('youtube_id'); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/2013/10/slider-video-play-icon.png" alt="play button for video" /></a>
    			</li>
    			<?php } 
    				}
    			?>
    			<?php 
    			 endwhile; 
    			 endif;
    			 wp_reset_query();
    			?>
    		</ul>

    Anyone see where I’ve gotten it wrong?

    Thanks so much!

  • Hi Intrepidrealist

    Your code seems a bit overly complex for what you’re trying to achieve. Before I get into a solution based on your current approach I would urge you to check out the repeater field or flexible content field add-ons that Elliot has put together. These are paid for additions to ACF but worth every penny and would make this sort of thing an absolute breeze compared to using custom post types for something like slides on a slider. If you are create a site for a client they will thank you!

    If you can’t or won’t go for these options then your code could be simplified quite a bit. Please see the stripped down example below. The biggest issue I could see is that you mention you have a radio button field but in your code you are not comparing your field against a proper value in your if statements. Please see the inline comments for more info. It’s not production code but hopefully it will give you a nod in the right direction

    <?php 
    //Instead of the meta query in your arguments just call for all slide posts - you can add ordering here if you want though
    $args = array( 'post_type' => 'slide', 'posts_per_page' => -1, ); 
    $loop = new WP_Query( $args ); 
    
    /*Just as a bit of good practice, if you call your if have_posts conditional before all slider content in the event 
    that there are no slides the whole slider will not show as opposed to showing an empty slider with no content*/
    
    if($loop->have_posts()) :  ?>
    
    <div class="flexslider">
    	  <ul class="slides">
    	  
    	  <?php while ($loop->have_posts()) : $loop->the_post(); // We then start looping through the slides ?>
    			
    			
    			<?php if ( get_field('slide_image') !=false) { 
    			
    			/* Here's where you problems start I think.  
    			Your radio field should have at least a couple of values e.g. you could 
    			have image_slide and video_slide as your two values on your radio field
    			Your if statement above would then look like this:
    			
    			if ( get_field('slide_image') == 'image_slide') {
    			
    			*/
    			?>
    		
    			<li>
    				<!-- Your slide content goes here -->
    			</li>
    			
    			<?php 
    			/* 
    			Your version of the code below looked a bit broken - this you would have got a syntax error as your else if statement was malformed
    			The version below copies the example I gave you above but checks to see if the slide is a video slide
    			*/
    			} elseif ( get_field('static_slide_image') == false) { ?>
    				
    			<li>
    				<!-- Your slide content goes here -->
    			</li>
    			<?php  } ?>
    			
    			<?php //close off loop
    			endwhile; ?>
    			
    		</ul>
    </div>
    		 
    <?php  
    endif;
    wp_reset_query();
    ?>
    • Elliot

    • December 6, 2013 at 9:35 am

    Hi @intrepidrealist

    Thanks for posting the code. Can you please edit your original post and remove any code which is redundant.

    If the problem is that your query is not working, then there is no need to post the loop code as it is confusing to readers.

    Can you please be specific as to what is and isn’t working in your code. Is your original WP_Query working as expected? Does it loop? Does it return posts?

    I have a feeling that your issue lies in the meta_query args you have written.

    You say that you are using a radio field to choose between ‘image’ and ‘video’. Firstly, can you confirm the value saved is ‘Image’ or ‘image’ – this is important.

    Becuase the radio field only saves 1 value, it does not require the LIKE compare – this is only needed for serialized array values such as checkbox.

    So you can change your args to:

    
    'meta_query' => array(
    					'relation' => 'OR',
    					array(
    						'key' => 'slide_media_format',
    						'value' => 'Image',
    					),
    					array(
    						'key' => 'slide_media_format',
    						'value' => 'Video',
    					)
    				)
    

    Hope that helps.

    Thanks
    E

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.