Difference between WordPress featured pictures vs. slider picture

Hello,

I really like the work you’ve done with these theme and recently started using it for my website.

However, one thing I don’t understand is the difference between the default size for featured image and image slider as outlined here: Dazzling Theme Documentation - Colorlib

I like how pictures look in 1920 by 550 pixel on the slider, but when I set this kind of image as featured it doesn’t look so well in the main view.

Is there a way to set different images and/or control how one image appears in the different places?

Thanks in advance!

Featured image size for this theme is set via functions.php and you will see there code like this:

add_image_size( 'dazzling-featured', 730, 410, true );

The best option here would be to keep the same 730px in width but change height to get the same aspect ratio as for your slider.

So if you use 1920px by 550px image in slider you should set aspect feature image size to 730 by 210 to get the same aspect ratio. Of course if the image has different size you can tweak this value.

The best option is to do all this changes via Child Theme style.css

Hello,

Thanks for your quick response. I use the image size you recommend in the theme’s documentation to get the nice full-width view on the slider (please have a look at the screenshot):

http://awesomescreenshot.com/0312oa0xfc

And then in the list view of the posts I see the features image with the same aspect ratio which doesn’t look so good (red rectangle in the screenshot).

In the theme demo here: https://colorlib.com/dazzling/ you still use full-width image for the slider, but the featured images on the front page seem to have different aspect ratio. I am trying to get the same effect.

Actually, the same question applies to the Sparkling theme too (I just tried it).

If you are switching between themes WordPress doesn’t automatically regenerate thumbnails for entries that already exists (when creating new entry or updating existing thumbnail it will be regenerated by WordPress). That’s why plugns like this has over one million downloads http://wordpress.org/plugins/regenerate-thumbnails/

This plugin will help you to regenerate all thumbnails to size defined by theme you use.

Slider images for both themes are displayed as is and are not resized to allow more flexibility for users.

I am not sure the issue I’m trying to change comes from thumbnails.

What I mean is that the same picture (the featured image) is used for both the slider and the picture that goes with each article in the list view.

These two have different aspect ratios: 1920/550=3.49; 750/410=1.83 (Sparkling theme).

In the demos of both themes I have seen that you seem to use the same picture with different aspect ratios for the slider and the list view and I was wondering how you have achieved this. Here’s the screenshot with the images that I am talking about: http://awesomescreenshot.com/05b2ojovb8

Yes, aspect ratios are different and images are just cropped. It is the same image but hard cropped. You can see it an example:

https://colorlib.com/sparkling/wp-content/uploads/sites/5/2014/03/slider-image-blurry-750x410.jpg

remove -750x410 from the URL and you will get the original image size.

https://colorlib.com/sparkling/wp-content/uploads/sites/5/2014/03/slider-image-blurry.jpg

All images that are used in my theme demo slider are cropper like that. Of course, if you have edge-to-edge text or something that can’t be cropped this might not be the best solution. In slider it will look awesome but featured image could be unreadable.

You can feel free to play around featured image size via functions.php file to get the results you are looking for. Also image in slider can have different height because these images are not resized and are displayed as is to

Sounds good. How do you get the theme to use the cropped image in one case (list view) and the uncropped original picture in the other (the slider)?

This is how it works by default :slight_smile:

In case you are switching from some other theme then you will have to regenerate thumbnails like I described above using Regenerate Thumbnails plugin.

Let me know if this helps.

Got it this time. It looks thumbnails was the problem after all. :slight_smile: I didn’t realize the featured picture that appeared with the article in the list view was also a thumbnail.

Thanks for you help, much appreciated!

Yes, they are the same thing. They used to be called thumbnails but since WordPress 3.0 they become featured images. Of course we still call those tiny images in widgets and elsewhere as thumbnails because they are small but basically these are featured images too but just smaller :slight_smile:

Todays lesson: Post Thumbnail = Featured Image :slight_smile:

Hi, sorry for resurrecting this old post, but it’s the only one I’ve found so far discussing the effect I’m trying to achieve.
I want the same effect as gospodin_i does - to have featured slider image dimensions ratio different from post featured image - exactly as it is done in demo site. But as I’m completely new to WordPress and Sparkling theme (I used also Dazzling theme) I have no idea of how to understand your advice, Aigars.

From what I understand by observing my pages behavior, the featured slider uses full version of featured images - thus its height is too high and when I use full HD images the slider height exceeds the screen height and the further page contents is hidden below the screen edge.

So I guess when I change featured image dimensions it won’t help with featured slider. Can you provide me with any straightforward information of how to set/limit the featured slider height so it displays only cropped part of the features image and the further page content is visible below it?

Thank you very much.

BTW: My site is dmn.cz