Docs

[dkolba]

Hello,

I am using the renew stack. I wanted to get rid of the featured image when you click on it from the portfolio and was wondering how I would do this?

I want the featured image to be on the portfolio page (in the grid of other images) but then once the user clicks, I do not want the image to be shown.

I still would like all my blog featured images to be shown.

Thank you,

Dana

[Friech]

Hi Dana,

Thanks for writing in! On your admin dashboard, please navigate to Appearance > Customize, then on Customizer add the custom CSS below under Custom > Global CSS.

.single-x-portfolio .entry-featured {display: none;}

And then save.

Hope it helps, Cheers!

[dkolba]

Perfect!!

I have a two more questions about the portfolio: http://dananicoledesigns.com/portfolio

1) I made the images smaller, but cannot figure out how to get them to be closer together and centered on the page. THeir container is still the original size it appears.

2) When I hover upon the image it says: Image, “Name of Image”, Date. Is there anyway for me to edit that? I’d like Image to say something else, and to change the date to something else as well.

Thanks!

[Jade]

Hi Dana,

I tried checking your site but the portfolio page goes to a 404 page now.

Kindly put it back so that we can check it.

Thank you.

[dkolba]

Im so sorry. It is published now.

[dkolba]

That actually didn’t work. The coding I used shrunk all my blog post images as well. So what I’m looking for is a way to resize the portfolio images smaller, as well as make sure they are centered in the page with even margins 🙂

[Darshana]

Hi there,

You can add this under Custom > CSS in the Customizer.

.page-id-55351 .entry-thumb img {
    margin-left: 4%;
    min-width: 50%;
}

.page-id-55351 .entry-thumb {
    background-color: #ffffff;
}

Hope that helps.

[dkolba]

Hello,

Unfortunately that didn’t work. I am also try to change the text that appears on the image upon hover (after we figure out the resizing).

Thank you

Dana

[Paul R]

Hi Dana,

You can try this code instead.

.page-id-55351 .entry-thumb img {
    width: 50%;
    min-width: 0;
}

.page-id-55351 .entry-thumb {
    background-color: #fff;
    text-align: center;
}

Hope that helps.

[dkolba]

Hi,

Thank you. This half-works. If that code just makes the image inside the box smaller, however, the actual box itself is still large. I would like the entire area to be smaller and centered. I can achieve this by the following code:

.page-id-55351 .entry-featured {
    width: 50%;
    min-width: 0;
}

.page-id-55351 .entry-featured {
    background-color: #fff;
    text-align: center;
}

However now it isn’t centered because it seems to be inside another div with the class:

post-55390 x-portfolio type-x-portfolio status-publish has-post-thumbnail hentry portfolio-category-web-design x-portfolio-a6c1ccc9fee24f6264e5f5762eeb6532 isotope-item

I am not sure how to target that class and make that smaller.

I’d like to get the boxes the size they are now (www.dananicoledesigns.com/portfolio) but centered in the page with custom margins around each box.

Thank you!

[Paul R]

Hi,

Please change code with this.

.page-id-55351 .x-container.max {
    max-width: 600px;
}

If that doesn’t work, kindly provide us with your wordpress admin login so we can take a closer look.

Thanks

[dkolba]

Wonderful – that works! Thank you.

And how do I change the text that appears upon hover?

Thank you

[Paul R]

Hi,

To change it create file content-portfolio.php in wp-content/themes/x-child/framework/views/renew
and copy the code below into that file.

<?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(); ?>
      <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">
            <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>
          <span><?php echo get_the_date( 'm.d.y' ); ?></span>
        </div>
      </div>
    </div>

  <?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>
        <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>

Then change these lines

        <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">
            <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>
          <span><?php echo get_the_date( 'm.d.y' ); ?></span>
        </div>

Hope that helps.

[dkolba]

Hi,

That works.

This code however to shrink down the images is not working:

.page-id-55351 .x-container.max {
    width: 50%;

}

If you look at my page: http://www.dananicoledesigns.com/portfolio you will see that while the images are smaller, the entire page is at a 50% width – meaning my menu is not full width like it is supposed to be (my contact link is now on line 2 and there shouldn’t be two lines).

How can I make the images smaller without changing the width of the entire page?

Thank you,

Dana

[Rad]

Hi there,

Please change it to this

.page-id-55351 .x-main.full {
    float: none;
    display: block;
    width: 50%;
    margin: 0 auto;
}

Cheers!

[Author]

Posts