Portfolio Item Page Customizations

[Brad_B_1]

Hi,

I am customizing my portfolio pages and have run into a couple issues. Your help would be greatly appreciated. I added a sidebar using the steps outlined here: https://theme.co/apex/forums/topic/adding-sidebar-to-single-portfolio-pagepost/. I also added the code below to make the sidebar sit below a full width featured image:

(function($) {
$('.single .entry-featured').insertAfter('header.masthead');
})(jQuery);

I am experiencing the following issues:

1. The Portfolio page titles have disappeared. How can I get them back?

2. The site is loading the JS above after everything else, so when you visit one of these pages there is a strange jumping effect. Is there anything I can do about that?

Thank you so much!

[ruenel]

Hello There,

Thanks for posting a very detailed post information.

1.) The portfolio item titles is missing because you are referring to a different stack in displaying the portfolio item contents.

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-SINGLE-X-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Single portfolio post output for Integrity.
// =============================================================================

?>

<?php get_header(); ?>
  
  <div class="x-container-fluid max width main">
    <div class="offset cf">
      <div class="x-main left" role="main">

        <?php while ( have_posts() ) : the_post(); ?>
          <?php x_get_view( 'ethos', 'content', 'portfolio' ); ?>
          <?php x_get_view( 'global', '_comments-template' ); ?>
        <?php endwhile; ?>

      </div>
	  <?php get_sidebar(); ?>
    </div>
  </div>

<?php get_footer(); ?>

As you notice in the code above, it is calling ethos stack yet you are using the integrity. Please change ethos to integrity and your titles will display again.

2.) The strange jumping is because of your custom JS that moves the featured image below the masthead. Upon the initial page load, the featured image is situated within your content and as soon as the all the body elements were loaded, the custom JS moves away the featured image and relocates it. If you want to prevents this from happening, I am afraid that you need to remove the custom JS and modify the whole featured image section for your single portfolio items.

Hope this helps.

[Brad_B_1]

Thank you so much for the quick reply. That fixed the title issue.

Can you point me in the right direction with modifying the featured image section? Is that something I would have to do in the PHP files? Any help would be GREATLY appreciated!

Also, could I just add a CSS class to the featured image that hides it, then add something to the JS that removes that class? Something like this:

.hidden{
display:none;

(function($) {
$('.single .entry-featured').insertAfter('header.masthead');
$('.single .entry-featured').removeClass('hidden');

If you think that would work, how can I add a class to the featured image?

Thanks again.

[friech]

Hi There,

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Add this to Theme Options > CSS to hide the featured image initially

.single-x-portfolio .entry-featured .entry-thumb {
	display: none;
}

Then add this to Theme Options > JS to show the featured image when the page is ready.

jQuery(document).ready(function($){
	$(".single-x-portfolio .entry-thumb").css("display", "block");
});

Read more here about .ready() function.

Hope it helps,
Cheers!