Featured Img (set width and height)

This topic has 3 replies, 2 voices, and was last updated 4 years, 2 months ago by Andre.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 14, 2019 at 5:52 am #7142
Andre
Participant
Tom, question about how WPSP handles thumbnail image sizes.

Setting the image width (px) and hight (WP Show Posts > Images) scales the featured image’s resolution down to the specified dimensions.

This can (does) result in images that aren’t clear (high res). If for example the featured image is 800 x 1000, setting 200 x 250 in WPSP will scale the image resolution right down (by a factor of four).

I want to maintain the original featured image resolution by using CSS to set the viewable hight-width dimensions.

By leaving the image width (px) and image hight (px) fields blank, then using this CSS, I can achieve what I need:
```
.wp-show-posts-image {
    max-width: 200px;
    height: auto;
}
```
The problem now, however, is that the current version of WPSP doesn’t allow for a custom class to be set for each Post List. So all featured images are affected by the CSS. Meaning I’m stuck with one max-width for all post lists.

Is there a workaround for this that you can think of?

If this is something that’ll be solved in the new version, awesome, happy to wait. For now tho, thought I would ask.

André
January 14, 2019 at 6:16 am #7143
Andre
Participant
UPDATE:

I noticed that there is a unique ID for each Post List in the CSS, so this works great (yay!):
```
#wpsp-15686 .wp-show-posts-image {
    max-width: 200px;
    height: auto;
}
```
```
#wpsp-15699 .wp-show-posts-image {
    max-width: 200px;
    height: auto;
}
```
However, if I try and combine multiple IDs into one css selector, the output breaks:
```
#wpsp-15686, #wpsp-15699 .wp-show-posts-image {
    max-width: 200px;
    height: auto;
}
```
In the above code, what am I doing wrong?
January 14, 2019 at 8:33 am #7149
David Beckwith
Participant
Hi there,

CSS selectors need to be the full string eg:
```
#wpsp-15686 .wp-show-posts-image, #wpsp-15699 .wp-show-posts-image {
    max-width: 200px;
    height: auto;
}
```
CSS Classes are coming to the next update 🙂
January 14, 2019 at 9:35 am #7150

Andre
Participant

Gotcha, thx David.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

[Support request] Featured Img (set width and height)