• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Getting portfolio page to show images only

Home › Community Forums › Epik Theme Support › Getting portfolio page to show images only

  • This topic has 10 replies, 3 voices, and was last updated 8 years, 10 months ago by Bob_Fortner.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 22, 2013 at 10:24 am #2882
    Bob_Fortner
    Customer

    How can I get my portfolio page to display images only?  In portfolio settings I selected “display post excerpts” and limited characters to zero, which eliminates any of the post content from being displayed, but the post title still shows up.

    http://bobfortner.com/portfolio-2/

    February 22, 2013 at 12:46 pm #2885
    Wes
    Moderator

    There are a couple ways to do it. One way is to just add display: none; to the title and content (for the portfolio content only).

    The other way is to go into your portfolio page and change this –

    // Move title below post image
    remove_action( 'genesis_post_title', 'genesis_do_post_title' );
    add_action( 'genesis_post_content', 'genesis_do_post_title', 9 );

    to this –

    // Move title below post image
    remove_action( 'genesis_post_title', 'genesis_do_post_title' );

    By removing – “add_action( ‘genesis_post_content’, ‘genesis_do_post_title’, 9 );” you are removing the title.

    Then for the content, look for and remove this –

    // Add Content for the Portfolio posts in this Page Template
    add_action( 'genesis_post_content', 'epik_portfolio_do_post_content' );
    function epik_portfolio_do_post_content() {
    if ( genesis_get_option( 'epik_portfolio_content' ) == 'excerpts' ) {
    the_excerpt();
    } else {
    if ( genesis_get_option( 'epik_portfolio_content_archive_limit' ) )
    the_content_limit( (int)genesis_get_option( 'epik_portfolio_content_archive_limit' ), __( 'Read More', 'epik' ) );
    else
    the_content(__( 'Read More', 'epik' ));
    }
    }

    You can also just comment these out if you don’t want to remove them completely. To comment something out just add this in the beginning of the code /* ….and add this to the end */ …Example – /* Code */

    February 22, 2013 at 12:52 pm #2887
    Wes
    Moderator

    An easier way to add the display: none; to your title can be done by adding this –

    .portfolio .entry-content {
    display: none;
    }

    February 22, 2013 at 12:58 pm #2889
    Bob_Fortner
    Customer

    Thanks for the quick reply Wes!!  I commented out the two pieces of code and added the one back.  It works great all except for a white border that’s at the bottom of each image.  Is there something I can add or comment out to remove that?

    February 22, 2013 at 1:45 pm #2890
    Wes
    Moderator

    That white that you’re seeing is actually the background for the content. You can still see it because of the padding thats still there. So to fix this, you’ll need to remove the padding, the background, and maybe the box-shadow as well in order to show the image by itself.

    First add background: none; and change the box shadow to none – “#content .portfolio” around line 1722 in your css like this –

    #content .portfolio {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    background: none;
    float: left;
    margin: 0 2% 40px 0 !important;
    overflow: hidden;
    padding: 0;
    width: 23%;
    }

    Next, remove the padding for the entry-content like this –

    .portfolio .entry-content {
    padding: 0;
    }

    February 22, 2013 at 6:59 pm #2893
    Bob_Fortner
    Customer

    Okay, so far I haven’t broken anything 🙂 and that worked great!  Is there any way to get the shadow only back?  I tried just adding the line “background: none;” and it kept the shadow but also kept about 1/2 of the white space.

    February 22, 2013 at 9:59 pm #2898
    Wes
    Moderator

    I would add it specifically for the portfolio image itself. Before, the box shadow was applied to the entire content area (image title and content space). To add it just to the image add this –

    .portfolio img {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0, .2);
    }

    February 22, 2013 at 10:10 pm #2899
    Bob_Fortner
    Customer

    Thank you so much Wes!!  It worked perfectly.  Loving Epik so far and cannot wait to get the main page all tweaked…. my next little project.  Have a great weekend 🙂

    February 22, 2013 at 10:18 pm #2901
    Wes
    Moderator

    Sounds good!

    You’re Welcome!

    August 27, 2013 at 2:29 am #6868
    lisao
    Customer

    Bob, I noticed you mention that your settings are set to display only post excerpts and that you could indicate a limit of the characters that display. How come I don’t have that option in my WordPress dashboard under Theme Settings? Do you know why that might be?

    August 27, 2013 at 8:33 am #6873
    Bob_Fortner
    Customer

    It’s under Genesis – Theme Settings – Portfolio Page Settings

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 · Appfinite · Built With The Genesis Framework