responsive images for mobiles

kaito
Topic Author
Offline

5 years 4 months ago #333556 by kaito

responsive images for mobiles was created by kaito

-- HikaShop version -- : HikaShop Starter 4.4.2
-- Joomla version -- : 3.9.27
-- PHP version -- : 7.4.3
-- Browser(s) name and version -- : Chrome Versión 90.0.4430.212 (Build oficial) (64 bits)

Hi:
I have products with variants and when I click on variants thumbnail in desktop view it show me the correct image wiew (see image 1), but if i use mobile resolution, images do not resize to width screen , they seem to resize to height screen (see image 2). How can I solve it?
Thanks in advance,
Ricardo

Please Log in or Create an account to join the conversation.

Philip
Offline

5 years 4 months ago #333558 by Philip

Replied by Philip on topic responsive images for mobiles

Hello,

can you provide an Url link in order to allow us to investigate on your Css issue, and better answer you.
Awaiting your elements to be able to progress on your subject.

Regards

Please Log in or Create an account to join the conversation.

kaito
Topic Author
Offline

5 years 4 months ago #333585 by kaito

Replied by kaito on topic responsive images for mobiles

Hi Philip:
I have upload web from my localhost to online (it is still in development), url: bodegasanmiguel.es/index.php/es/tienda-d...polosa-rosado-joven#
When you are in desktop resolution everuthing is ok, but when you change screen to mobile, then if you click in variants product thumnails they loose ratio and fit to heigh screen instead of fitting to width screen.
For mobile, if you click in product image decsription, then this thumnail fits correct to width screeen.
Regards
Ricardo

Please Log in or Create an account to join the conversation.

Philip
Offline

5 years 4 months ago - 5 years 4 months ago #333587 by Philip

Replied by Philip on topic responsive images for mobiles

Hello,

So far, it seems that the Shadowbox for a reason or another fail to define dynamically your popup size, see my screenshot :

Can you try to use the Swipebox image popup (instead of shadow box) to see if that won't solve your issue ?
Hope this will help you to solve your current issue.

Regards

Last edit: 5 years 4 months ago by Philip.

Please Log in or Create an account to join the conversation.

kaito
Topic Author
Offline

5 years 4 months ago #333593 by kaito

Replied by kaito on topic responsive images for mobiles

Hi Philip:

Where can I select Swipebox popup type? I don´t see it in my Display configuration (please, see image attached).

Kind regards,

Ricardo

Please Log in or Create an account to join the conversation.

Philip
Offline

5 years 4 months ago - 5 years 4 months ago #333594 by Philip

Replied by Philip on topic responsive images for mobiles

Hello,

You will find this option, in Main HikaShop configuration page :
- Go to Display tab
- In General display options part

Hope this will help you to solve your current issue.
Regards

Last edit: 5 years 4 months ago by Philip.

Please Log in or Create an account to join the conversation.

kaito
Topic Author
Offline

5 years 4 months ago #333620 by kaito

Replied by kaito on topic responsive images for mobiles

Hi Philip:
There is no option swipebox or mootools in that menu (see image attached) in my Hikashop version Starter 4.4.2 and this is the latest Hikashop version available.
Is there any way to import swipebox and mootools options to check fitting performance for images in mobiles?
Thanks in advance,
Ricardo

Please Log in or Create an account to join the conversation.

nicolas
Offline

5 years 4 months ago #333634 by nicolas

Replied by nicolas on topic responsive images for mobiles

Hi,

Swipebox and other image popup mechanisms are availables only after installing and enabling this plugin from our marketplace:
www.hikashop.com/marketplace/product/117...pups-by-obsidev.html

Please Log in or Create an account to join the conversation.

kaito
Topic Author
Offline

5 years 4 months ago #333646 by kaito

Replied by kaito on topic responsive images for mobiles

Hi Nicolas:

following your suggestion, I have just bougth swipebox plugin from your marketplace, installed and published, selected as popup type in Hikashop display, but image thumbnails still don´t fit in mobile size.

Please, any help with this isssue?

Thanks in advance,

Ricardo

Please Log in or Create an account to join the conversation.

nicolas
Offline

5 years 4 months ago #333649 by nicolas

Replied by nicolas on topic responsive images for mobiles

Hi,

I've read the whole thread, and I can see Philippe had missed that you were talking about the variant thumbnails in "list" display mode in your first message.
I thought it was about the normal thumbnails display system on the product page.
So I checked the situation there and there is indeed a problem there.
Edit the file show_block_characteristic via the menu Display>Views and change the line:

Code:

echo $this->image->display($image->file_path, true, $image->file_name, 'style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"', '', $width, $height);

by the code:

Code:

if($this->image->override) {
						echo $this->image->display(@$image->file_path, true, @$image->file_name, 'style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','', $width, $height);
					} else {
						if(empty($this->popup))
							$this->popup = hikashop_get('helper.popup');
						$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
						$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
						if(@$img->success) {
							$attributes = 'style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"';
							if($img->external && $img->req_width && $img->req_height)
								$attributes .= ' width="'.$img->req_width.'" height="'.$img->req_height.'"';
							$html = '<img '.$attributes.' title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
							if($this->config->get('add_webp_images', 1) && function_exists('imagewebp') && !empty($img->webpurl)) {
								$html = '
								<picture>
									<source srcset="'.$img->webpurl.'" type="image/webp">
									<source srcset="'.$img->url.'" type="image/'.$img->ext.'">
									'.$html.'
								</picture>
								';
							}

							echo $this->popup->image($html, $img->origin_url, null, 'title="'.$this->escape(@$image->file_description).'"');
						}
					}

Then, it will work. We'll add that change on our end for the next version of HikaShop.

Please Log in or Create an account to join the conversation.

kaito
Topic Author
Offline

5 years 4 months ago #333672 by kaito

Replied by kaito on topic responsive images for mobiles

Hi Nicolas:

The line you want to modify in the file show_block_characteristic.php does not exist (I have attached the php file as txt).

I have Hika starter 4.4.3 version.

Waiting for yor indications.

Kind regards,

Ricardo

This attachment is hidden for guests.
Please log in or register to see it.

Please Log in or Create an account to join the conversation.

nicolas
Offline

5 years 4 months ago #333688 by nicolas

Replied by nicolas on topic responsive images for mobiles

Hi,

You say that the line does not exist there but I can see it in the file you attached in your message:
i.imgur.com/qLUktQZ.png

Please Log in or Create an account to join the conversation.

kaito
Topic Author
Offline

5 years 4 months ago - 5 years 4 months ago #333703 by kaito

Replied by kaito on topic responsive images for mobiles

Hi Nicolas:

Oh my God !!! I must be asleep!!!

Changed the code and it works !!

Thanks Nicolas.

Last edit: 5 years 4 months ago by kaito.

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

Time to create page: 0.262 seconds