Full-width portfolio post image in Pro theme

[FoundationDesign]

Arrrrrgh… my ongoing love/hate relationship with Pro. I love Pro because I (a codeless/clueless newbie) can do some really cool things with it, but I hate it because I’m unable to do the simplest of things.

All I want is a Full-width image to sit below my menu and above my post, like in this example http://rdw.co.nz/portfolio/five-mile-stage-1b/ (but below the menu).

Ideally, I would like to set my portfolio post featured image to be Full-width. I couldn’t work that out so I tried the approach below.

I added a current post featured image to a custom header. This works, but now I have the featured image showing twice on the portfolio post.

Next solution. I’m using Advanced Custom Fields PRO to create a portfolio based Global Block, so I thought I would dispense with the featured image, and create an Advanced Custom Fields image field… which allows me to load an image into the post, but it won’t show in either the Global Block or the custom header.

Staging site test post is here… https://staging2.rdw.co.nz/portfolio-item/test/

I would also be very happy if someone could also show me how to remove the post title and date, as well as a solution for the featured image.

Many thanks in advance.

[ruenel]

Hello @FoundationDesign,

Thank you for the very detailed post information. What you have in mind requires template modification so that the default featured image will not display on the page. To do this, simply copy the content-portfolio.php file from wp-content/themes/pro/framework/views/icon/ folder. You will need to modify the content and remove the featured image. The default code is:

<?php

// =============================================================================
// VIEWS/ICON/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <div class="x-container max width">

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

        <header class="entry-header">
          <h1 class="entry-title"><?php the_title(); ?></h1>
          <?php x_icon_entry_meta(); ?>
        </header>

      <?php endif; ?>

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

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

        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
        <div class="entry-extra">
          <?php x_portfolio_item_tags(); ?>
          <?php x_portfolio_item_project_link(); ?>
          <?php x_portfolio_item_social(); ?>
        </div>

      <?php endif; ?>

    </div>
  </div>
</article>

Now, please create a new file in your local computer using a notepad or other text editor. Insert the following code:

<?php

// =============================================================================
// VIEWS/ICON/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <div class="x-container max width">

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

        <header class="entry-header">
          <h1 class="entry-title"><?php the_title(); ?></h1>
          <?php x_icon_entry_meta(); ?>
        </header>

      <?php endif; ?>

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

        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
        <div class="entry-extra">
          <?php x_portfolio_item_tags(); ?>
          <?php x_portfolio_item_project_link(); ?>
          <?php x_portfolio_item_social(); ?>
        </div>

      <?php endif; ?>

    </div>
  </div>
</article>

Save this new filename as content-portfolio.php and upload this file to your child theme’s folder under wp-content/themes/pro-child/framework/views/icon/. You will have to create the folder path since it does not exist yet.

We would love to know if this has worked for you. Thank you.

[FoundationDesign]

Hi @ruenel.

Thanks for the reply.

While I was waiting I did find a CSS solution. I used
.entry-header {display: none;} and .x-portfolio .entry-featured {display: none;} in the Additional CSS panel and that seemed to work to remove the Post title & Date… and the Featured Image.

A couple of questions around your solution… does creating a new content-portfolio.php file address the full width Featured Image problem, or will it just hide the Post title, Date and Featured Image?

Also, is your method better than my CSS one. When I say better, I mean the more correct solution.

[ruenel]

Hello @FoundationDesign,

Does creating a new content-portfolio.php file address the full width Featured Image problem, or will it just hide the Post title, Date and Featured Image?

• No. It only removes the featured image from being loaded on the page.

Also, is your method better than my CSS one? When I say better, I mean the more correct solution.

• The CSS method is correct and easiest.

Removing the featured image means to remove this block in the code above:

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

If you only want to remove the featured image in the single portfolio posts, you can use a condition like:

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

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

      <?php endif; ?>

Again, this code as just an example and a guide to give you more ideas on how you can remove the featured image on the single portfolio page.

Hope this helps.