New Landing › How can we help? › Themeforest Theme Support › Neighborhood › Bring all images to the same size

Viewing 14 posts - 1 through 14 (of 14 total)
  • Back to forum
    Posted in: Neighborhood
  • February 13, 2016 at 11:27 am #248893
    goodtimesmag
    Member
    Post count: 191

    Hi swiftideas team,

    I use the images from different websites for my affiliate shop, but as you can see here: http://goodtimesdeals.de/produkt-kategorie/snowboards-men/page/28/ some images are bigger or smaller than others. What can I do to bring all image to a specific container sizes?

    Just for you to know, I have no influence on the imported image size itself.

    Many thanks for your help in advance.

    PS: I know that the image size is a big topic in the forum, but unfortunately I didn’t find the answer.

    February 15, 2016 at 1:22 pm #249145
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Can you provide a screenshot? For me they are all the same size

    – Kyle

    February 15, 2016 at 1:25 pm #249151
    goodtimesmag
    Member
    Post count: 191

    Please find a sceenshot attached. The screenshot is from this site: http://goodtimesdeals.de/produkt-kategorie/snowboards-men/

    Attachments:
    You must be logged in to view attached files.
    February 15, 2016 at 1:58 pm #249171
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    The issue is your uploading small images, they have to be bigger than the size you have set in the woocommerce settings for them to be resized/cropped

    – Kyle

    February 15, 2016 at 2:02 pm #249175
    goodtimesmag
    Member
    Post count: 191

    Like I said before, I can not upload any other image sizes, because the images come from different affiliate shops.

    So do I have another possibility to solve this issue?

    February 15, 2016 at 2:08 pm #249183
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    It’s the way WooCommerce works, not controlled by the theme. You will need to contact their support team for a solution

    – Kyle

    February 15, 2016 at 3:26 pm #249245
    goodtimesmag
    Member
    Post count: 191

    Hi Kyle,

    I have found a way to bring all images to the same heigh.

    I used this css code:
    .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
    width: auto !important;
    height: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    This code works fine for most of my product images. Only the smallest images are distorted know. Do you have an idea how I could fix this little issue?

    Example link: http://goodtimesdeals.de/produkt-kategorie/sonnenbrillen-men/page/4/

    February 15, 2016 at 3:31 pm #249252
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    That’s because you have set the height to 350px, which is stretching those images

    – Kyle

    February 15, 2016 at 3:36 pm #249258
    goodtimesmag
    Member
    Post count: 191

    Is their anything I can do so that all my product images kepp their ratio and fit to specific image container size?

    February 15, 2016 at 3:49 pm #249266
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    You’re best asking WooCommerce as it’s their functionality

    – Kyle

    March 1, 2016 at 1:55 pm #252964
    gchagas
    Member
    Post count: 2

    Hello

    I’m having the same issue but i’m using this code but i’m sure if is the right work around

    .product-image {
    height: 404px !important;
    display: table-cell !important;
    vertical-align: middle !important;
    }

    Could the support have a look on that please ?

    Regards

    March 1, 2016 at 4:08 pm #253006
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Does that css work for you?

    – Kyle

    March 1, 2016 at 4:11 pm #253010
    goodtimesmag
    Member
    Post count: 191

    I use his code now and it seems to work for me:

    .product-image {
    height: 200px;
    float: none !important;
    /* display: inline-block !important; */
    vertical-align: middle !important;
    position: relative;
    margin: 1em 0;
    /* background: white; */
    }

    .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
    /* width: auto !important; */
    /* max-height: 300px !important; */
    /* margin-left: auto !important; */
    /* margin-right: auto !important; */
    position: absolute;
    margin: auto;
    max-width: 150px;
    max-height: 150px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    }

    March 1, 2016 at 4:16 pm #253014
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Ok great

  • Back to forum
    Posted in: Neighborhood
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.