Remove Sidebar on Single Page

[Tree78]

Trying to remove the sidebar on a single page only. Problem is I cannot find the page id of this url...

https://eleventreemedia.com/portfolio/

It is a generated portfolio page and it isn't listed in the pages section of the site.

Can anyone tell me what that page id is or how to find it? Thank you

[Doug Edgington]

There is no page id associated with it, since it is a portfolio post type archive. You can change the page layout via Portfolio-->Archive settings.
Are you trying to single something out using CSS? If so, you can use .post-type-archive-portfolio rather than the page id.

---

Doug Edgington
http://www.dougedgington.com

[Tree78]

Hey Doug,

Thanks for the message. I have done some page editing because I want to try and stick with the filterable portfolio I built. I got it to lay out a little better.

I was wondering if you could tell me what I would need to add and/or subtract from either the .php code or the .css code to get the text that overlays the images to be smaller? And also maybe take away any intro text that may show. I have been having some image sizing and centering issue, but I am close. Trying to get the text sizing and placement fixed. Here is the code below:

/* # Filterable portfolio
---------------------------------------------------------------------------------------------------- */

.post-type-archive-portfolio .site-inner > .wrap {
	max-width: 100%;
	padding: 0;
}

ul.filter {
    color: #999;
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

ul.filter li {
    float: left;
}
ul.filter li:first-child {
  margin-left: 0;
}

ul.filter a {
    color: #555;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-bottom: none;
    font-size: 1.5rem;
    font-weight: 300;
    border-top: 4px solid #fff;
}

ul.filter a:hover, ul.filter a.active {
    border-top: 4px solid #3d91f0;
}

.filterable-portfolio {
    margin-left: -2rem;
    margin-left: -20px;
}

.portfolio-item {
    float: left;
    margin-bottom: 2rem;
    margin-bottom: 40px;
    margin-left: 2rem;
    margin-left: 40px;
    position: relative;
    width: 29%; 
}

.portfolio-item a img {
    display: block;
    margin-bottom: 0;
}

.portfolio-overlay {
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    padding: 30px;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.portfolio-item img:hover + .portfolio-overlay, .portfolio-overlay:hover {
    opacity: 1;
}

.portfolio-overlay h4 {
    font-weight: bold;
    margin: 0;
    width: 100%;
    padding: 5px 7px;
    text-transform: uppercase;
    color: #fff;
}

.clearfix{
    clear: both;
}

/*-----------------------------------------------------------------------------------*
/* = Isotope CSS Animations
/*-----------------------------------------------------------------------------------*/
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

.filterable-portfolio-page .content .entry-header {
    margin-bottom: 1rem;
    margin-bottom: 10px;
}

.filterable-portfolio-page .content .entry-title {
    margin-bottom: 3rem;
    margin-bottom: 30px;
}

@media only screen and (max-width: 1179px) {
    .portfolio-item {
        width: 22%;
    }
}

@media only screen and (max-width: 1023px) {
    .portfolio-item {
        width: 30%;
    }
}
@media only screen and (max-width: 500px) {
    .portfolio-item {
        width: 100%;
    }
}

and...

//* Add Archive Settings option to Portolio CPT
add_post_type_support( 'portfolio', 'genesis-cpt-archives-settings' );

//* Define custom image size for Portfolio images in Portfolio archive
add_image_size( 'portfolio-image', 330, 230, true );

[Doug Edgington]

Did you create your own portfolio post type, or are you using some type of plugin?

For my personal website, I created a portfolio custom post type. Then I control the output by creating a custom portfolio archive template ( archive-portfolio.php ).

---

Doug Edgington
http://www.dougedgington.com

[Doug Edgington]

I got your reply via email, but it is not showing up here in the forum. Maybe it got flagged?

I looked at the updated version of your portfolio. And you are retrieving the full-size image rather than a cropped thumbnail. This is likely why your images don't all match.

---

Doug Edgington
http://www.dougedgington.com

[Doug Edgington]

In order to reduce the size of the overlay related text, you can single it out within your css declarations. Below is an example.

.portfolio-overlay h3 {
      font-size: 25px;
      line-height: 1.2;
      margin-bottom: 5px;
}

.archive-description .portfolio-overlay p {
      font-size: 14px;
      line-height: 1.2;
      margin-bottom: 0px;
}

---

Doug Edgington
http://www.dougedgington.com

[Tree78]

Doug,

That worked perfectly. I have two more questions and I should be good. I appreciate the help man.

1. You say I am retrieving the full-size image rather than a cropped thumbnail. How do I change or fix that?
2. What code do I need to add to make sure that the portfolio page looks correct on mobile? Or will that be fixed once I retrieve the correct thumbnail?

Thanks again man, I appreciate the help.

[Doug Edgington]

I haven't really experimented with the Genesis Portfolio Plugin. But it appears to add an image size automatically. And it should automatically output that image size on the portfolio archive page. But if you uploaded the images after the image size was in place, they would not be cropped. This could cause the full size image to be referenced. Or did you possibly create your own portfolio template? If so, you may not be calling the appropriate image size.

---

Doug Edgington
http://www.dougedgington.com

[Tree78]

Yeah, I am not using the Genesis Portfolio Pro Plugin. I created my own archive-portfolio.php. I will try to re upload now and see if that helps. What would I need to change to call the right image?

[Tree78]

Yeah, the upload isn't the issue. I am calling the wrong image I think.

[Doug Edgington]

Do you have a StudioPress Pro Plus theme package? If so, look at the portfolio template for the Executive Pro theme. This will give you an idea of how to call a specific image size.

---

Doug Edgington
http://www.dougedgington.com

[Tree78]

I do and okay great, will do. Thanks man.

[Doug Edgington]

No problem. When viewing the theme portfolio template, look at the genesis_get_image function. In your case, you are going to want to call portfolio-image, since this is the image size that you declared.

What specific issue was you having with the site in responsive mode?

---

Doug Edgington
http://www.dougedgington.com

[Tree78]

Hey Doug,

What I did was I used a plugin called "portfolio post type." Then I created my own archive-portfolio.php. I used this tutorial:

Everything came out fine. The filtering worked great. But the image sizing, spacing, text... everything was wrong. The Maker Pro theme has a pre built portfolio layout using Genesis Portfolio Pro... but it isn't filterable. So what I did was I deleted all the pre set portfolio code in the theme thinking that was conflicting and entered all the code I gave in my last response. That helped with layout some, but still having some image size, text and layout issues. What you see on the portfolio page now is where I am currently at:

Even now though it seems a bit off and isn't showing correctly on mobile. I am about to just use a plugin but I would really like to get this to work. I know it is only a couple things I am missing....

[Doug Edgington]

You can paste a snippet of your archive-portfolio.php in here and I can take a look. Is the filter functionality something that is also added to the archive-portfolio.php, or are you using a plugin?

---

Doug Edgington
http://www.dougedgington.com

[Tree78]

This reply has been marked as private.

[Tree78]

Hey Doug. Every time I think I am set with this something else happens, lol. My portfolio page and filtering page is only showing 9 posts and all the other live posts are hidden. What am I missing in the code below to get this to work so that everything that I publish shows? I have pasted all my php and css code below. Thanks man.

<?php
/**
 * Portfolio Archive
 * Author: James Roberts
 *
 */

// Force full width content (optional)
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
//remove standard loop (optional)
remove_action( 'genesis_loop', 'genesis_do_loop' );
// Add our custom loop
add_action( 'genesis_loop', 'lp_filterable_portfolio' );

// Enqueue javascript
wp_enqueue_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array('jquery'), '1.5.25', true);
wp_enqueue_script('isotope_init', get_stylesheet_directory_uri() . '/js/isotopes_init.js', array('isotope'), '', true);

/**
* Get Excerpt.
*
* @since 1.0
*
*/
function the_excerpt_max_charlength($charlength) {
	$excerpt = get_the_excerpt();
	$charlength++;

	if ( mb_strlen( $excerpt ) > $charlength ) {
		$subex = mb_substr( $excerpt, 0, $charlength - 5 );
		$exwords = explode( ' ', $subex );
		$excut = - ( mb_strlen( $exwords[ count( $exwords ) - 1 ] ) );
		if ( $excut < 0 ) {
			echo mb_substr( $subex, 0, $excut );
		} else {
			echo $subex;
		}
		echo '[...]';
	} else {
		echo $excerpt;
	}
}

/**
* Output filterable portfolio items.
*
* @since 1.0
*
*/
function lp_filterable_portfolio( ){
    
    $args = array(
            'post_per_page' => 9999
    );
    $loop = new WP_Query( $args );
    $terms = get_terms( 'portfolio_category' );
    $count=0;
    ?>

<div class="archive-description">
        <?php if( $terms ) { ?>
            <ul id="portfolio-cats" class="filter clearfix">
                <li><a href="#" class="active" data-filter="*"><span><?php _e('All', 'lp'); ?></span></a></li>
                <?php
                    foreach( $terms as $term ){
                        echo "<li><a href='#' data-filter='.$term->slug'><span>$term->name</span></a></li>";
                    }
                ?>
            </ul><!-- /portfolio-cats --><br/><br/>
        <?php } ?>

         <?php if( have_posts() ) { ?>
            <div id="portfolio-wrap" class="clearfix filterable-portfolio">
                <div class="portfolio-content">
                    <?php while( have_posts() ): the_post(); ?>
                        <?php $count++; ?>
                        <?php $terms = get_the_terms( get_the_ID(), 'portfolio_category' ); ?>
                        <?php if ( has_post_thumbnail($post->ID) ) { ?>
                            <article class="portfolio-item col-<?php echo $count; ?> <?php if( $terms ) foreach ( $terms as $term ) { echo $term->slug .' '; }; ?>">
                                <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo genesis_get_image( array( size => 'lp-portfolio' ) ); ?>
                                <div class="portfolio-overlay">
                                    <h3><?php the_title(); ?></h3>
                                    <p><?php the_excerpt_max_charlength(50);?></p>
                                </div><!-- overlay --></a>
                            </article>
                        <?php } ?>
                    <?php endwhile; ?>
                </div><!-- /themes-content -->
            </div><!-- /themes-wrap -->
        <?php } ?>
        <?php wp_reset_postdata(); ?>
</div>

<?php

    wp_reset_postdata();
    
}

genesis();

/* # Filterable portfolio
---------------------------------------------------------------------------------------------------- */

.post-type-archive-portfolio .site-inner > .wrap {
	max-width: 100%;
	padding: 0;
}

ul.filter {
    color: #999;
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

ul.filter li {
    float: left;
}
ul.filter li:first-child {
  margin-left: 0;
}

ul.filter a {
    color: #555;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-bottom: none;
    font-size: 1.5rem;
    font-weight: 300;
    border-top: 4px solid #fff;
}

ul.filter a:hover, ul.filter a.active {
    border-top: 4px solid #006633;
}

.filterable-portfolio {
    margin-left: -2rem;
    margin-left: -20px;
}

.portfolio-item {
    float: left;
    margin-bottom: 2rem;
    margin-bottom: 40px;
    margin-left: 2rem;
    margin-left: 40px;
    position: relative;
    width: 29%; 
}

.portfolio-item a img {
    display: block;
    margin-bottom: 0;
}

.portfolio-overlay {
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    padding: 30px;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.portfolio-item img:hover + .portfolio-overlay, .portfolio-overlay:hover {
    opacity: 1;
}

.portfolio-overlay h4 {
    font-weight: bold;
    margin: 0;
    width: 100%;
    padding: 5px 7px;
    text-transform: uppercase;
    color: #fff;
}

.clearfix{
    clear: both;
}

.portfolio-overlay h3 {
     font-size: 25px;
     line-height: 1.2;
     margin-bottom: 5px;
}

.archive-description .portfolio-overlay p {
     font-size: 14px;
     line-height: 1.2;
     margin-bottom: 0px;
}

/*-----------------------------------------------------------------------------------*
/* = Isotope CSS Animations
/*-----------------------------------------------------------------------------------*/
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -ms-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

.filterable-portfolio-page .content .entry-header {
    margin-bottom: 1rem;
    margin-bottom: 10px;
}

.filterable-portfolio-page .content .entry-title {
    margin-bottom: 3rem;
    margin-bottom: 30px;
}

@media only screen and (max-width: 1179px) {
    .portfolio-item {
        width: 22%;
    }
}

@media only screen and (max-width: 1023px) {
    .portfolio-item {
        width: 30%;
    }
}
@media only screen and (max-width: 500px) {
    .portfolio-item {
        width: 100%;
    }
}

[Tree78]

Anything Doug?

[Doug Edgington]

Sorry, I didn't know you replied until now. In a previous post you mentioned that you declared the following mage size:

add_image_size( 'portfolio-image', 330, 230, true );

But in looking at your portfolio template, within genesis_get_image() you are calling the lp-portfolio image size. If this image size does not exist, I think it will default to the full-size image. I didn't look through all of the code. I was only looking for the image size that you are calling. The portfolio-image is the one you should be calling. As long as you added the add_image_size declaration before you uploaded images, that image size should exist. Otherwise you would have to regenerate the thumbnails.

---

Doug Edgington
http://www.dougedgington.com

[Doug Edgington]

By the way, one of your replies is marked as private for some reason. Not sure if it was something that was intended for me.

Last time we talked you were having image size problems. That is what I addressed in my previous reply.

---

Doug Edgington
http://www.dougedgington.com

[Author]

Posts