Image sizing problems

  • Hi,
    we keep having one nagging issue and I need to get it straightened out once and for all.

    When I want to place a slider as a banner or anything that involves an image on the homepage, I get a huge main image when first loading the site, and then it shrinks down to the “correct” size.

    The problem seems to stem from either Woocommerce or WordPress image settings, the Imsanity Plugin or this Theme. We use Flatsome as our theme and I notice that when I set image_size=”full” or “medium” or even px there is no effect. Some images that are smaller are blown up on the main page to compensate.

    My settings are as follows:
    Home Page code for a basic slider with the images
    [ux_slider style=”container” arrows=”reveal” bullets=”false” nav_color=”light” infinitive=”true” auto_slide=”true” columns=”4″]

    [ux_image id=”https://OURWEBSITE.com/wp-content/uploads/2014/08/banner1.png” image_size=”full” drop_shadow=”1″ image_pull=”30px”]

    [ux_image id=”https://OURWEBSITE.com/wp-content/uploads/2014/08/banner2.png” image_size=”full” drop_shadow=”1″ image_pull=”30px”]

    [ux_image id=”https://OURWEBSITE.com/wp-content/uploads/2015/10/Banner2.jpg” image_size=”full” drop_shadow=”1″ image_pull=”30px”]

    [ux_image id=”https://OURWEBSITE.com/wp-content/uploads/2015/10/Banner3.jpg” image_size=”full” drop_shadow=”1″ image_pull=”30px”]

    [/ux_slider]

    Woocommerce>Settings>Products>Display
    Catalog Images 247×300 Hardcrop checked
    Single Product Image 510×600 Hardcrop Unchecked
    Product Thumbnails 114×130 Hardcrop checked

    Settings>Media
    Thumbnail Size 150w 150h Crop thumbnail checked.
    Medium Size 600w 1024h
    Large Size 1024w 1024h

    Imsanity Plugin Settings:
    Images uploaded within a Page/Post 800 x 1024
    Images uploaded directly to the Media Library 800 x 1024
    Images uploaded elsewhere (Theme headers, backgrounds, logos, etc) 1024 x 1024

    Media Library Common sizes of photos we upload:
    1221 x 815
    768 x 1024
    1200 x 1680
    2448 x 3264

    We run a clothing store and image sizes that are uploaded can be all over the place, but I need to know a way to avoid the problems we face. Any insightful help into the issue would be of paramount importance to us.
    Thank You!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter mr9v9

    (@mr9v9)

    I figured out how to fix the homepage issues, but I still wonder about the other half of my OP if the sizes seem correct as a standard to work with?
    If anyone is running into the same issue please chime in and I will try and help.

    Can you please tell me how did you solve the homepage issues?
    I also have Flatsome theme, and some images in blocks are double the size when used (png format), thanks.

    Thread Starter mr9v9

    (@mr9v9)

    The workaround I have breaks the mobile version of the website so I had to revert back to using the old way with sizing my images the same. You are welcome to try though:

    [ux_slider style="focus" arrows="circle" timer="3000" bullets="false" nav_color="dark" infinitive="true" auto_slide="true"]

[ux_banner link="" bg="https://localhost/WP/wp-content/uploads/2015/12/PIC1" height="600px" animation="fadeInDown" ]

[button text="Shop Now" link="https://localhost/WP/product-category/adults/"]

[/ux_banner]

[/ux_slider]

    We use .jpg on the banner but we turned ours into a “Flip-Book” to go with the style.
    I don’t know if this helps you but here is an example of now:

    [ux_slider style="focus" arrows="circle" timer="3000" bullets="false" nav_color="dark" infinitive="true" auto_slide="true"]

[ux_image id="https://OURSITE.com/wp-content/uploads/2016/01/PIC1.jpg" image_size="medium""]

[ux_image id="https://OURSITE.com/wp-content/uploads/2016/01/PIC2.jpg" image_size="medium" drop_shadow="1" image_pull="30px"]

[ux_image id="https://OURSITE.com/wp-content/uploads/2015/12/PIC3.jpg" image_size="medium" drop_shadow="1" image_pull="30px"]

[/ux_slider]

    I have yet to understand the author of Flatsome and some of his support replies because he just states the obvious. In my case setting image_size= or image_pull= to my photo does nothing to my photo size. On page load without cache it “blows up” then shrinks down to the correct size of the banner. Re-sizing the images has helped but it slows the site.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image sizing problems’ is closed to new replies.