Thumbnails used in slider but appear to be enlarged?

  • I’m using the WooCommerce Products Slider plug-in to add a slider to the top of my site’s homepage. The development version of the site is at https://kingstonchui.socialpresencebuilders.com. I’m using the WooCommerce Storefront theme. After I created the slider in WCPS, I added the following to the theme-header.php file:

    `<?php echo do_shortcode(“[wcps id=’25’]”); ?>

    If you go to the site you’ll notice that the images in the slider are somewhat fuzzy – it looks as though it might be selecting the thumbnail images but blowing them up to a much larger size. I found a similar topic in this support forum. I followed the instructions and set the “Slider Thumbnail Size” to Thumbnail – but it didn’t change how the images were rendered.

    If I change the “Slider Thumbnail Size” to “Medium” – then it shows the medium-sized image as I expect…and the size of the slider at the top of the page doesn’t change. So it seems like when I select “thumbnail” it’s trying to blow up the image to medium size…hence the fuzziness.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author PickPlugins

    (@pickplugins)

    Thanks for your post.

    Please select “Full” or “large” images size.

    View post on imgur.com

    Please see this screenshot when it displaying full-size image

    View post on imgur.com

    Let me know for more help,

    Regards

    Thread Starter jtj3

    (@jtj3)

    Thanks, but that didn’t really do what I want. The images aren’t fuzzy now (when I select “Full” or “large”, but the slider still takes up too much real estate on the page. What I’d really like to have it do is show the thumbnail, but show it at thumbnail size. In other words, the header should be about 2/3rds smaller than it actually is right now.

    • This reply was modified 7 years, 7 months ago by jtj3.
    Plugin Author PickPlugins

    (@pickplugins)

    I can see your placed the shortcode in wrong place, its not inside, page container, thats hwy its taking full area as width.

    Please see the screenshot how its looks here

    View post on imgur.com

    Please try this css to customize the slider width

    
.wcps-container {
  margin: 0 auto;
  width: 66.4989em;
}

    Regards

    Thread Starter jtj3

    (@jtj3)

    The code above didn’t change how my header looked – although I’m not 100% sure if I added it in the right place.

    I went into Appearance –> editor and poked through the CSS files that it showed me. I couldn’t find one that looked like it controlled the header. So, then I went into Appearance –> Customize –> Additional CSS and added it there. I saved the theme, and then went back to WPCS. I selected the slider I created and updated it by selecting Elements –> Thumbnail, and set the image to be used to thumbnail.

    This got me back to my original problem – the header is using the thumbnails but blowing them up to large size. This means they’re (still) bigger than I want, and they are fuzzy.

    Plugin Author PickPlugins

    (@pickplugins)

    The CSS I sent you to fix the full-width issue as it was before above the header, it now under header looks fine.

    but I don’t understand what image size you are looking for.

    you can apply any CSS to override. please see the there is also custom CSS input box 

    
.wcps-container div.wcps-items div.wcps-items-thumb img{

}

    Please don not select “thumbnail” if images are blur, try other options.

    Regards

    • This reply was modified 7 years, 7 months ago by PickPlugins.
    Thread Starter jtj3

    (@jtj3)

    The images in the header look fine if I select “Medium” or larger size. The problem is I do NOT want the images to be that large and take up that much real estate on the page. The images should be no larger than 150px. If there’s a way to select the “Medium” size image but have it fit into 150px, fine. If there’s a way to pick the thumbnails and have them show up at their original size (150px), fine.

    Again – I do not want to see the Medium or Large images. Yes, they are clear – they are also too large. I need to reduce the overall size (top to bottom) of the header. The header is too big, because the images are too big.

    Plugin Author PickPlugins

    (@pickplugins)

    Thanks for your reply,

    Can you please select thumbnail size: Medium
    Slider column number: 4

    It will display 4 item in a row, so width on item will decrease and i hope the size you were looking for.

    if you don’t want 4 item in a row, i have another solution for you. let me know the result.

    Regards

    Thread Starter jtj3

    (@jtj3)

    You put me on the right path. Setting slider column number to 4 helped – the images got smaller, but not quite what I wanted. I set it to 6 instead, and now the images are showing up as expected.

    You said you have a solution if I don’t want 4 items in a row – I wouldn’t mind having 4 images show up in a row, but 6 is a bit overwhelming. Is there a way to set “slider column number” to 6 so I get the properly-sized images, but to only have 4 images show up at a time on the slider?

    Thanks for all your help!

    Plugin Author PickPlugins

    (@pickplugins)

    Please set

    Slider column number: 4

    Style > Items Options > Items padding > 0 20px
    you change 20px as you need.

    I hope this should fix the issue.

    Regards

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Thumbnails used in slider but appear to be enlarged?’ is closed to new replies.