Portfolio Customization: Move title and info next to featured image

Brad_B_1 · June 12, 2018, 4:20pm

Hi,

I am trying to customize my portfolio pages and need a little help. I would like to move the page title, tags, and share options to the right of the featured image (please see attached image). I’m assuming that this requires working with the PHP files, but don’t know where to start. Any help would be greatly appreciated. Thanks!

mldarshana · June 12, 2018, 9:28pm

Hi There @Brad_B_1

Thanks for writing in! Custom development is outside the support we can provide. However I can point you to the right direction.

First setup a child theme and activate it by following our guide here (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57). Then you can copy the file on the following location (x/framework/views/renew/content-portfolio.php) into your child theme’s respective location (x-child/framework/views/renew/content-portfolio.php).

Then you can edit the file content-portfolio.php using a text editor and make your changes.

For example, locate the following line of code and below that you will see elements specific to your single portfolio page.

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

Hope that helps.

Brad_B_1 · June 12, 2018, 10:36pm

Thanks so much for the reply. I understand that this is outside support scope. One questions, though - I know nothing about PHP. Can I reconfigure the page elements in content-portfolio.php? Or does that just add the elements which I would reconfigure with CSS? In other words, would I make the portfolio title inline with the featured image with PHP or CSS?

Thanks again!

christopher · June 13, 2018, 5:53am

Hi Brad,

Actually, it needs a combination of the PHP change and also the CSS code. You will need to PHP changes to change the location of the parts of the page you want to change, and CSS code after the change as the current CSS is accommodated for the current location, now if you change location, the CSS might not be appropriate for that change and you will need to add custom CSS to accommodate for the changes.

This will be way beyond our support scope to give you PHP code. But if you want we can give you a JavaScript code that changes the places of the sections you want. Please add the JavaScript code below to X > Theme Options > JS:

jQuery('.single-x-portfolio .p-meta').prependTo('.single-x-portfolio .x-sidebar');
jQuery('.single-x-portfolio .entry-header').prependTo('.single-x-portfolio .x-sidebar');
jQuery('.single-x-portfolio .entry-featured').prependTo('.single-x-portfolio .entry-info');

The code above will do the location changes but you will still need CSS coding to make proper changes and set the position of the sections in the correct place. You may need to revisit whatever changes that you have already done regarding the custom CSS code of that page.

Thank you.

Brad_B_1 · June 13, 2018, 3:01pm

Thank you so much! very appreciated.

jade · June 13, 2018, 7:03pm

You’re most welcome.

Brad_B_1 · June 14, 2018, 3:11pm

Hi, I was able to edit the PHP and add some CSS to achieve what I wanted, but t brought up two new questions that I’m hoping you can help me with:

When I edit CONTENT-PORTFOLIO.PHP, it also effects how the items are shown on the blog index page. You can see what i’m talking about on the “blog” page - the title, meta, and social are now below the images on the index also. How can I avoid this?
I would also like to add a custom field to the individual portfolio pages. I tried creating a field int he page editor and adding the code below to CONTENT-PORTFOLIO.PHP. However, it isn’t working. Any guidance would be appreciated. Thanks!
```
 		$value = get_post_meta( get_the_ID(), 'highlight', true );
```

rad · June 14, 2018, 7:34pm

Hi @Brad_B_1,

Would you mind providing the sample file that you applied? I checked it in your provided site and there seems no change at all. That’s for portfolio and shouldn’t be affecting the blog posts.
That should work, it should be

$value = get_post_meta( get_the_ID(), 'highlight', true );
echo $value;

or simply

echo get_post_meta( get_the_ID(), 'highlight', true );

I checked your page and I don’t see highlight custom field either.

Thanks!

Brad_B_1 · June 14, 2018, 8:34pm

Thanks for the reply!

The code you provided for the custom field worked. Thanks!
Sorry, I may have not been clear enough. I am using the portfolio as my blog. I edited CONTENT-PORTFOLIO.PHP. I also added some new CSS. It is working, but it is also effecting the portfolio index page ( visible under the ‘blog’ tab of the site). As you can see, the custom filed is showing up under the images on the index page. I am working from a staging site, so i have changed the info in the secure form to reflect it.
this is a new question I am hoping you can help me with: as you can see, the share items are inline with the excerpt and image. How can I clear them, so they appear below the excerpt? The CSS I am using is below:

.single-x-portfolio .entry-featured{
display:flex;
padding:9% 0 3.5% 0!important;
border-bottom: 1px groove #fff;
margin: 0 5.5%;
}

.entry-image{
padding-right:2%;
width:200%;
}

.x-entry-share{
border:none;
text-align:left;
display: block!important;
clear:both!Important;

}

.port-excerpt{
font-weight:bold;
font-style:italic;
font-size:120%;
}

Thanks SO much!

ruenel · June 15, 2018, 1:41am

Hello There,

Thanks for updating in!

2.) So that the changes will only affect the single portfolio item page, please use this code block:

if ( is_single() ) {
   $value = get_post_meta( get_the_ID(), 'highlight', true );
  echo $value;
}

3.) Please remove this code from the content-portfolio.php file.

<div class="port-social">
  <?php x_portfolio_item_social(); ?>
</div>

And then add this in your child theme’s functions.php file

function add_x_portfolio_item_social(){
	if ( ! is_single() ) { ?>
		<div class="port-social">
		  <?php x_portfolio_item_social(); ?>
		</div>
	<?php }
}
add_action('x_before_the_excerpt_end', 'add_x_portfolio_item_social');

Hope this helps.

Brad_B_1 · June 15, 2018, 3:37pm

THanks so much for the help! I added the code, but there are still some issues. The share icons are still showing up on the index page. Also, I can’t get the ‘highlight’ excerpt to show now. I tried adding the code below to content-portfolio.php, Custom JS, and functions.php. None of them work. Any idea what’s wrong? Thanks again!

Alaa · June 15, 2018, 6:08pm

Hi @Brad_B_1

For the social icons issue, I’ve corrected the code in functions.php for you to be like:

function add_x_portfolio_item_social(){
	if ( is_single() ) { ?>
		<div class="port-social">
		  <?php x_portfolio_item_social(); ?>
		</div>
	<?php }
}
add_action('x_before_the_excerpt_end', 'add_x_portfolio_item_social');

Now, you should see the share icons on single portfolio posts only, not archive page.

For the highlight meta field issue, please check this screenshot:

Thanks.

Brad_B_1 · June 15, 2018, 9:13pm

Again, thanks so much! The highlight excerpt is working perfectly now. However, the share icons still aren’t showing up. The code is in functions.php exactly as its written. Any idea what’s wrong? Thanks again!

ruenel · June 15, 2018, 11:22pm

Hello There,

Let me clarify this. Do you want to display the social icons in the single portfolio item?
If that is the case, please update the code and use this:

function add_x_portfolio_item_social(){
	if ( is_single() ) { ?>
		<div class="port-social">
		  <?php x_portfolio_item_social(); ?>
		</div>
	<?php }
}
add_action('x_after_the_content_begin', 'add_x_portfolio_item_social');

The social icon will display above the contents of the portfolio item.

And if you want to display the social icon just below the excerpt only, then this code would help:

function add_x_portfolio_item_social(){ ?>
  <div class="port-social">
    <?php x_portfolio_item_social(); ?>
  </div>
<?php }
add_action('x_before_the_excerpt_end', 'add_x_portfolio_item_social');

Hope this helps. Kindly let us know.

system · June 25, 2018, 11:21pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.