How to add a content area on the portfolio-page?

[xorpad]

Hey,
im using the Ethos stack and would like to modify the layout of my portfolio image view page.
I would like to add a content box below the featured image area, so that i can write some more content.

First ive set up a x-child theme and everything worked fine.
Ive added a div-class called “entry-test-class” to the content-portfolio.php file .

<div class="entry-featured">
    <?php x_portfolio_item_featured_content(); ?>
    <div class="entry-test-class">
       <?php x_get_view( 'global', '_content','the-content'); ?>
     </div>
</div>

But the x_get_view() function is just mirroring my content from

<div class="entry-wrap cf">...</div>

How can i add a content area or content box below the entry-featured area, so that i can write more content. What php-functions do i need to create or change and where can i find them?. Maybe theres an easier way ?.

Thanks for your help guys

[jade]

Hello Jean-Pierre,

If you want to add the portfolio item content to in each of the portfolio item on the portfolio page, you may try adding this code in the functions.php:

// Entry Cover
// =============================================================================

if ( ! function_exists( 'x_ethos_entry_cover' ) ) :
  function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover">
              <span><?php x_the_alternate_title(); ?></span>
              <span><?php echo get_the_content(); ?></span>
          </h2>
        </a>
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">
            <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
            <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
            <span class="entry-cover-date"><?php echo get_the_content(); ?></span>
          </div>
        </a>
      </article>

    <?php }

  }
endif;

The area in the code where the content is added is the line <?php echo get_the_content(); ?>.

You may use the get_the_excerpt(); if you want the shorter content version.

Please note that this line will output all the content of the that is in the content area set in the portfolio item.

You will also have to adjust the CSS of the entry cover area by adding this to the Global CSS:

.page-template-template-layout-portfolio .h-entry-cover {
    top: calc(100% - 6em);
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[xorpad]

Thank you very much the code worked fine!. Unfortunatly its the cover image area, but i need to change the opened single portfolio page template layout itself. Where ppl can read my content and its split in left side image and right side text. I think its x-portfolio-template-default or something.

Sry for confusing ill falsely wrote featured image area.
Below the image, i would like to add a content area or texting area.

Big thanks

[jade]

Hi Jean-Pierre,

My apologies but I am still not certain about what you mean because, by default, the portfolio content is displayed beside the portfolio featured image just like what is shown on this demo:

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

If you simply want to have the featured image show up above the portfolio item content, you can add this code in X > Theme Options > CSS:

.single-x-portfolio .entry-featured {
    width: 100%;
    padding: 0;
}

.single-x-portfolio .entry-featured img {
    width: 100%;
}

.single-x-portfolio .entry-wrap {
    width: 100%;
}

Hope this helps.

[xorpad]

Sry i hope this explains it a bit better.

[jade]

Hi Jean-Pierre,

Thanks for the screenshot, that explains it better.

In order to do that, you will have to add custom field for the portfolio post type so that you can add the content. You may use ACF for this which is a plugin that comes bundled with X.

Please check this KB article which has the complete guide on how to use ACF Pro:

ACF Pro | Themeco Docs

Once you have everything setup in the admin area, you will then have to add the custom field in the portfolio template like this:

// Entry Cover
// =============================================================================

if ( ! function_exists( 'x_ethos_entry_cover' ) ) :
  function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover">
              <span><?php x_the_alternate_title(); ?></span>
              <span><?php the_field('portfolio_extra_content'); ?></span>
          </h2>
        </a>
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">
            <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
            <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
            <span class="entry-cover-date"><?php echo get_the_content(); ?></span>
          </div>
        </a>
      </article>

    <?php }

  }
endif;

Please take note of the line: <span><?php the_field('portfolio_extra_content'); ?></span>. The code assumes that the field you have added is portfolio_extra_content. Change it to the the field name that you used.

Hope this helps.

[xorpad]

Thank you very much !!,
now it works perfect using <?php the_field('portfolio_extra_content'); ?> in my portfolio template.

[jade]

You’re most welcome.