Recent post - excerpts modifications

[global411]

relating to

Recent posts- excerpts

site @ http://kidsbalance.bike/sample-page/
also trying to get the look of

but need to change 3 things,
1.) remove the red hover with icon
2.) remove the border
3.) get WHOLE featured image to show and not just the center and maybe set the SIZE of the image to say 200px

in the functions.php I am using the code

// Displaying Excerpt in Recent Posts
// =============================================================================

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-cropped' );
    $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>'
                    . $excerpt
                 . '</div>'
               . '</div>'
             . '</article>'
           . '</a>';

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’ );
}

thx…

[mldarshana]

Hi Erick,

Thanks for writing in! Try adding the following CSS rules into your X -> Theme Options -> CSS area.

To remove the hover icons, use the following CSS.

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img::after {
    opacity: 0;
}
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img::before {
    opacity: 0;
}

To remove border, use the following CSS rule.

.x-recent-posts a {
    border: none;
}

To show full image, use the following CSS rule.

.x-recent-posts-img {
    background-size: contain !important;
}

Thanks!

[global411]

super fantastic no wonder we all love you guys
unbeatable product and support.

So looking forward to the updates coming with the blog customization’s and all.

[nabeel]

Thank you for your kind words. We’re glad we could help.

Cheers!

[global411]

K sorry a bit lost,

set the working page "the changes you sent " looks great…

Blog | KidsBalance.Bike

as the default blog page in the settings

but then it defaults to the LOOK of
http://kidsbalance.bike/kidsbalance-bike-blog/

switch it back and all is good, sooooo, how to set the default blog
page and get it to show with the 3 changes you offered up??

I do not mind the way the http://kidsbalance.bike/kidsbalance-bike-blog/
looks if it would take your 3 changes, I added the changes to every spot for CSS
and they will not seem to take.

?? sorry lost on how to get the darn default blog page to look right
and you can not directly edit it when a page is SET to default blog page in the reading settings of WP.

[friech]

Hi Erick,

To clarify, so this page is just a pseudo-blog page.
And your real Blog Posts Index Page is this, as you already know this page cannot be edited in Cornerstone and any content builder (even the default Wordpress page editor cannot edit this page), so if you really need to customize this page, you need to write your own Custom Blog Posts Index Page Template (home.php file), which requires a heavy customization.

Custom Blog Posts Index Page Template

Ok to apply CSS provided by Nabeel above on the Blog Posts Index Page, please update the given CSS code to this.

/*remove the red hover effect and link icon*/
.blog a.entry-thumb:hover img {opacity: 1 !important;}
.blog .entry-thumb:before {display: none;}

/*remove border*/
.blog .x-iso-container-posts>.hentry .entry-wrap {border-width: 0;}

The feature image shows whole in there, so there is no need for the #3 CSS.

To move the title below the Featured Image, add this to Theme Options > JS

(function($) {
  $(".blog .post").each(function(){
    $(this).find("header.entry-header").insertAfter( $(this).find(".entry-featured") );
    $( "header.entry-header" ).addClass( "mtl" );
  });
})(jQuery);

As you can see with that JS code, this is now in the extent of customization, regretfully, we can not provide support further from here, it would ultimately be your responsibility to edit it, if it needs to.

.insertAfter()
.addClass()

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope this shed some lights,
Cheers!

[global411]

ya that is great thank you,
looking much better.

[Prasant]

You are most welcome.

[global411]

everything works but the boarder remains.
http://kidsbalance.bike/kidsbalance-bike-blog/

Used as you posted,
/remove border/
.blog .x-iso-container-posts>.hentry .entry-wrap {border-width: 0;}

[Prasant]

Hello @global411,

Thanks for updating the thread.

To remove border, please add following CSS under X > Theme Options > CSS:

.entry-featured {
    border: none !important;
}

Thanks.