netominas
By:
netominas

Thumbs incorrect size in wordpress

November 18, 2014 808 views

My images are of different size in my blog wordpress.

See here: http://resumodanovela.com.br

What's wrong?

Tks

1 comment
  • Thumbs can be tricky., so it can be helpful to understand the process when you upload an image into WordPress:

    1. WordPress has some default thumb-sizes that it automatically generates when you upload images. If an image is not as big as one of those default sizes then you will get odd-shaped images that do not fit in your layouts.

    Also, if you upload an image that is more vertical than horizontal, and you are using a horizontal-sized image in your theme, you will get some cropping that sometimes looks weird (people's heads cut off and such)

    1. The quick and easy way to get around this is to make sure the images you upload are cropped nicely and sized well for what you are using it for....before uploading them. Also, be sure to upload images that are large enough to fit where you want them to (a 100px x 200px image will not make a good thumbnail for a 450px x 250px slideshow)

    That little slide-show at the top of your page uses images that are 450px × 250px. So if you are uploading images to be used in that slideshow, you should make sure that image has a similar aspect-ratio. (longer than it is tall) , and your image needs to be as large or larger than 450px X 250px, or else it will be sized wrong and look weird

    By editing and cropping the images yourself BEFORE you upload them, you will get better results in your different design elements...your WordPress theme is not smart enough to do that on its own.

    ignore this part if you are not used to messing with code in your theme

    1. A slightly more advanced method, if you are willing to dinker with CSS, PHP and your template files is to create a div rather than an img, and set your thumbnail as the background using inline CSS.
    <div class="slide" style="background: url(<?php  $yourthumb_url; ?>) no-repeat center !important; background-size: cover !important; max-width: 100%; height: 100%; "></div>    
    

    Then you can just set your style.css to give that div whatever dimensions you want, and the image will auto-resize to fit.

    .slide { width:98%; height: 350px; }
    

    I prefer this method and use it almost entirely in favor of inserting images. Especially where the images are used for decorative purposes (like slide-shows).

    The big advantage being that you can re-size those divs for different screen-sizes for some nice adaptable layouts.

    Here is a site I did recently where a slide-show uses divs rather than img:

    https://yogaloftsonora.com/

    The slides fit perfectly, and will adapt if you adjust the browser-size.

1 Answer

This question was answered by @sierracircle:

Thumbs can be tricky., so it can be helpful to understand the process when you upload an image into WordPress:

  1. WordPress has some default thumb-sizes that it automatically generates when you upload images. If an image is not as big as one of those default sizes then you will get odd-shaped images that do not fit in your layouts.

Also, if you upload an image that is more vertical than horizontal, and you are using a horizontal-sized image in your theme, you will get some cropping that sometimes looks weird (people's heads cut off and such)

  1. The quick and easy way to get around this is to make sure the images you upload are cropped nicely and sized well for what you are using it for....before uploading them. Also, be sure to upload images that are large enough to fit where you want them to (a 100px x 200px image will not make a good thumbnail for a 450px x 250px slideshow)

That little slide-show at the top of your page uses images that are 450px × 250px. So if you are uploading images to be used in that slideshow, you should make sure that image has a similar aspect-ratio. (longer than it is tall) , and your image needs to be as large or larger than 450px X 250px, or else it will be sized wrong and look weird

By editing and cropping the images yourself BEFORE you upload them, you will get better results in your different design elements...your WordPress theme is not smart enough to do that on its own.

ignore this part if you are not used to messing with code in your theme

  1. A slightly more advanced method, if you are willing to dinker with CSS, PHP and your template files is to create a div rather than an img, and set your thumbnail as the background using inline CSS.
<div class="slide" style="background: url(<?php  $yourthumb_url; ?>) no-repeat center !important; background-size: cover !important; max-width: 100%; height: 100%; "></div>   

Then you can just set your style.css to give that div whatever dimensions you want, and the image will auto-resize to fit.

.slide { width:98%; height: 350px; }

I prefer this method and use it almost entirely in favor of inserting images. Especially where the images are used for decorative purposes (like slide-shows).

The big advantage being that you can re-size those divs for different screen-sizes for some nice adaptable layouts.

Here is a site I did recently where a slide-show uses divs rather than img:

https://yogaloftsonora.com/

The slides fit perfectly, and will adapt if you adjust the browser-size.

View the original comment

Have another answer? Share your knowledge.