Okay
  Public Ticket #153092
Any way to duplicate portfolio sort buttons so they appear at bottom of post as well as the top/title?
Closed

Comments

  • Oliver started the conversation

    Hey Nectar! I had gotten some feedback from two people (40+ years old both I think) at my latest portfolio review that they had difficulty navigating the site. Once I showed them, they agreed they were just doing it wrong (lol) but I wondered if maybe they were confused when they got to the end of a portfolio post. Is it possible to duplicate the portfolio sorting buttons so they appear at the bottom of a post as well as the title/top?

    Thanks in advance!

  •  1,077
    ThemeNectar replied

    Hey Oliver! :)

    You can open your single-portfolio.php file and paste this in towards the bottom:

    <div id="portfolio-nav">
    		<ul>
    			<li id="all-items"><a href="<?php echo $portfolio_link; ?>"><i class="icon-salient-back-to-all"></i></a></li>               
    		</ul>
    	        <ul class="controls">                                 
    			<li id="prev-link"><?php be_next_post_link('%link','<i class="icon-salient-left-arrow-thin"></i>',TRUE, null,'project-type'); ?></li>
    			<li id="next-link"><?php be_previous_post_link('%link','<i class="icon-salient-right-arrow-thin"></i>',TRUE, null, 'project-type'); ?></li> 
    		</ul>
    </div>
    

    Cheers!

  • Oliver replied

    Cool, thanks, I'll give it a try!

  • Oliver replied

    Hey Nectar, so I've been trying to use that code, and couldn't get it to work at first. I dug into the file and noticed that I needed a little bit more of code just below it (I think it duplicates with a similar code if there is no category; regardless in testing I couldn't get the original nav to go away until I commented that code out as well for example). I'll paste the code below that I ended up using:

    						 <!-- PORTFOLIO NAV -->
    						 <div id="portfolio-nav">
    						 	<ul>
    						 		<li id="all-items"><a href="<?php echo $portfolio_link; ?>"><i class="icon-salient-back-to-all"></i></a></li>               
    						 	</ul>
    							<ul class="controls">                                 
    								<li id="prev-link"><?php be_next_post_link('%link','<i class="icon-salient-left-arrow-thin"></i>',TRUE, null,'project-type'); ?></li>
    								<li id="next-link"><?php be_previous_post_link('%link','<i class="icon-salient-right-arrow-thin"></i>',TRUE, null, 'project-type'); ?></li> 
    							</ul>
    						</div>
    						 
    				<?php  } 
    					 
    					 //if no category page exists
    					 else {
    
    					 	$portfolio_link = get_portfolio_page_link(get_the_ID()); 
    						if(!empty($options['main-portfolio-link'])) $portfolio_link = $options['main-portfolio-link']; 
    						
    						if($back_to_all_override != 'default') $portfolio_link = get_page_link($back_to_all_override); ?>
    						
    						<div id="portfolio-nav">
    							<ul>
    								<li id="all-items"><a href="<?php echo $portfolio_link; ?>"><i class="icon-salient-back-to-all"></i></a></li>  
    							</ul>
    							<ul class="controls">                                       
    								<li id="prev-link"><?php next_post_link('%link','<i class="icon-salient-left-arrow-thin"></i>'); ?></li>
    								<li id="next-link"><?php previous_post_link('%link','<i class="icon-salient-right-arrow-thin"></i>'); ?></li> 
    							</ul>
    						</div>
    						<!-- PORTFOLIO NAV -->

    Now, it did appear, but was appearing just below the original top nav, and only at the bottom at smaller screen sizes, and even then it appeared broken, with the "next" arrow a bit lower than the left "box/back to portfolio" button. (I've attached a screenshot for reference). 

    The lowest I could paste it in was around line 270-ish. Any lower and I would get errors for the site and the page wouldn't load (assuming it was being pasted outside of the major brackets for the php file). 

    Anyway, if you think there might be an easy fix, let me know. If not I'll leave it alone for now. Thanks so much for the help regardless! 

  •  1,077
    ThemeNectar replied

    Hey again!

    The best place to paste them would be right before the container closes:

    </div><!--/container-->

    and also, I forgot to mention you should add a class on the portfolio-nav div which you can then use to switch the position to relative with css:
     

    <div id="portfolio-nav" class="relative-pos">
    		<ul>
    			<li id="all-items"><a href="<?php echo $portfolio_link; ?>"><i class="icon-salient-back-to-all"></i></a></li>               
    		</ul>
    	        <ul class="controls">                                 
    			<li id="prev-link"><?php be_next_post_link('%link','<i class="icon-salient-left-arrow-thin"></i>',TRUE, null,'project-type'); ?></li>
    			<li id="next-link"><?php be_previous_post_link('%link','<i class="icon-salient-right-arrow-thin"></i>',TRUE, null, 'project-type'); ?></li> 
    		</ul>
    </div>

    and in the custom css box:

    .relative-pos {
      position: relative!important;
    }

    Cheers :)