Portfolio OnePage

Support
#1

Hi,
i want to set up a onepage Layout including a area with all portfolio elements.
So i used the “classic recent post” element and set it to “portfolio”
But i have a few problems with this:

  1. The featured Image is cropped. How can i show the uncropped image?
  2. The name of the portfolio element is also cropped. i want to display the whole name.
  3. Instead of the publishing date i want to show the category.
  4. I want to open a custom link or a pdf file when i click on the portfolio element.

I hope you can help me with this problems.

Best regards
Vanessa

#2

Another option would be a item in cornerstone which looks like

Is this possible?

#3

Hi Vanessa,

First, you have to setup a child theme:

After that add this custom code under functions.php file locates in your child theme:

function x_shortcode_recent_posts_v3( $atts ) {
  extract( shortcode_atts( array(
	'id'           => '',
	'class'        => '',
	'style'        => '',
	'type'         => 'post',
	'count'        => '',
	'category'     => '',
	'offset'       => '',
	'orientation'  => '',
	// 'show_excerpt' => 'true',
	'no_sticky'    => '',
	'no_image'     => '',
	'fade'         => ''
  ), $atts, 'x_recent_posts' ) );

  $allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
  $type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';

  $id            = ( $id           != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class        != ''     ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
  $count         = ( $count        != ''     ) ? $count : 3;
  $category      = ( $category     != ''     ) ? $category : '';
  $category_type = ( $type         == 'post' ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset       != ''     ) ? $offset : 0;
  $orientation   = ( $orientation  != ''     ) ? ' ' . $orientation : ' horizontal';
  // $show_excerpt  = ( $show_excerpt == 'true' );
  $no_sticky     = ( $no_sticky    == 'true' );
  $no_image      = ( $no_image     == 'true' ) ? $no_image : '';
  $fade          = ( $fade         == 'true' ) ? $fade : 'false';

  $js_params = array(
	'fade' => ( $fade == 'true' )
  );

  $data = cs_generate_data_attributes( 'recent_posts', $js_params );

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";

	$q = new WP_Query( array(
	  'orderby'             => 'date',
	  'order' => 'ASC',
	  'post_type'           => "{$type}",
	  'posts_per_page'      => "{$count}",
	  'offset'              => "{$offset}",
	  "{$category_type}"    => "{$category}",
	  'ignore_sticky_posts' => $no_sticky
	) );

	if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

	  if ( $no_image == 'true' ) {
		$image_output       = '';
		$image_output_class = 'no-image';
	  } else {
		$image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
		$bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
		$image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
		$image_output_class = 'with-image';
	  }

	  // $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';

	  if($type !=  'post'){
	  	$link = get_post_meta( get_the_ID(), 'pdf_link', true );
	  	$terms = get_the_terms( get_the_ID(), 'portfolio-category' );
	  	$categories = array();
 
	    foreach ( $terms as $term ) {
	        $categories[] = $term->name;
	    }
	    
	  	$date = join( ", ", $categories );
	  } else {
	  	$link = get_permalink( get_the_ID() );
	  	$date = get_the_date();
	  }

	  $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . $link . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( 'echo=0' ) ) ) . '">'
				 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
				   . '<div class="entry-wrap">'
					 . $image_output
					 . '<div class="x-recent-posts-content">'
					   . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
					   . '<span class="x-recent-posts-date">' . $date . '</span>'
					   // . $excerpt
					 . '</div>'
				   . '</div>'
				 . '</article>'
			   . '</a>';

	endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;
}

add_action('wp_head', 'change_recent_posts_to_v3');
function change_recent_posts_to_v3() {
  remove_shortcode( 'x_recent_posts' );
  remove_shortcode( 'recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v3' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v3' );
}

Also add this custom CSS under Theme Options > CSS:

.x-recent-posts .x-recent-posts-img {
    background-size: contain;
}
.x-recent-posts .h-recent-posts, 
.x-recent-posts .x-recent-posts-date {
    text-overflow: inherit;
    white-space: pre-wrap;
}

When you edit a portfolio item, you have to add a customfield name pdf_link:

Hope that helps and thank you for understanding.

#4

Wow!! What an outstanding support!!! Thank you very much for your help.

One little question: Is it possible to set the text next to the image on the right side? (not under the image)

#5

Hi Vanessa,

Sure, please add this CSS too

.x-recent-posts .x-recent-posts-img {
    width: 50%;
    float: left;
    margin-right: 4%;
}
.x-recent-posts a {
    margin-bottom: 4%;
}
.x-recent-posts a:after {
     content:"";
     display: block;
        width: 100%;
        clear:both;
}

Hope this helps.

#6

Works perfect! Thank you very much for your help! :smiley:

#7

Glad to hear that. :slight_smile:

#8

Hi, sorry i have to bother you one more time.
Is it possible to show all Portfolio items at once?
The best case would be with a slider or a caroussel.
Now i can only show 4 items at once.

#9

Hi Vanessa,

Regretfully, that type of customization falls outside of the support that we can offer. Please utilize the Essential Grid extension instead for creating a beautiful and flexible posts grid.

Essential Grid - Introduction

Hope that heps,
Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.