[Tree78]

Thanks Doug, I will fix the issue. Can you tell me what I need to add or subtract from the code above that will allow me to display all my portfolio content. Right now it is cutting me off at 9 pieces and not showing anything else....

Jeremy

[Tree78]

Anything Doug?

[Tree78]

What should it be set to?

Display footer> footer menu? What should it say?

[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]

This reply has been marked as private.

[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....

[Tree78]

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

[Tree78]

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

[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]

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.

[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 );

[Tree78]

Is there anyway to fix what I already have in pace?

[Tree78]

Bump. Anyone?

[Tree78]

Okay great, good article Brad, thank you. What would my custom field title be? after-title? And what would I put into the box? Some html code with the size font I want or what?

Jeremy

[Tree78]

Hmmm, okay. Yes, I see it working now... Must have been the cache on the upload. Thank you.

[Tree78]

It was a cache issue along with another plugin. I got it worked out.

[Tree78]

Gotcha, thanks Cristoph. Appreciate it.

[Tree78]

Hi Cristoph,

I am not seeing that code anywhere.... I just want to use it with simple sharing like it is setup. I don't see that option anywhere.

[Tree78]

HI @hipstershaun,

Okay, so I added that in a couple different ways but nothing is working. I am a little lost here.... what stylesheet would the site be pulling from? Why would the styles from the style.css not be loading? I am entering all the styles and changes into the style.css for Pretty Creative child theme.

I guess I am just not sure what other stylesheet it would be loading and why it would not be loading it's own stylesheet? Any more help or suggestions or where to look is appreciated.... I am just not sure where to look regarding another stylesheet loading and why?

Jeremy

[Tree78]

Anyone?

[Author]

Posts