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 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

Support staff

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)