[BlackWavesParticipant]

Hello Themeco-Team,

I have two little question which dirve me nuts:
1. I want to move the featured image in the blog overview to the left side. I used the code from the fourth post (Zeshan)

https://community.theme.co/forums/topic/move-featured-image-to-left-of-blog-post-excerpt/

The code works perfect so far, but I want to center the featured image vertically. How can I achieve this?

2. I want change the text of the permalink when hovering over the image. Now it`s “Permalink to: XXX” and I want it to be just “XXX”

In the next private post I`ll give you the page URL and a login.

I hope you can help me 🙂

[BlackWavesParticipant]

This reply has been marked as private.

[BlackWavesParticipant]

Hello,

during the development one more question appeared. On the right side sou can see the blog posts which I integrated with the shortcode [recent_posts count=”3″ orientation=”vertical”]

How can I make sure the image has the size of the (empty, dark grey) box above? I hope you understand what I want to say. If you habe any questions I am happy to help 🙂

Thank you very much in advance.

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.blog .x-main article.post.has-post-thumbnail .entry-featured,
.blog .x-main article.post.has-post-thumbnail .entry-wrap {
    float:none;
    display:inline-block;
    vertical-align:middle;
}

.blog .x-main article.post.has-post-thumbnail .entry-wrap {
    width:59.5%;
}

.x-recent-posts article.post.has-post-thumbnail {
   padding:0;
}

.x-recent-posts article.post.has-post-thumbnail .entry-wrap {
    float: none;
    padding: 0;
    width: 100%;
}

.x-recent-posts .x-recent-posts-img {
    width:100%;
}

Then to remove permalink to, add the code below in your child theme’s functions.php file.

function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __("%s", '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }

Hope that helps.

[BlackWavesParticipant]

Hello Paul,

Thank you for your help! That was exactly what I was looking for.

1. I just have one more question. When I hover over the the “recent posts”-shortcode pictures I have a black half-transparent hover effect and the text “permalink to: XXX” can I get rid of these both things too?

2. Another thing that came up: on my site https://alegrado.de/koerperliche-anzeichen/ at the bottom I used the “entry share” shortcode. When I click on the share button for facebook, it doesn`t show the featured image, just an empty placeholder. Have I integrated it incorrectly?

[JoaoModerator]

Hi There,

1- Please add the following code to Appereance Customizer Custom CSS

.x-recent-posts .format-standard .x-recent-posts-img:before {
    display: none;
}

.entry-thumb:before, .x-pagination span.current, .flex-direction-nav a, .flex-control-nav a:hover, .flex-control-nav a.flex-active, .mejs-time-current, .x-dropcap, .x-skill-bar .bar, .x-pricing-column.featured h2, .h-comments-title small, .x-entry-share .x-share:hover, .x-highlight, .x-recent-posts .x-recent-posts-img:after {
   
    background: none;
}

2- Please go to Appereance Customizer Social | Set a Social fallback image and try sharing with a different post.

Let us know how it goes,

Joao

[BlackWavesParticipant]

Hello,

thank you for your answer.

1. The hover effect ist perfect now. Thank you very much! 🙂 I still have the problem with the “permalink to: XX” text. Do I have to change something in the functions.php?

2. I set an fallback image and tried another post, but sadly there is still no image when sharing it.

I hope you can help me.

[Paul RModerator]

Hi,

1. Add the code below 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' => '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 = "<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>' . 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( __( '%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' );
}

2. Install seo yoast plugin.

https://wordpress.org/plugins/wordpress-seo/

You can then manually set the image

https://www.screencast.com/t/7TiZcdrIWRt

Hope that helps.

[BlackWavesParticipant]

Hey,

thank you very much for your answer.

1. I copied the lines in my functions.php but the text still appears with the “permalink to” part. I will provide you a FTP login in a private message if that helps 🙂

2. I migrated to yoast SEO, did what you recommended and now everything is working perfectly. Thank you!

[BlackWavesParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please double check the FTP logins your have provided as it doesn’t seem to work.

Command:	Pass: *****************************************
Error:	Authentication failed.
Error:	Critical error: Could not connect to server

Hope this helps.

[BlackWavesParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

I went ahead and fix it.

Kindly check in your end.

Thanks

[BlackWavesParticipant]

Hey,

it works perfectly. Thank you so much!

You guys are doing great work and are helping so much in such a short time.

[Paul RModerator]

You’re welcome and thank you for your kind words! 🙂

[Author]

Posts