Inflated Blog Slider Images

Support
#1

Hello!

I am having some issues with my X Theme Blog Page Slider. It looks as though all of the images are displaying at full size. Is there something I can do to fix this issue?

Thanks in advance!

#2

Hi @ASTI,

Thanks for writing in!

By default, the featured image in Ethos blog index will display the full image. Do you want to display a smaller image instead? If that is the case, since the child theme is set up, please add the following code in your child theme’s functions.php file


// Entry Cover Background Image Style
// =============================================================================

if ( ! function_exists( 'x_ethos_entry_cover_background_image_style' ) ) :
  function x_ethos_entry_cover_background_image_style() {

    $featured_image   = x_make_protocol_relative( x_get_featured_image_url('large') );
    $background_image = ( $featured_image != '' ) ? 'background-image: url(' . $featured_image . ');' : 'background-image: none;';

    return $background_image;

  }
endif;

You can replace large in the code into thumbnail or medium if you feel that the large size is big enough for you.

#3

This worked to an extent. It is now pulling the images in at “Large” (1024x1024), but changing the large media size isn’t manipulating the images. This is making the cover image cut off and have a margin. See here:

Is there anything you can think of to fix this?

#4

Hi There @ASTI

Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

.x-slides .x-post-slider-entry {
    background-size: cover !important;
}

Thanks!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.