Portfolio Category Archive page showing Featured Images in columns in Modern Portfolio Pro

In Modern Portfolio Pro, the Portfolio category archive page shows the Posts in a list by default as can be seen here.

Grace wants to know how these Posts can be shown in columns with a simple layout of Post title and Featured image – both linking to their respective single Post pages.

portfolio-category-columns-mpp

This is pretty simple thanks to the code by Bill Erickson.

Just create a file named category-portfolio.php having the following code in Modern Portfolio Pro’s theme directory:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
<?php
 
/**
* Controls the "Portfolio" Category archive page output.
*/
 
//* Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
 
/**
* Display as Columns
*
*/
function be_portfolio_post_class( $classes ) {
$columns = 3; // Set the number of columns here
 
$column_classes = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
$classes[] = $column_classes[$columns];
global $wp_query;
if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )
$classes[] = 'first';
 
return $classes;
}
add_filter( 'post_class', 'be_portfolio_post_class' );
 
//* Remove the entry meta in the entry header
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
 
//* Remove the standard post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
 
//* Show featured image linking to single Post
add_action( 'genesis_entry_content', 'sk_do_post_content' );
function sk_do_post_content() {
if ( $image = genesis_get_image( 'format=url&size=portfolio' ) ) {
printf( '<div class="portfolio-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
 
}
}
 
//* Remove the entry meta in the entry footer
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
 
genesis();

then add this in style.css:

1 2 3 4 5 6 7
@media only screen and (max-width: 480px) {
 
.category-portfolio .entry {
margin-bottom: 40px;
}
 
}
view raw style.css hosted with ❤ by GitHub

Moving to Australia

We are moving to Australia on 8th of June and have a lot of things to take care of before the move. There will not be any updates in this site until we get settled in Melbourne. I know there are a lot of comments unanswered and I wish I have the time … [Continue reading]