Adding Content to Portfolio Entry Thumbnail

[jessebrito]

Hello, on my website I want to display portfolio thumbnails with two separate pieces: the image background which would be the regular featured image and a logo overlaid on top.

I actually have achieved this by editing content-portfolio.php and placing it in my child theme. I used Advanced Custom Field to add the logo to my portfolio and added it using ACF’s the_field().

Here are my code for content-portfolio.php below:

<?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">
    <!-- Add an overlay div and the logo using ACF the_field(); -->
    <div id="post-<?php the_ID(); ?>-overlay" class="portfolio-overlay">
      <img id="post-<?php the_ID(); ?>-logo" class="portfolio-logo" src="<?php the_field('logo'); ?>">
      <?php x_portfolio_item_featured_content(); ?>
    </div>
  </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>

I use portfolio-overlay to position my logo over the thumbnail. I would also like to use it as a colour overlay.

While this method works, the overlaid logo is actually not part of the thumbnail link. It would be better if I can add my content inside x_portfolio_item_featured_content(); so they are nested inside the <a class="entry-thumb"> tag. By nesting the overlay I can also add the colour effect and have it fade on hover.

How can I add content inside the portfolio item’s thumbnail? Is there an action hook I can use or code to edit somewhere?
Please let me know! Thank you!

[marc_a]

Hi @jessebrito,

Thanks for reaching out.

Regretfully, we can’t provide custom development because it is outside the scope of our theme support. Please ask help for a 3rd party developer or you can avail our One program where it will answer all your questions.

Hope that helps and thank you for understanding.