Adding Arrows to the Portfolio Post / Without Bread Crumbs

Support
#1

I need to know how I can turn on the navigation arrows for the portfolio items I have a gallery that goes to a post of a portfolio item but you cant go to the next item where or how can I add this function seems it should be on by default.

Im using Integrity stack.

How can I use the arrows but not the page title from enabling bread crumbs I do see that shows the arrows and a weird grey bar plus image title or post title. Not really feeling that look.

How Can I add some of my own vector arrows so all posts and portfolio items on site are a bit more custom?

What code would I need to add these custom arrows ?

Can I chose to have it at top center of post or center of bottom ?

Or maybe I can add them Just above the social Icons In the 1st pic I uploaded here?

#2

Hi There,

Thanks for writing in!
Regretfully those functions are not offered by X and this is something you need to customize theme yourself.
We are really sorry but this is something out of our theme support scope.

Thanks for understanding.

#3

well thats extremely unhelpful if thats the level of support that you want to offer maybe ill just buy another theme that has more helpful staff responses then this. Maybe someone else can help on this.

#4

Hi there,

We are sorry for the inconvenience. The requests are all indeed not part of our theme and those are not available out of the box and will need customization. Customization is outside of our support scope and we will not be able to implement the feature. But we will do our best to give you proper suggestions to help you implement them yourself.

Also, please keep the questions apart on separate threads so we can focus on each case to be able to give you the best support possible.

As I do not have access to your website to be able to check the live code I assume your current website situation is like this page:

http://demo.theme.co/integrity-1/portfolio-item/sierra-farm/

The arrows at the top are part of the title section which also the breadcrumbs is. You can make the arrow section and the rest of the page unified by adding the CSS code below to X > Launch > Options > CSS:

.single-x-portfolio .x-breadcrumb-wrap {
    border: none;
    background: none;
    box-shadow: none;
    padding-bottom: 0
}

.single-x-portfolio .x-breadcrumb-wrap .x-breadcrumbs {
    display: none;
}

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#5

Ok That code worked Thanks.

I have added custom vector arrows to the top right for navigation but what if I wanted them in the middle at the bottom of the post image? see the 2 images here, Basically between the post description and the social share icons or maybe bottom right above the social icons might be nice too.

#6

Hi there,

That is not possible unfortunately as the arrows are generated in the landmark header file and not inside the content of the portfolio.

The only way is to add extra information in the place that you want and then hide the actual ones. Then you will need to add a Javascript code to act the same thing which the top section does.

You will need to install the Child Theme and add the file below there:

wp-content/themes/x/framework/views/integrity/content-portfolio.php

So the Child Theme file will be like this:

wp-content/themes/x-child/framework/views/integrity/content-portfolio.php

Then, add the code below to the file:

<?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="x-nav-articles">
    <a href="#" title="" class="prev">
      <i class="x-icon-arrow-left" data-x-icon=""></i>
    </a>

    <a href="#" title="" class="next">
      <i class="x-icon-arrow-right" data-x-icon=""></i>
    </a>
  </div>

  <div class="entry-wrap cf">

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

      <div class="entry-info">
        <header class="entry-header">
          <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
          <?php x_integrity_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social(); ?>
      </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>

And you will need to add the CSS code below to X > Launch > Options > CSS:

.single-x-portfolio article.x-portfolio .x-nav-articles {
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
}

That will add the icons but it will not work unless you add the code below to X > Launch > Options > JS:

(function( $ ) {
	$(function() {

		$('.single-x-portfolio article.x-portfolio .x-nav-articles a.prev').on('click', function() {
			var theLink = $('.x-breadcrumb-wrap .x-nav-articles a.prev').attr('href');
			window.location.href = theLink;
		});

		$('.single-x-portfolio article.x-portfolio .x-nav-articles a.next').on('click', function() {
			var theLink = $('.x-breadcrumb-wrap .x-nav-articles a.next').attr('href');
			window.location.href = theLink;
		});

	});
})(jQuery);

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#7

Thanks for that I have not tried the code just yet

I noticed an issue I was able to turn off the bread crumbs title and bar on post pages only. but the whole site has breadcrumbs and titles and the grey bar. can you tell me, how I can turn this off? Its on every page because I have the bread crumbs turned on to see the arrows to go to next image for the portfolio posts. we need these arrows on top right to get to next image. but dont need page titles and little house icon + the grey bar.

see first 2 pics have bar and 3rd one no bar i was able to edit the css to turn this off thanks to your support team see above response from staff.

#8

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#9

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