Portfolio items have thumbnails and original images loaded properly. but thumbnails in Agency are cut off by the frame.
Where would I need to resize the recangular frame or ensure that image is retained and fitted as original thumb set in featured image of the portfolio item.
thanks
Hi There,
Please add the following code to Theme Options CSS
.x-recent-posts .x-recent-posts-img {
background-size: contain;
}
Hope it helps
It did not make any change to the cropping frame.
Hi There,
Can you share portfolio page URL with the issue? This is to make sure we can inspect the image properly and then give you correct recommendation.
Hi,
By default the recent post shortcode get the entry-crop image size which means that the image itself is cropped.
To make it get the not cropped image, you can add this in your child theme’s functions.php file
function x_shortcode_recent_posts_v2code( $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',
'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' );
$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>' : '';
$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" 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">' . 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 make sure this css code is still in place.
.x-recent-posts .x-recent-posts-img {
background-size: contain;
}
Hope that helps.
if I dont want to add this massive code what image size I need to make in relation to the thumbnal frame size? I mean if I put content of the image right in the middle and leave whites to be cropped by X then I could win. will I? What recommended size? Where are the controls of the thumbnail frames’ dimensions in this page implementation?
Hi there,
That would also be an option where you will place the subject of the photo in the center and have some white space around it but this option might not work on some cases because it still depends on the size of the image that you will upload as the featured image and there is no specific size of featured image that we can recommend because if it has to be at least large enough to fit the single page like this.
So the easiest option would be to place the code provided in the previous response in the functions.php file of the child theme and add the CSS code in the custom CSS. It should be straightforward.
Let us know how it goes.
This solutions works well for me. I only want to ask you one thing. Why CSS code when placed through cornertstone left vertical menu ‘CSS’ doesnt work but if placed via X customiser CSS all works ok.
Hi,
Adding it in Cornerstone > CSS should work if what you are targeting is on the page itself.
I tried it in your homepage, see video below
Anyway I think the correct place is to add it globally like you did, in X Customiser CSS. That way that code will affect all recent posts anywhere in your site.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.