can i set image ratio to square?

  • Resolved webwerkplaats

    (@webwerkplaats)


    6 years, 2 months ago

    Now the images are landscape rectangular. Which CSS do i use to set them to get a square image (height=width) on all screens (responsive)
    In all views. List, gallery and single view.

    I have changed WPAdvert settings to:
    Adverts Gallery max. width 500 x max. height 500 crop image=yes
    Adverts List max. width 300 x max. height 300 crop image=yes
    Upload Thumbnail max. width 150 x max. height 150 crop image=yes

    Resized all thumbnails with plugin but didn’t work. Then removed all images from media library and uploaded new images. Doesn’t change the ratio

    • This topic was modified 6 years, 2 months ago by webwerkplaats.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Greg Winiarski

    (@gwin)

    Can you paste a link to the page where you have your ads list? or one of ad details pages?

    Thread Starter webwerkplaats

    (@webwerkplaats)

    Sure, the gallery in this temporary prototype is right here:
    https://www.4uwerkplaats.nl/staopstoel/voorraad/

    I have no child themes anymore, switched it off and no CSS in the theme. Clean.

    Look at the list view too. It’s awful.

    I have the latest version of WP and latest version of Divi theme.
    Thanks for looking in to it. Appreciate it !

    Plugin Author Greg Winiarski

    (@gwin)

    It seems you already have the image sizes reset properly, you just need to apply new CSS rules to width and height.

    You can do that by going to wp-admin / Appearance / Customize / Additional CSS panel and add there the code below

    
body .advert-img {
    width: 300px !important;
    height: 300px !important;
    margin: auto !important;
}
body .advert-img > img {
    height: 300px !important;
}
    Thread Starter webwerkplaats

    (@webwerkplaats)

    Brilliant ! It works with the grid view and category view. As you can see.
    Unfortunatly not in the list view, single ad view though.

    Plugin Author Greg Winiarski

    (@gwin)

    To make it work with both views you would need to update the code to look like this

    
body .advert-item-col-2 .advert-img {
    width: 300px !important;
    height: 300px !important;
    margin: auto !important;
}
body .advert-item-col-2 .advert-img > img {
    height: 300px !important;
}
body .advert-item-col-1 .advert-img {
    width: 61px !important;
}
body .advert-item-col-1 .advert-img > img {
    height: 61px !important;
}
    Thread Starter webwerkplaats

    (@webwerkplaats)

    Works !
    The only thing left was the single product view but thanks to your css examples i managed that with:

    .wpadverts-slide-image {
    width: 40vw !important;
    height: 40vw !important;
    margin: 0px !important;
    }

    .wpadverts-slide-img {
    width: 40vw !important;
    height: 40vw !important;
    margin: 0px !important;
    }

    Thread Starter webwerkplaats

    (@webwerkplaats)

    Thanks for the help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘can i set image ratio to square?’ is closed to new replies.