What are the optimal dimensions for the featured slider images?

I noticed that my pictures on the slider are all different sizes and dimensions. Because of this, the slider behaves in a way I don’t like, with large blank spaces under some images and undesirably large blown-up versions of the images too large for my screen… I came to the conclusion that I should create copies of the images, crop them to a specific size, and set those as the featured slider images.

Is there an optimal pixel dimension and resolution that I should use for best performance? Will this be optimal for all devices?

Thanks!

Hi @wombat,

I hope you are well today and thank you for your question.

Yo should use optimal slider image size 1900px X 600px which will display as shown in our demo site here https://colorlib.com/sparkling/

Best Regards,
Movin

thanks. that’s much better. I have an additional questions which may be related… When I selected images as featured images, it seemed to add them in 2 separate places: the slider (which I want) and an additional image at the top of each blog (which I do not want). I find this additional image at the top of the blog redundant, cluttering and useless… it automatically crops the image in a way I do not want. I already have the full image displayed in the content space of my blog. To be very clear, I only want my images displayed in 2 places per blog: in the blog content space and on the slider.

Is there a way I can remove what I do not want while keeping what I want?

Thanks for your help

Perhaps I’m missing something here but do I need photos sized at or above 1900 X 600 to use for the slider? If not how do I change smaller photos to the correct size?

Thanks for any help and I hope I don’t get in the way of wombat’s follow up question being answered

@wombat

Is there a way I can remove what I do not want while keeping what I want?

You can try removing that featured image by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

body.single-post img.single-featured.wp-post-image {
    display: none;
}

@david144 To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/sparkling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Hi Movin,

Your custom CSS code worked! thank you! Unfortunately, it only worked partially. I will explain…

The way my website is set up, the home page has a long scrolling ream of 10 blog posts on it. On this page the images are unchanged… the featured image which I wanted to remove is still present on all the blogs. :frowning:

When I click on one of these blogs on the home page, it links to a page exclusively designated for that blog. On THAT page, the additional featured image is no longer there, which I am very pleased to see! :slight_smile:

Is there perhaps, an additional CSS code which can remove the additional featured image from the home page?

Again thank you! I admire your code wizardry.

Yes you can also remove it from your home blog page using the below CSS code.

body.blog img.single-featured.wp-post-image {
    display: none;
}

Thank you very much.

I tried it and it removed not only the ‘featured image’ at the top of each blog on the homepage, but it also removed the image which I included in the main body of each blog’s content.

Is there a way to only remove the featured image while leaving the content image alone?

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

www.spectacularsoulart.com

I removed that css script because I’d rather have the 2 images than no images… since the site is meant for displaying artwork :slight_smile:

I visited your shared site and used the above CSS code which only removed the featured image from the post and not the image added in the post.

Please see the attached screenshot taken before and after using the shared CSS code.

Please advise.