Featured image resizing and centering

Thank you for reposting…do you have a link to your site and I can take a quick look and then come up with a solution for you.

Thank you for your prompt replies!

https://www.gowithvo.com

Your welcome about the prompt replies…I’m working late on the next theme and I keep my email open for support requests ??

Anyway, let’s tackle the featured image on the “Blog Small” layout option. The featured images are coded in the stylesheet to be a maximum of 30% of the content area, so your images will scale down for the width to be 30%. You can of course do some custom CSS to cancel that out if you want the full size to display. If so, use a plugin like “Simple Custom CSS” which lets you create a custom stylesheet to override the theme’s own stylesheet. The code you would put into yours would be:

.blog-small .wp-post-image {
    max-width: 100%;
}

Regarding your first question, I’m not quite sure I fully understand because if you are using the “Blog Small” layout option. Which layout option were you wanting to use, the Blog Small, or the Blog Full Style?

1. For “Blog Small” featured image: Instead of scaling the original down to 30%, is there a way to customize the width/height instead? I am looking to make the thumbnails a cropped square version (like Facebook profile pictures). (I can see this may be more complicated than I had anticipated).

2. I would like to center the featured image on the Single Post page. I actually found this on another support thread: https://www.ads-software.com/support/topic/featured-images-87?replies=9
and you have explained how to override the CSS in this thread. So this part is resolved. Thank you!

I hope this clarifies a bit. I’m getting excited for the new update! Your support has been amazing.

You should be able to make your images square and uploading them as you make your post using the Featured Image upload.

Also, check your Settings >> Media to see if they have sizes in the fields. If they are and you don’t need them, then make them all 0.

As for the 30% scaling, regardless, the image will be resized down by width to be 30% of the container width. Height will be relative (proportional) to the width.

If you want to cancel out that 30%, then use the custom CSS I posted previously.

I can understand making the images square for new posts in the future, but I have a ton of content I don’t want to edit and then upload again.

so, can you also set a max height without it scrunching up the image? I tried to do a max height percentage, but I’m not sure that makes sense. The images I have that are landscape are fine and scale really well, but images I have as featured images that are portrait make the overall “small post” longer and adds a lot of white space.

The system already creates thumbnails. Is it possible to set square/cropped dimensions for the featured post image?

https://www.salvagedfaith.com

@amomono…I can understand the fact you already have a ton of images. You also don’t have to create square images, and you have the option to set the max height, or you can set the height. Either one will (or should) keep the image proportions. By default when using the small blog style, the theme’s styling is set as this:

.blog-small .wp-post-image {
    float: left;
    max-width: 30%;
    margin: 0 4% 3% 0;
}

The 30% you see above will keep the image to a max-width of 30% based on the content area overall width.

If you had your media settings set before, you can still use those if you wish. You might also want to look into an auto thumbnail regeneration plugin which takes you images and remakes your thumbnails. However, it really depends on what your end-result is to be.

But to understand what it is you are wanting to do, perhaps reply back with this info…are you wanting your images cropped to be a specific width and height, or width, or height?

I would like to keep the max-width at 30% (with image scaling) AND I would like to add a max-height that crops the image if it is bigger than that max-height

Right now, I have:

.blog-small .wp-post-image {
float: right;
height: 175px;
max-width: 30%;
margin: 0 0 3% 3%;
}

But, this distorts the image.

perhaps those are two separate functions and it would be best to stick with a max height.

.blog-small .wp-post-image {
float: right;
height: 175px;
width: auto;
margin: 0 0 3% 3%;
}

Unfortunately, this doesn’t set any limitations on the width.

Thank you for the added information…so you want to keep it as-is, but you want it to have what is referring to a type of “Conditional cropping” which would require some serious scripting.

Long story short, this is not really possible, but what you can do is add a max-height to your CSS with a percentage instead of px. Your image will still be proportional, but if the height has to adjust to be less, your width will be relative…you will get more white space horizontally.

There is one other possibility, customize the theme to generate a specific cropped image size, but then we’re getting into other problems of certain images being cropped where you don’t want them to be cropped. In a nutshell, if your images vary in subject matter, size, width’s, and heights, then you need to keep it as flexible as possible. It’s very hard to create a method that fits all scenarios.

Try to keep your CSS width and heights as percent, not pixels, otherwise you get image distortion from the px dimension.