Return to previous page

Image size in slider/carousel mode and other problems.

This topic has 14 replies, 3 voices, and was last updated 7 years, 6 months ago ago by Rose Tyler

Przemas

Participant

November 8, 2017 at 22:31

Hi,

Some problems with xstore theme 4.11.

1. Products image size on main page is too big. Especially in the slider/carousel. Pictures are mostly in size ~ 400*200 pix
Screenshot:
https://drive.google.com/open?id=1t1x21I96B3P8Iu5-olQZrk8DEENCgJFL
Where I change the size of the displayed image? The product image on the product page is displayed correctly.

2. I can not update theme to version 4.12 After updating, the following information is displayed: “There is a new version of XStore Theme available.” and theme is still in 4.11 version.

#177156 Copied Theme version: 4.11

13 Answers

Rose Tyler

Support staff

November 9, 2017 at 09:50

Hello,

1. To change the size of the product images go to WooCommerce > Settings > Product > Display > Image settings and don’t forget to regenerate thumbnails after changes(use Regenerate thumbnails plugin). Read more about image sizes – https://docs.woocommerce.com/document/fixing-blurry-product-images/
2. Please, try to update your theme to version 4.12 manually via FTP https://www.8theme.com/documentation/xstore/theme-installation/theme-update/
Let us know if you need any further assistance.

Regards

#177195 Copied

Przemas

Participant

November 9, 2017 at 23:20

Unfortunately, it does not work well – despite the change in image size (I made thumbnails using the plugin), the image in slider is scaled up. Does not look good.

The problem is also the best offer – module. Despite the manual setting of the size of the picture does not work best.

Any ideas to change this?

Link to test page with slider product module and best offer module.
http://colarsydney.com/home-2/

Under links to screenshot
page-rows-modules
best-offer-settings
test-page
woocommerce-product-display-settings

#177269 Copied Theme version: 4.11

Rose Tyler

Support staff

November 10, 2017 at 10:40

Hello,

Could you please provide wp-admin access in Private Content?
We’ll check what can be done to help you.

Regards

#177317 Copied

Przemas

Participant

November 10, 2017 at 12:16

I have made several pages with different modules – upscaling working on all :/ and products image looks awful. Also on the shop page this phenomenon occurs.

In my opinion, generating a new image size does not work as it should – the regenerate thumbnail plugin does not work.

Regards

Please, contact administrator
for this information.

#177331 Copied Theme version: 4.12

Rose Tyler

Support staff

November 10, 2017 at 13:27

Hello,

The wp-admin credentials are incorrect.
Please check them.

Regards

#177336 Copied

Przemas

Participant

November 10, 2017 at 14:29

Ok, now should be okay…

Please, contact administrator
for this information.

#177343 Copied

Rose Tyler

Support staff

November 10, 2017 at 15:11

Hello,

Please upload .jpg images for products with similar dimensions and use https://tinypng.com/ to optimize images.

Regards

#177347 Copied

Przemas

Participant

November 10, 2017 at 17:06

Please upload .jpg images for products with similar dimensions and use https://tinypng.com/ to optimize images.

I think this is not the cause – I will of course try to load graphics at the same height, but I think that this is different problem here.

Lets see – small test:
By opening the photo by “open the graphic in a new tab” the image is 83×300 but the main page in the slider is enlarged.
The same thing happens with the graphic changed by you (test.jpg) on the home page is enlarged – and try to open it by right-clicking and “open the graphic in a new tab” you will see that the size is different.

Your test file:
http://colarsydney.com/wp-content/uploads/2017/11/test.jpg
And look on this picture in slider – enlarged and blurred

In code usigng google chrome code inspector everythink look ok but look at the miniature
https://drive.google.com/open?id=1xqgznqjcvVcpBI3uFEzGgz78rKjt4Bc8
Image size: 230*831 – natural 83*300 in code:

<img width="83" height="300" src="//colarsydney.com/wp-content/uploads/2017/10/mouthwash-bottle-83x300.png" class="attachment-shop_catalog size-shop_catalog wp-post-image swiper-lazy swiper-lazy-loaded" alt="" srcset="//colarsydney.com/wp-content/uploads/2017/10/mouthwash-bottle-83x300.png 83w, //colarsydney.com/wp-content/uploads/2017/10/mouthwash-bottle-61x220.png 61w, //colarsydney.com/wp-content/uploads/2017/10/mouthwash-bottle.png 111w" sizes="(max-width: 83px) 100vw, 83px">

No place where is image size 230*831
Any ideas? solutions?

Regards

#177360 Copied
Przemas

Participant

November 11, 2017 at 14:22
Hi, Looking for a solution I came across something like this (this is listing from google web inspector – very long – sorry):

img.attachment-shop_catalog.size-shop_catalog.wp-post-image accessKey:"" align:"" alt:"" assignedSlot:null attributes: NamedNodeMap {0: width, 1: height, 2: src, 3: class, 4: alt, 5: srcset, 6: sizes, length: 7} baseURI:"http://colarsydney.com/" border:"" childElementCount:0 childNodes:[] children:[] classList:(3) ["attachment-shop_catalog", "size-shop_catalog", "wp-post-image", value: "attachment-shop_catalog size-shop_catalog wp-post-image"] className:"attachment-shop_catalog size-shop_catalog wp-post-image" clientHeight:443 clientLeft:0 clientTop:0 clientWidth:295 complete:true contentEditable:"inherit" crossOrigin:null currentSrc:"http://colarsydney.com/wp-content/uploads/2017/11/test.jpg" dataset:DOMStringMap {} dir:"" draggable:true firstChild:null firstElementChild:null height:443 hidden:false hspace:0 id:"" innerHTML:"" innerText:"" isConnected:true isContentEditable:false isMap:false jQuery1124044129188520123175:222 lang:"" lastChild:null lastElementChild:null localName:"img" longDesc:"" lowsrc:"" name:"" namespaceURI:"http://www.w3.org/1999/xhtml" naturalHeight:300 naturalWidth:200 nextElementSibling: null nextSibling:text nodeName:"IMG" nodeType:1 nodeValue:null nonce:"" offsetHeight:443 offsetLeft:0 offsetParent:div.product-image-wrapper.hover-effect-slider offsetTop:0 offsetWidth:295 onabort:null onauxclick:null onbeforecopy:null onbeforecut:null onbeforepaste:null onblur:null oncancel:null oncanplay:null oncanplaythrough:null onchange:null onclick:null onclose:null oncontextmenu:null oncopy:null oncuechange:null oncut:null ondblclick:null ondrag:null ondragend:null ondragenter:null ondragleave:null ondragover:null ondragstart:null ondrop:null ondurationchange:null onemptied:null onended:null onerror:null onfocus:null ongotpointercapture:null oninput:null oninvalid:null onkeydown:null onkeypress:null onkeyup:null onload:null onloadeddata:null onloadedmetadata:null onloadstart:null onlostpointercapture:null onmousedown:null onmouseenter:null onmouseleave:null onmousemove:null onmouseout:null onmouseover:null onmouseup:null onmousewheel:null onpaste:null onpause:null onplay:null onplaying:null onpointercancel:null onpointerdown:null onpointerenter:null onpointerleave:null onpointermove:null onpointerout:null onpointerover:null onpointerup:null onprogress:null onratechange:null onreset:null onresize:null onscroll:null onsearch:null onseeked:null onseeking:null onselect:null onselectstart:null onstalled:null onsubmit:null onsuspend:null ontimeupdate:null ontoggle:null onvolumechange:null onwaiting:null onwebkitfullscreenchange:null onwebkitfullscreenerror:null onwheel:null outerHTML:"<img width="200" height="300" src="//colarsydney.com/wp-content/uploads/2017/11/test.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="//colarsydney.com/wp-content/uploads/2017/11/test.jpg 200w, //colarsydney.com/wp-content/uploads/2017/11/test-140x210.jpg 140w" sizes="(max-width: 200px) 100vw, 200px">" outerText:"" ownerDocument:document parentElement:a.product-content-image parentNode:a.product-content-image prefix:null previousElementSibling:null previousSibling:text referrerPolicy:"" scrollHeight:443 scrollLeft:0 scrollTop:0 scrollWidth:295 shadowRoot:null sizes:"(max-width: 200px) 100vw, 200px" slot:"" spellcheck:true src:"http://colarsydney.com/wp-content/uploads/2017/11/test.jpg" srcset:"//colarsydney.com/wp-content/uploads/2017/11/test.jpg 200w, //colarsydney.com/wp-content/uploads/2017/11/test-140x210.jpg 140w" style:CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …} tabIndex:-1 tagName:"IMG" textContent:"" title:"" translate:true useMap:"" vspace:0 width:295 x:197 y:1008

View items:

clientHeight:443 clientWidth:295 >firstElementChild:null height:443 width:295 scrollHeight:443 scrollWidth:295

In this lines height and width is 295×443 when natural size of image is 200×300 (this is test.jpg size) Probably some value influences on the image size, but I have not found it yet. Perhaps it will be helpful to you.

Regards
#177375 Copied
Przemas

Participant

November 11, 2017 at 15:47
In google code inspector I find a line which is a problem – it changes the size of the photos in the slider

@media only screen and (min-width: 1200px) style.css?ver=4.8.3:5812 .content-product .product-content-image img { opacity: 0; min-width: 100%; <------------------------ THIS OPTION }

This code is in style.css – when I set this to “auto” everything is ok – images have right dimensions.
Now the question is where to change it in Xstore settings, of course I can change in style.css but I do not know if this is a good and final solution.

Below I attach a 2 screenshots:

Set on
Set off

Regards
#177377 Copied
Olga Barlow

Participant

November 13, 2017 at 15:31
Hello,

Add the following code in custom CSS to fix this issue

@media only screen and (min-width: 1200px){ .content-product .product-content-image img { min-width: 1px; width: auto; }}

Regards
#177464 Copied
Przemas

Participant

November 15, 2017 at 19:54

Ok, this works fine, but I have change from 100% to auto on most screen sizes.
Maybe you should consider implementing this patch in the theme update.

Regards

#177719 Copied

Rose Tyler

Support staff

November 16, 2017 at 09:36

You’re welcome!
Let us know if you need any further assistance.

Regards

#177758 Copied
Viewing 14 results - 1 through 14 (of 14 total)