Thumbnail size of the featured image on blog index posts

Support
#1

hey there i use ethos 1 this is my website youramazinggift.com
i love to show featured image on blog index posts large and the text blow the picture like this blog
http://demo.theme.co/app/blog/
thank you

#2

Hi there,

The demo page which you gave the link is related to the Renew stack. If you want to have such a view you need to switch to Renew stack as the Ethos stack does not have that view.

It is not possible to have exactly the view you like but with custom CSS coding it will have a somehow similar view. This is not an official code but it will help you to get what you want.

Please kindly add the code below to X > Launch > Options > CSS:

.blog .x-main .hentry>.entry-featured {
	width:  100%;
	float:  none;
	margin-bottom: 25px;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap {
	width:  100%;
	padding:  0;
}

Hope it helps.

1 Like
#3

thank you very much that helps ,
one more question how i can add : (… Read More ) on blog index posts
and i wanna the archive category look the same
thanks

#4

Hello There,

Thanks for getting back to us.

1.) To add a read more link to each of the post items, since the child theme is set up, please add the following code in your child theme’s functions.php file

  function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...';
    } else if ( $stack == 'ethos' ) {
      return ' <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More >', '__x__' ) . '</a>';
    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );

2.) To make sure that the archive page has the same look, please do update the css code and make use of this instead:

.blog .x-main .hentry>.entry-featured,
.archive .x-main .hentry>.entry-featured {
	width:  100%;
	float:  none;
	margin-bottom: 25px;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap,
.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
	width:  100%;
	padding:  0;
}

Please let us know if this works out for you.

1 Like
#5

:wink: thanks that work perfect

#6

i will be happy if i can show featured image on blog index posts Skinny

#7

Hi There,

Please clarify what you want to achieve.

Thank you

#8

hi joao , the featured image too much big now , is there any why to show it skinny image

#9

Hi,

Please change the code that reads.

.blog .x-main .hentry>.entry-featured {
	width:  100%;
	float:  none;
	margin-bottom: 25px;
}

to this

.blog .x-main .hentry>.entry-featured {
    width: 50%;
    float: none;
    margin: 0 auto 25px;
}

Hope that helps.

1 Like
#10

thank you very much

#11

You’re welcome.