Getting portfolio page to show images only

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

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.