How can I define the image size (thumbnail, medium, etc.) and have an option to show the post except (show_excerpt=“true”) for the recent posts shortcode? I remember seeing topics on how to implement both of these options in the old forums but I can’t find those topics anymore.
Hello,
Thank you for writing in!
To define the image size you can use max-height & max-width attributes to control your image sizes. Please refer to the following screenshot here (http://screencast.com/t/ewiUWK2V).
If you don’t see the style section, please enable Advanced Controls as shown here (http://screencast.com/t/1qzgufOZqC).
About your second question:
By default the recent posts shortcode/element does not allow excerpts.
To allow it, you need to install and activate a child theme
Then add this in your child theme’s functions.php file
// Add Excerpts to the recent post element
// =============================================================================
function x_shortcode_recent_posts_v2code( $atts ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'type' => 'post',
'count' => '',
'category' => '',
'offset' => '',
'orientation' => '',
'show_excerpt' => 'false',
'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 = "";
$q = new WP_Query( array(
'orderby' => 'date',
'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(), 'entry-cropped' );
$bg_image = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
$image_output = '';
$image_output_class = 'with-image';
}
$excerpt = ( $show_excerpt ) ? '' . preg_replace('//', '', cs_get_raw_excerpt() ) . '
' : '';
$output .= ''
. ''
. ''
. $image_output
. ''
. '' . get_the_title() . '
'
. '' . get_the_date() . ''
. $excerpt
. ''
. ''
. ''
. '';
endwhile; endif; wp_reset_postdata();
$output .= '';
return $output;
}
// =============================================================================
add_action('wp_head', 'change_recent_posts_to_v2');
function change_recent_posts_to_v2() {
remove_shortcode( 'x_recent_posts' );
add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
// =============================================================================
Kindly note that you need to use the shortcode in a text element to display recent posts with excerpt.
eg.
[x_recent_posts count="4" show_excerpt="true"]
Thanks John! Unfortunately you misunderstood about image size…I want to be able to define the size of image used for the recent posts shortcode. It currently used the full size image and I want to change it to different sizes (thumbnail, medium, etc.) based on the usage of the shortcode. I.e. using something like: [x_recent_posts count=“4” img_size=“medium” show_excerpt=“true”]
Hi There,
In that case, please update the previous code to this:
// Add Excerpts to the recent post element
// =============================================================================
function x_shortcode_recent_posts_v2code( $atts ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'type' => 'post',
'count' => '',
'category' => '',
'offset' => '',
'orientation' => '',
'show_excerpt' => 'false',
'no_sticky' => '',
'no_image' => '',
'img_size' => '',
'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 : '';
$img_size = ( $img_size != '' ) ? $img_size : 'entry-cropped';
$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',
'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(), $img_size );
$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 style="color:initial;">' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';
$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', 'cornerstone' ), 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">' . get_the_date() . '</span>'
. $excerpt
. '</div>'
. '</div>'
. '</article>'
. '</a>';
endwhile; endif; wp_reset_postdata();
$output .= '</div>';
return $output;
}
// =============================================================================
add_action('wp_head', 'change_recent_posts_to_v2');
function change_recent_posts_to_v2() {
remove_shortcode( 'x_recent_posts' );
add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
// =============================================================================
Then add the following CSS under Customizer > Custom > Global CSS:
.x-recent-posts .x-recent-posts-img {
background-size: contain;
}
Let us know how it goes!
The shortcode is working (thanks!) but I’m having trouble with preventing overflow for the excerpted text. At certain screen sizes it gets cut off or goes past the div. See examples:
http://awesomescreenshot.com/0b46c6hn79
http://screenshotlink.ru/77f608fdb496856d4bfbc93cd5117453.jpg
What needs to be changed in order to not have the text cut off or drop below the div? For smaller screen sizes I’d like to see a 10px margin below the end of text and to have “text-overflow: ellipsis;” used.
Hi,
You can reduce the size of your text as the on smaller screen size.
eg. Add this in Customizer > Custom > Global CSS:
@media (max-width: 979px) {
.recent-featured h3.h-recent-posts {
font-size: 100%;
}
.recent-featured .x-recent-posts-excerpt {
font-size: 85%;
}
}
You may change 100 and 85 to achieve your desired size.
Hope that helps.
Ok, but that was not what I was asking to do…I guess I wasn’t clear.
Can you tell me where/how to apply “overflow: hidden;
text-overflow: ellipsis;” css (or something similar) on the correct div so that the excerpt text has a bottom margin/padding and so that the excerpt always ends with “…” on smaller screen sizes?
HI,
You can try this code instead.
@media (max-width: 979px) {
.recent-featured .x-recent-posts-excerpt p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 350px;
display: block;
}
}
For ellipsis to work, the text must be in a single straight line that overflows a box where that overflow is hidden.
You may change 979px for when you would like for your excerpt to be truncated.
Hope that helps.
Ok, thank you for explaining the issue with multiline ellipsis. After some research I found a javascript solution that will output what I’m wanting: http://dotdotdot.frebsite.nl
I’ve managed to install it but I can’t figure out how to have it apply to the excerpt generated by the recent articles shortcode. I’ve added a text block below the shortcode to test and it works on this so it must be a css issue. See example:
http://awesomescreenshot.com/0cb6c81674
What do I need to change on the css or the php code to make this work on the excerpt text?
Update…after further testing I’ve narrowed down the issue to something with the responsive slider css or js code. http://awesomescreenshot.com/00c6c8tob1
What do I need to change on the css, js or the php code to make this work on the excerpt text when placed inside the slider?
Hello There,
Thanks for updating in! As the screen become smaller and smaller, you will need to adjust the maximum height of your slider. Perhaps you can start off by using this code:
@media(max-width: 1200px){
.flex-viewport, .recent-featured .x-content-band {
max-height: 320px!important;
}
}
Feel free to change the maximum height if needed.
That had no effect. I changed max-height to 280px and still didn’t work.
Other ideas on how to fix?
Hello There,
Thanks for updating in! We are out of ideas. Your layout is too complex and it is hard to adjust any thing that the container will dynamically change in different screen sizes. You added a recent post item inside a column in a content band which is inside a slide. The unpredictable height of the recent post item resulted to this issue which the slide height cannot contain. You will need custom development to be able to control and limit the height of the recent post item excerpt so that it will fit just right for the height of your slider.
Thank you for your understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.