Slider Revolution in Portfolio template

Support
#1

Hi there,
On my site, oneworldtrek.wpengine.com, I’m utilizing the portfolio pages to highlight trips. Here is a example of a portfolio (trip) layout: http://oneworldtrek.wpengine.com/trekking-trips/annapurna-circuit-lodge-trek-nepal/

I’d like to put a Revolution Slider into the top of the portfolio item layout, in the place of where the featured image is, and to have it fill the width of the container above the content i.e"Annapurna Circuit Lodge Trek". The featured image currently doesn’t fill this area.

I have tried to add the php embed code for the slider but everywhere I put it just breaks and the page won’t load.

<?php putRevSlider("Portfolio") ?>

Below is what my content-portfolio.php file looks currently:

<?php
	
// =============================================================================
// VIEWS/INTEGRITY/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Integrity.
// =============================================================================
	
$archive_share = x_get_option( 'x_integrity_portfolio_archive_post_sharing_enable' );

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-featured">
    <?php x_portfolio_item_featured_content(); ?>
  </div>
  <div class="entry-wrap cf">
   
    <?php if ( x_is_portfolio_item() ) : ?>

      <div class="entry-info">
        <header class="trip_header">
          <class="entry-title entry-title-portfolio"><?php the_title(); ?></class>
          <?php x_integrity_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
	  <a href="http://oneworldtrek.wpengine.com/contact-us">
    <img src="http://oneworldtrek.wpengine.com/wp-content/uploads/2017/08/Mountain-Man_17.08.12-02.png" alt="One World Trekking" height="75" width="75"/>
    <span class="text">
        Contact Us To Request a Detailed Trip Itinerary
    </span>
       </a>
	    <?php x_portfolio_item_social(); ?>
     <div class="trip_attributes_header">Trip Overview</div>  
     <div class="trip_attributes_header2">Information</div>  
     <div class="trip_attributes_body">
        <?php the_field('trip_snippets'); ?></div>
     <div class="trip_attributes_header2"><?php echo date("Y");?> Dates</div> 
     <div class="trip_attributes_body">
	    <?php the_field('group_departure_date'); ?></div>
     <div class="trip_attributes_header2"><?php echo date("Y");?> Price</div> 
        <div class="trip_attributes_body">
	        <?php the_field('price'); ?></div>
     <div class="trip_attributes_header2">Other Featured Trips</div>
      </div>
      </div>
   </div>

    <?php else : ?>

      <header class="entry-header">
        <h2 class="entry-title entry-title-portfolio">
          <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
        </h2>
        <?php if ( $archive_share == '1' ) : ?>
          <?php x_portfolio_item_social(); ?>
        <?php endif; ?>
      </header>

    <?php endif; ?>

  </div>
</article>

One last question, How could I control the size of this area?

Thanks for the help!

Marcus

#2

Also, a second question. I’m trying to get the area highlight in the attached screenshot to fill the area above “Share this trip with your friends”, and for the text of “Contact Us…” to fill the right 3/4 of the area with the trekking logo taking up the left 1/4, but so each column is the same height more or less.

Basically just so it’s a rectangluar box that is filled proportionally with the logo and “Contact us…”, and that the font size is responsive. I can add a responsive class if that would work.


This is what I have for the css currently:

.entry-extra a img {
    float: left;
}

.entry-extra a .info {
    float: right;
    max-width: 300px;
}

.entry-extra .x-entry-share {
    clear: both;
    margin-top: 30px !important;
}
.entry-extra span.text {
    padding: 4px; 
    display: inline-block;
    max-width: 180px;
    margin-left: 10px;
    text-align: center;
}

Thank you!

#3

Also, how would I add navigation arrows to navigate left or right to the next portfolio items? It would be ideal to add these to the top of the page, below the image and inline with the title, but to the left and right of it.

Thank you so much!

Marcus

#4

Hello Marcus,

Thanks for writing in!

1.) You may need to update your code and use this:

<?php
	
// =============================================================================
// VIEWS/INTEGRITY/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Integrity.
// =============================================================================
	
$archive_share = x_get_option( 'x_integrity_portfolio_archive_post_sharing_enable' );

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

  <?php if ( x_is_portfolio_item() ) : ?>

  	<?php putRevSlider("Portfolio"); ?>

  <?php else : ?>

  	<div class="entry-featured">
    	<?php x_portfolio_item_featured_content(); ?>
  	</div>

  <?php endif; ?>


  <div class="entry-wrap cf">
   
    <?php if ( x_is_portfolio_item() ) : ?>

      <div class="entry-info">
        <header class="trip_header">
          <class="entry-title entry-title-portfolio"><?php the_title(); ?></class>
          <?php x_integrity_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
	  <a href="http://oneworldtrek.wpengine.com/contact-us">
    <img src="http://oneworldtrek.wpengine.com/wp-content/uploads/2017/08/Mountain-Man_17.08.12-02.png" alt="One World Trekking" height="75" width="75"/>
    <span class="text">
        Contact Us To Request a Detailed Trip Itinerary
    </span>
       </a>
	    <?php x_portfolio_item_social(); ?>
     <div class="trip_attributes_header">Trip Overview</div>  
     <div class="trip_attributes_header2">Information</div>  
     <div class="trip_attributes_body">
        <?php the_field('trip_snippets'); ?></div>
     <div class="trip_attributes_header2"><?php echo date("Y");?> Dates</div> 
     <div class="trip_attributes_body">
	    <?php the_field('group_departure_date'); ?></div>
     <div class="trip_attributes_header2"><?php echo date("Y");?> Price</div> 
        <div class="trip_attributes_body">
	        <?php the_field('price'); ?></div>
     <div class="trip_attributes_header2">Other Featured Trips</div>
      </div>
      </div>
   </div>

    <?php else : ?>

      <header class="entry-header">
        <h2 class="entry-title entry-title-portfolio">
          <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
        </h2>
        <?php if ( $archive_share == '1' ) : ?>
          <?php x_portfolio_item_social(); ?>
        <?php endif; ?>
      </header>

    <?php endif; ?>

  </div>
</article>

I have removed the featured image area so that the slider will display on top of the article.

2.) Do you want something like this?

If that is the case, please update your css for that section and use this instead:

.entry-extra span.text {
    padding: 4px;
    display: inline-block;
    max-width: 66%;
    margin-left: 10px;
    text-align: center;
}

3.) To add the post navigation, you may insert this line of code before the “entry-info” div tag.

<?php x_entry_navigation(); ?>

Hope this helps.

#5

Hi there,

  1. Ok great, the slider revolution worked great!

  2. Yes, but it doesn’t quite work. I do want like what your picture looks like, but if it could be centered horizontally and the text also centered vertically that is what I am going for. I tried this code using flexbox, and I got close, but I can’t get it to work. I attached a mobile screenshot too, as the alignment isn’t correct.

Summary

div.container6 {
height: 10em;
display: flex;
align-items: center;
justify-content: center }
div.container6 p {
margin: 0 }

  1. Ok, I have added that. But now I need to make it work with the page layout, which I have attached a screenshot of what I think would be ideal. Don’t mind the red ;):

a: I also added the nav to the bottom of the page, but I can’t for the life of me get it centered. How can I center it? I have attached a screenshot.

  1. New questions:
    a: I’d like to add a slider below the content. I haven’t been able to get it to display at the bottom after the last day though. How could I achieve that?
    b. The “Book Your Trip Now” appears in the middle of the content on Mobile, and breaks the rest of the layout. How can I edit that so that on mobile i.e. screens below ~480px, it shows at the end of the all of the portfolio items content, the 2017 Price area. Please refer to the previous screenshot for notes on both of these.

This is the current content-portfolio.php

<?php
	
// =============================================================================
// VIEWS/INTEGRITY/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Integrity.
// =============================================================================
	
$archive_share = x_get_option( 'x_integrity_portfolio_archive_post_sharing_enable' );

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

  <?php if ( x_is_portfolio_item() ) : ?>

  	<?php putRevSlider("Portfolio"); ?>

  <?php else : ?>

  	<div class="entry-featured">
    	<?php x_portfolio_item_featured_content(); ?>
  	</div>
    <div class="trip_attributes_header2">Other Featured Trips</div>
     	<?php putRevSlider("Portfolio"); ?>
  <?php endif; ?>

  <div class="entry-wrap cf">
    <?php if ( x_is_portfolio_item() ) : ?>
      <?php x_entry_navigation(); ?>
      <div class="entry-info">
        <header class="trip_header">
          <class="entry-title entry-title-portfolio"><?php the_title(); ?></class>
          <?php x_integrity_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
	  <a href="http://oneworldtrek.wpengine.com/contact-us">
    <img src="http://oneworldtrek.wpengine.com/wp-content/uploads/2017/08/Mountain-Man_17.08.12-02.png" alt="One World Trekking" height="75" width="75"/>
    <span class="text">
        Contact Us To Request a Detailed Trip Itinerary
    </span>
       </a>
	    <?php x_portfolio_item_social(); ?>
     <div class="trip_attributes_header">Trip Overview</div>  
     <div class="trip_attributes_header2">Information</div>  
     <div class="trip_attributes_body">
        <?php the_field('trip_snippets'); ?></div>
     <div class="trip_attributes_header2"><?php echo date("Y");?> Dates</div> 
     <div class="trip_attributes_body">
	    <?php the_field('group_departure_date'); ?></div>
     <div class="trip_attributes_header2"><?php echo date("Y");?> Price</div> 
        <div class="trip_attributes_body">
	        <?php the_field('price'); ?></div>
      </div>
      </div>
      <div class="portfolionav"><a href="http://oneworldtrek.wpengine.com/trips-destinations/view-all-trips/">All Trips</a><?php x_entry_navigation(); ?></div>
   </div>

    <?php else : ?>

      <header class="entry-header">
        <h2 class="entry-title entry-title-portfolio">
          <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
        </h2>
        <?php if ( $archive_share == '1' ) : ?>
          <?php x_portfolio_item_social(); ?>
        <?php endif; ?>
      </header>

    <?php endif; ?>
  </div>
</article>

Thank you!!

#6

Hi there,

  1. Glad it works now
  2. Would you mind providing more clarification of how you wanted it to be, like mockup design? Maybe the term alignment is what confuses both sides :slight_smile:
  3. Please add this CSs as well
.single-x-portfolio .entry-wrap {
    padding-top: 35px;
}
  1. a It’s probably due to malformed HTML code, and because of that, your navigation is pushed out the entry-wrap container. You can check it here https://validator.w3.org/nu/?doc=http%3A%2F%2Foneworldtrek.wpengine.com%2Ftrekking-trips%2Fannapurna-circuit-lodge-trek-nepal%2F and you’ll see error about stray and end tags. You can only display it in its proper position and align them if you fix those errors.

New questions

a. If you just wish to display it right after the content, then place it right under <?php x_get_view( 'global', '_content', 'the-content' ); ?>

b. You can’t fix it until you fixed the layout and structure issues due to malformed HTML codes. Please do that first.

Please note that we don’t provide custom development, any further question and request regarding customization should be directed to your developers. As they may able to fully help you with issues and mistakes done during the customization. We could only provide some snippet or idea to get you started.

Thanks!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.