Bug in the Portfolio display

**mr108** · 11-09-2016, 04:04 AM

Hello John,

The portfolio display on a Wordpress site http://terrybraunstein.com/portfolio1/ has a bug.

When you select one of the Portfolio Categories, e.g. 'Sculpture' (last on the right) and click on the second item from the top-left ('Ladder Dreams') and once it opens, if you click on the 'Next' button in the top-right corner to view next item in the 'Sculpure' category, then completely unrelated item from 'Artists Books' category comes up - ('My Bookhouse:...'). And if you click on 'Previous' button instead when viewing 'Ladder Dreams' then 'Empty Nest – 1988' which is from 'Photography' Category comes up.
In the old version of this theme (Yin&Yang) the viewing of specific Categories was consistent.

Is there any way to correct this in the code?

I hope that you'll be able to find the bug. You probably need to look into the theme's code which I hope you still have since the last time we were dealing with another problem in this theme.

Thanks!

Marek

**jscheuer1** · 11-10-2016, 07:29 PM

OK, what I'm seeing is that in the markup of the page http://terrybraunstein.com/portfolio1/ that's the order in which the entries are. I'm guessing they're scrambled and reorder by javascript and/or css both when the page loads, and of course when one selects a more limiting category. However, the actual order in the markup appears to be maintained when using the next/prev buttons. Do you understand what I mean? Can you tell me where you establish that order? In any case, what I recommend is determining where you list the items, and list them there in order by category.

That said, there ought to be some sort of signifier, like a class name or something you could tick off as you enter each item to tell the code which category it's in. If there is, then I'd try using that first to establish your preferred groupings. If nothing like that's available, then as I say, just list the items in the order you want them paged through as.

**mr108** · 11-11-2016, 03:17 AM

Originally Posted by jscheuer1

OK, what I'm seeing is that in the markup of the page http://terrybraunstein.com/portfolio1/ that's the order in which the entries are. I'm guessing they're scrambled and reorder by javascript and/or css both when the page loads, and of course when one selects a more limiting category. However, the actual order in the markup appears to be maintained when using the next/prev buttons. Do you understand what I mean? Can you tell me where you establish that order?

That order of all the Portfolio items is determined by the date when they were published, so it's possible to reorder them either by changing the date or with a plugin 'Reorder Posts'

In any case, what I recommend is determining where you list the items, and list them there in order by category.

That should not be necessary and is not meant to be since in the old theme version (v.1.2.1) which you can see here http://nickstreet.com/ the images for the Categories are NOT displayed grouped together, they are randomly displayed or rather on the basis of preference what the site owner likes the viewers to see first.

For example the Category Editorial contains 4 Portfolio items: Calor LPG, Behavioral Mimicry, A Plus, and Google Packman. When you click on Editorial you'll see the selection of these 4 items in a group. When you click on each item and view in large display and then click on the Next button (in this theme version it's the Next on the right side between the cross and Previous buttons - the other 2 Next and Previous buttons to the left are for navigation between the images in that portfolio item itself) then you go to the next CATEGORY in one of the 4 of the EDITORIAL group and NOT to the next Portfolio item displayed under ALL. So the ordering of the Portfolio items under ALL does not matter - the 4 Categories under Editorial are NOT displayed together or in sequence or together.

That said, there ought to be some sort of signifier, like a class name or something you could tick off as you enter each item to tell the code which category it's in. If there is, then I'd try using that first to establish your preferred groupings.

Yes, each Portfolio item can be assigned to a specific Category. You can see it in my test site that I used when we were working on the previous problem. I emailed you the login credentials privately. There, in the Dashboard under Portfolio you can see the items and when clicking on Quick Edit you can change the Portfolio Category. Portfolio Categories can also be viewed from the Dashboard.

Looking forward to your input after you've checked out the old version of the theme above and my test site.

Marek

**mr108** · 11-17-2016, 12:19 AM

I had a look at the code of the single-portfolio.php file which I guess is managing the display of the single portfolio item and the navigation on it. I guess the bug must be somewhere in the places where the 'next' and 'prev' appear, and where the assignment of the posts' id is set. But I don't know anything about php coding so it's not possible for me to determine where where the changes have to be done.

Marek

Here is the code in that file:

Code:

<?php get_header(); ?>
		
	<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
	
		<?php 
			$desired_width = 813;
			$desired_height = 613;
			$current_post_id = $post->ID;
			$terms = get_the_terms($current_post_id, 'portfolio_category', 'string');
			$num_of_terms = count($terms);
			$content_post = get_post($current_post_id);
			$content = $content_post->post_content;
			$content = apply_filters('the_content', $content);
			$content = str_replace(']]>', ']]>', $content);
			$post = get_post($current_post_id); 
			
			// Prev and Next Post IDs
			$adjacent_ids = onioneye_get_next_and_prev_ids($current_post_id); 
			$prev_id = $adjacent_ids[0]; 
			$next_id = $adjacent_ids[1]; 
			
			// Metabox Values
			$image_list = get_post_meta($current_post_id, 'onioneye_image_list', true);
			$client = get_post_meta($current_post_id, 'onioneye_client', true); 
			$project_url = get_post_meta($current_post_id, 'onioneye_item_url', true);
			$is_pub_date_displayed = get_post_meta($current_post_id, 'onioneye_publication_date', true); 
			$video_embed_code = get_post_meta($current_post_id, 'onioneye_embed_code', true); 
			
		    $no_of_columns = 0; 
		    
		    if($is_pub_date_displayed) {
				$no_of_columns++;  
		    }
			if($terms) {
				$no_of_columns++; 	
			}
			if($client) {
				$no_of_columns++;
			}
			if($project_url) {
				$no_of_columns++;
			}			
		?>
		
		<div class="portfolio-item-wrapper group">
			<div class="single-portfolio-item group">
			
				<div class="mobile-nav-container">
					<h1 class="item-title"><?php echo get_the_title($current_post_id); ?></h1>
					
					<div class="mobile-post-nav group">
					
						<?php if($prev_id && $next_id) { ?>			
						
							<a class="next-portfolio-post mobile-nav-btn" rel="next" href="#" data-post_id="<?php echo esc_attr($next_id); ?>">
								<span><?php esc_html_e( 'Next post', 'onioneye' ); ?></span>
							</a>
							<a class="prev-portfolio-post mobile-nav-btn" rel="prev" href="#" data-post_id="<?php echo esc_attr($prev_id); ?>">
								<span><?php esc_html_e( 'Prev post', 'onioneye' ); ?></span>
							</a>
							
						<?php } else if ($prev_id) { ?>
							
							<div class="next-nav-placeholder mobile-nav-btn">
								<span><?php esc_html_e( 'Next post', 'onioneye' ); ?></span>
							</div>
							<a class="prev-portfolio-post mobile-nav-btn" href="#" data-post_id="<?php echo esc_attr($prev_id); ?>">
								<span><?php esc_html_e( 'Prev post', 'onioneye' ); ?></span>
							</a>
				
						<?php } else if ($next_id) { ?>
				
							<a class="next-portfolio-post mobile-nav-btn" href="#" data-post_id="<?php echo esc_attr($next_id); ?>">
								<span><?php esc_html_e( 'Next post', 'onioneye' ); ?></span>
							</a>
							<div class="prev-nav-placeholder mobile-nav-btn">
								<span><?php esc_html_e( 'Prev post', 'onioneye' ); ?></span>
							</div>
					
						<?php } ?>
						
					</div><!-- /.mobile-post-nav -->
				</div><!-- /.mobile-nav-container -->
				
				<section class="item-content">
							
					<?php if(!empty($image_list)) { ?>
					
						<div class="metabox-media-files">
							
							<?php 						
								if(!empty($image_list) && count($image_list) === 1) {
									
									$portfolio_img_url = reset($image_list);
									$portfolio_img_id = key($image_list);
								
									$img_meta = wp_get_attachment_image_src($portfolio_img_id, 'full-size');
									$image_full_width = $img_meta[1];
									$image_full_height = $img_meta[2];
									$alt_attr = get_post_meta($portfolio_img_id, '_wp_attachment_image_alt', true);
									$img_caption = get_post($portfolio_img_id)->post_excerpt; 
									
									/* find the "desired height" of the current thumbnail, relative to the desired width */
									if($image_full_width && $image_full_height) { 
										$desired_height = floor($image_full_height * ($desired_width / $image_full_width));
									}
									
									$thumb = onioneye_get_attachment_id_from_src($portfolio_img_url);
									$image = onioneye_vt_resize($thumb, '', $desired_width, $desired_height, true);
											    
									if( $image_full_width > $desired_width || $image_full_height > $desired_height ) { 
							?>
										<div style="max-width: <?php echo esc_attr($desired_width) . 'px'; ?>">
											<div class="single-img-height" style="height: 0; padding-bottom: <?php echo onioneye_get_loader_height($desired_width, $desired_height); ?>">
											
												<div class="single-img-container">
													
													<img class="single-img single-img-ajax" src="<?php echo esc_url($image[url]); ?>" width="<?php echo esc_attr($desired_width); ?>" 
														height="<?php echo esc_attr($desired_height); ?>" alt="<?php echo esc_attr($alt_attr); ?>" />
														
													<?php if($img_caption) { ?>
											  			<p class="oy-flex-caption"><?php echo $img_caption; ?></p>
											  		<?php } ?>
												</div>
												
												<div class="single-img-loader"></div>
											
											</div>
										</div>
												              
							<?php 
									} else { 
							?>		    
										<div style="max-width: <?php echo esc_attr($image_full_width) . 'px'; ?>">
											<div class="single-img-height" style="height: 0; padding-bottom: <?php echo onioneye_get_loader_height($image_full_width, $image_full_height); ?>">
											
												<div class="single-img-container">
													
													<img class="single-img single-img-ajax" src="<?php echo esc_url($portfolio_img_url); ?>" width="<?php echo esc_attr($image_full_width); ?>" 
														height="<?php echo esc_attr($image_full_height); ?>" alt="<?php echo esc_attr($alt_attr); ?>" />
														
													<?php if($img_caption) { ?>
											  			<p class="oy-flex-caption"><?php echo $img_caption; ?></p>
											  		<?php } ?>
												</div>
												
												<div class="single-img-loader"></div>
											
											</div>
										</div>
							<?php 
									} 
								}
								else if(!empty($image_list) && count($image_list) >= 1) {	
							?>
									
									<div class="oy-flex-container">
									
										<div class="oy-flexslider">
											
											<ul class="oy-slides">
											   				
												<?php foreach ($image_list as $portfolio_img_id => $portfolio_img_url) { 
																							  
													$img_meta = wp_get_attachment_image_src($portfolio_img_id, 'full-size');
													$image_full_width = $img_meta[1];
													$image_full_height = $img_meta[2];
													$alt_attr = get_post_meta($portfolio_img_id, '_wp_attachment_image_alt', true);
													$img_caption = get_post($portfolio_img_id)->post_excerpt; 
													
													/* find the "desired height" of the current thumbnail, relative to the desired width */
													if($image_full_width && $image_full_height) { 
														$desired_height = floor($image_full_height * ($desired_width / $image_full_width));
													}
													
													$thumb = onioneye_get_attachment_id_from_src($portfolio_img_url);
													$image = onioneye_vt_resize( $thumb, '', $desired_width, $desired_height, true );
											    
												    // If the original width of the thumbnail doesn't match the width of the slider, resize it; otherwise, display it in original size
													if( $image_full_width > $desired_width || $image_full_height > $desired_height ) { 
												
												?>
														<li>
															<img class="oy-slider-img" src="<?php echo esc_url($image[url]); ?>" width="<?php echo esc_attr($desired_width); ?>" 
																height="<?php echo esc_attr($desired_height); ?>" alt="<?php echo esc_attr($alt_attr); ?>" />
															
															<?php if($img_caption) { ?>
													  			<p class="oy-flex-caption"><?php echo $img_caption; ?></p>
													  		<?php } ?>					
														</li>
														              
												<?php 
													} else { 
												?>
													
														<li>
															<img class="oy-slider-img" src="<?php echo esc_url($portfolio_img_url); ?>" width="<?php echo esc_attr($image_full_width); ?>" 
																height="<?php echo esc_attr($image_full_height); ?>"  alt="<?php echo esc_attr($alt_attr); ?>" />
															
															<?php if($img_caption) { ?>
													  			<p class="oy-flex-caption"><?php echo $img_caption; ?></p>
													  		<?php } ?>		
														</li>
							   
												<?php 
													} // end else
												} // end foreach
												?>												   							        							    
											    
											</ul><!-- /.oy-slides -->
											
											<div class="oy-flex-img-loader"></div>
										    
										</div><!-- /.oy-flexslider -->
									
									</div><!-- /.oy-flex-container -->
						
							<?php } // end else if ?>
							
						</div><!-- END .metabox-media-files -->
					<?php } ?>
						
					<?php if($video_embed_code) { ?>
						
						<div class="video-embed">
							<?php echo stripslashes(htmlspecialchars_decode($video_embed_code)); ?>			
						</div>
								
					<?php }	?>
						
					<?php if($content) { ?>
					
						<div class="item-description">  			
							<?php echo $content; ?>
						</div>
					
					<?php } ?>
					
				</section><!-- /.item-content -->
				
				<aside class="item-sidebar group">
					
					<ul class="post-nav group">
						
						<li><span class="close-post">&nbsp;</span></li>
					
					<?php if($prev_id && $next_id) { ?>			
					
						<li><a class="next-portfolio-post" rel="next" href="#" data-post_id="<?php echo esc_attr($next_id); ?>">&nbsp;</a></li>
						<li><a class="prev-portfolio-post" rel="prev" href="#" data-post_id="<?php echo esc_attr($prev_id); ?>">&nbsp;</a></li>
						
					<?php } else if ($prev_id) { ?>
					
						<li><a class="prev-portfolio-post" href="#" data-post_id="<?php echo esc_attr($prev_id); ?>">&nbsp;</a></li>
			
					<?php } else if ($next_id) { ?>
			
						<li><a class="next-portfolio-post" href="#" data-post_id="<?php echo esc_attr($next_id); ?>">&nbsp;</a></li>
				
					<?php } ?>
						
					</ul><!-- /.post-nav -->
					
					<h1 class="item-title"><?php echo get_the_title($current_post_id); ?></h1>
					
					<div class="project-meta group <?php echo esc_attr('oy-' . $no_of_columns . '-cols'); ?>">	
						<?php if($terms) { ?>					
							
							<ul class="item-categories item-metadata group">
						    	<li><?php esc_html_e( 'Categories', 'onioneye' ); ?><span> &rarr;</span></li>
								
								<?php 
									$i = 0;
			
									foreach($terms as $term) {
				
										if($i + 1 == $num_of_terms) {
				    						echo '<li class="item-term">' . esc_html($term -> name) . '</li>';
				 						}
										else {
											echo '<li class="item-term">' . esc_html($term -> name) . '<span class="cat-comma">, </span></li>';
										}
											
										$i++;
									}
								?>
							</ul>
								
						<?php } ?>
						
						<?php if($is_pub_date_displayed) { ?>
							
							<ul class="item-date item-metadata">
							    <li><?php esc_html_e('Date', 'onioneye'); ?><span> &rarr;</span></li>
							    <li><?php echo mysql2date( __( 'F Y', 'onioneye' ), $post->post_date ); ?></li>
							</ul>
						
						<?php } ?>
						
						<?php if( $client ) { ?>
							
							<ul class="item-client item-metadata">
							    <li><?php esc_html_e('Client', 'onioneye'); ?><span> &rarr;</span></li>
							    <li><?php echo esc_html($client); ?></li>
							</ul>
							
						<?php } ?>
						
						<?php if( $project_url ) { ?>
							
							<ul class="item-url item-metadata">
							    <li><?php esc_html_e( 'Project URL', 'onioneye' ); ?><span> &rarr;</span></li>
							    <li><a href="<?php echo esc_url($project_url); ?>"><?php esc_html_e( 'Visit site', 'onioneye' ); ?></a></li>
							</ul>
							
						<?php } ?>
					</div><!-- /.project-meta -->
								
				</aside><!-- /.item-sidebar -->	
				
				<div class="portfolio-border">&nbsp;</div>
				
			</div><!-- /.single-portfolio-item -->
		</div><!-- /.portfolio-item-wrapper -->
		
		<?php get_template_part('includes/portfolio'); ?>
        
    <?php endwhile; ?>
        				
<?php get_footer(); ?>

**jscheuer1** · 11-17-2016, 02:18 AM

Sorry, been preoccupied with a few things. I will get to this if you haven't solved it before then.

**mr108** · 11-18-2016, 11:20 AM

It might be that this part of the code has to be changed, but it's just a guess:

// Prev and Next Post IDs
$adjacent_ids = onioneye_get_next_and_prev_ids($current_post_id);
$prev_id = $adjacent_ids[0];
$next_id = $adjacent_ids[1];

* Yea, it was just a guess. I tested with just deleting this part and there is no change. It's something else