Hello. I am trying to help a friend with their site (using X of course)… I would like to give them the ability to post event flyers using “posts” and setting the flyer image as the “featured image” of that post. So I have added the “classic recent posts” element to the page. Regardless of image size, I would like for that featured image to scale down and show the whole flyer at a decent size. Currently, the image is cut off (or maybe cropped). How can I achieve this functionality? Please scroll to the bottom at www.livingwithcpfoundation.org and notice the “living with cp foundation football” section.
Thank you
Hi There @moneydeezy
Thanks for writing in! I have checked your original image and it’s 1500px width X 1500px height. Could you please try using an image with different aspect ratio for example (1500px X 750px) or (800px X 600px) and that should resolve your issue.
Hope that helps.
Thank you mldarshana for taking a look. I gave that a try. Also I did try using a 150x150 just to see if it would work and it actually increased the image size (currently in production)/zoomed in.
Hello @moneydeezy,
Thanks for updating in!
To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
.x-recent-posts .x-recent-posts-img {
background-size: contain;
}
Hope this helps. Please let us know how it goes.
Thank you. That works for a small picture such as the arm. Now if I want to use a real picture/flyer, will I need to have the pixels below a certain amount? Is there a way to contain the image no matter the size?
For example, I just posted a sample of a big flyer, and would like for it to scale down and show the whole thing.
Hello @moneydeezy,
The code I gave will make sure that the featured image will be contain in the recent posts element no matter how big or small the image is.
Hope this helps.
Thanks RueNel. This still isn’t working for me. I’ve added the code and set a featured image. First tried with an image size of 1500x1500. I then scaled down to 750x750 and still is not working for me. Please scroll to the bottom of the homepage and notice the image is zoomed. http://www.livingwithcpfoundation.org
Hello @moneydeezy,
The recent posts element is not displaying the full image by default. To override this setting, since your child theme is already set up, please add the following code in your child theme’s functions.php file
// Full size image for 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' => '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 );
$posts = get_posts( array(
'orderby' => 'date',
'post_type' => "{$type}",
'posts_per_page' => "{$count}",
'offset' => "{$offset}",
"{$category_type}" => "{$category}",
'ignore_sticky_posts' => $no_sticky
) );
$output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";
foreach ($posts as $post) {
if ( $no_image == 'true' ) {
$image_output = '';
$image_output_class = 'no-image';
} else {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->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';
}
$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( $post->ID ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( array( 'echo' => false, 'post' => $post->ID ) ) ) ) . '">'
. '<article id="post-' . $post->ID . '" class="' . implode( ' ', get_post_class('', $post->ID) ) . '">'
. '<div class="entry-wrap">'
. $image_output
. '<div class="x-recent-posts-content">'
. '<h3 class="h-recent-posts">' . get_the_title( $post->ID ) . '</h3>'
. '<span class="x-recent-posts-date">' . get_the_date( '', $post->ID ) . '</span>'
. '</div>'
. '</div>'
. '</article>'
. '</a>';
}
$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' );
}
// =============================================================================
We would loved to know if this has work for you. Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.