Docs

[eiriktrials]

I want to do some modifications to my portfolio page (http://eiriktrials.com/press-page), and would like to get some help with it.

1. The text I write at Pages > Portfolio does not show up at the Portfolio page. I would like to have a short intro above the portfolio content.

2. Each portfolio item has a post type tag when you hover (Image/Gallery/Video). Is it possible to change that to the portfolio category?

3. When you hover the different portfolio items (anywhere but on the text), random links appear from other items. I would like to make the complete thumbnail of each portfolio item clickable.

4. Is it possible to make the thumbnails always display the top of the image, and only cutting off from the bottom of the image?

Thanks for the help!

[Christopher]

Hi there,

#1 By default you can not add any description in portfolio page.
Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Create template-layout-portfolio.php file insde YOUR CHILD THEME -> framework -> views -> renew and add this code in there:

<?php

// =============================================================================
// VIEWS/RENEW/TEMPLATE-LAYOUT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio page output for Renew.
// =============================================================================

?>

<?php get_header(); ?>

  <div class="x-container-fluid max width offset cf">
    <div class="<?php x_main_content_class(); ?>" role="main">
    <div class="custome-description">Add Some Description Here</div>

      <?php x_get_view( 'global', '_portfolio' ); ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

Instead of ‘Add Some Description Here’ add your text.

#2 Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer.

#3 Need more information on this ,i don’t see random link,would you provide some screen shot.

#4 WordPress resize images in proportion and we can not decide to cut it off only from bottom.

Hope it helps.

[eiriktrials]

Thanks for the help. Regarding #2, is it possible to remove the whole ‘IMAGE’ text when hover the image?

And #3, the most important part is to make the whole thumbnail an active link (same as the text in the thumbnail. Is that possible?

[John Ezra]

Hi there!

For #2:

You can add this under Custom > CSS in the Customizer or within your child theme’s style.css.

.entry-cover-content span:first-child {
display: none;
}

Note this will only get rid of “IMAGE” Text, if you wanted to remove the date as well – just remove the :first-child

For #3:

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have that you will need to locate and copy the content-portfolio.php file from:
/wp-content/themes/x/framework/views/renew/content-portfolio.php

Then you would paste that into your child theme in the exact location, like so:
/wp-content/themes/x-child-renew/framework/views/renew/content-portfolio.php

Then you would need to replace the content of the content-portfolio.php with the code below:

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Renew.
// =============================================================================

?>

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

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

    <div class="entry-featured">
      <?php x_portfolio_item_featured_content(); ?>
      <a href="#"><div class="entry-cover">
          <div class="entry-cover-content">
            <span><?php echo get_post_meta( get_the_ID(), '_x_portfolio_media', true ); ?></span>
            <h2 class="entry-title entry-title-portfolio">
              <?php x_the_alternate_title(); ?>
            </h2>
            <span><?php echo get_the_date( 'm.d.y' ); ?></span>
          </div>
        </div>
            </div></a>

  <?php endif; ?>

  <div class="entry-wrap cf">

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

      <div class="entry-info">
        <div class="entry-featured">
          <?php x_featured_portfolio( 'cropped' ); ?>
        </div>
        </div>
        <div class="entry-text-content">
          <header class="entry-header">
          <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
          <?php x_renew_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 endif; ?>

  </div>
</article>

Explanation: the code change involves removing the anchor tag around the title and then putting it around the entire entry cover content div (the hover overlay) so the entire div is clickable.

Note: The above will work already, but you will run into an issue with items that have a gallery (forwards backwards buttons) as the overlay will now be under such items. To fix this we again use CSS, so add the following rule to your style.css

.entry-cover {
z-index: 10;
}

You only need a z-index of 2 actually to get the overlay above the thumbnail. but to get it above the scroll buttons you need 10. so change this according to preference.

Hope this helps!

[eiriktrials]

Thanks again. Now it’s looking much better.

There was some issues with the modification you provided though.

1. The link on each thumbnail was set to #. I managed to fix it myself.

2. The design on a single portfolio page is messed up. The box with share this/read more/tags jumped down below the image. Ex: http://eiriktrials.com/press-item/dt-no/

[Zeshan]

Hi there,

Thank you for posting in!

#1: Glad to hear you’re able to fix it 🙂

#2: Please replace the above given code with following:

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Renew.
// =============================================================================

?>

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

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

    <div class="entry-featured">
      <?php x_portfolio_item_featured_content(); ?>
      <a href="#"><div class="entry-cover">
          <div class="entry-cover-content">
            <span><?php echo get_post_meta( get_the_ID(), '_x_portfolio_media', true ); ?></span>
            <h2 class="entry-title entry-title-portfolio">
              <?php x_the_alternate_title(); ?>
            </h2>
            <span><?php echo get_the_date( 'm.d.y' ); ?></span>
          </div>
        </div>
            </div></a>

  <?php endif; ?>

  <div class="entry-wrap cf">

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

      <div class="entry-info">
        <div class="entry-featured">
          <?php x_featured_portfolio( 'cropped' ); ?>
        </div>
      </div>
      <div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social(); ?>
      </div>
      <div class="entry-text-content">
        <header class="entry-header">
        <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
        <?php x_renew_entry_meta(); ?>
      </header>
      <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>

    <?php endif; ?>

  </div>
</article>

Hope this helps. 🙂

Thank you.

[inactive111]

Hi support, can you provide some additional information regarding how to stop the date displaying per above:

“For #2:

You can add this under Custom > CSS in the Customizer or within your child theme’s style.css.

.entry-cover-content span:first-child {
display: none;
}
Note this will only get rid of “IMAGE” Text, if you wanted to remove the date as well – just remove the :first-child”

I don’t understand what you mean when you say “just remove the :first-child”

Thanks

[inactive111]

Sorry ignore my last question, I figured out what you meant.

Is there a way to make the entire image of a portfolio clickable instead of just the name?

Thanks

[inactive111]

Hi, I managed to make the whole thumbnail clickable but ran into the same issue that eiriktrials above had with the thumbnails links all set to: #.

I previously used another post (https://theme.co/x/member/forums/topic/directing-an-item-in-portfolio-to-a-page/#post-36075) to set-up specific links for each thumbnail but this appears to be overwritten now and the thumbnails are going to #.

Please advise, thanks.

[Christopher]

Hi there,

#2 Do you want to hide date in portfolio items?if so add this under Customize -> CSS

.p-meta span:nth-child(2) {
display: none;
}

Regarding to last question please provide us with URL .

Thank you.

[wdi_oh]

Hi, did inactive111’s question about all the links changing to “#” get answered? I followed the same post they linked to (as well as this one: https://theme.co/x/member/forums/topic/portfolio-item-page-layout-problem-no-fullwidth-band-possible/#post-37259), and am having the same issue with the links directing to individual pages (instead of the portfolio item pages).

[Paul R]

Hi,

Can you provide us your site url so that we can take a closer look.

Thanks

[wdi_oh]

http://www.worlddigitalimaging.com/test3/portfolio/

Although I haven’t solved it yet, I found that in the new content-portfolio.php (from the above post on November 28th) in the child theme has the href pointing to # under entry-featured. I don’t know if that has anything to do with it though. The only other thing I’ve changed is that I followed the functions.php change (to link the portfolio page link to a full/individual page) in the link I included in my last post.

[Zeshan]

Hi there,

Yes, please try removing the content-portfolio.php file from your child theme or replace the # with <?php the_permalink(); ?>.

Let us know how it goes.

Thanks!

[wdi_oh]

replace the # with <?php the_permalink(); ?>

That worked! Thank you!

[Author]

Posts