responsive images for mobiles

  • Posts: 19
  • Thank you received: 1
2 years 10 months ago #333556

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

Attachments:

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

  • Posts: 4548
  • Thank you received: 613
  • MODERATOR
2 years 10 months ago #333558

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.

  • Posts: 19
  • Thank you received: 1
2 years 10 months ago #333585

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.

  • Posts: 4548
  • Thank you received: 613
  • MODERATOR
2 years 10 months ago #333587

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: 2 years 10 months ago by Philip.

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

  • Posts: 19
  • Thank you received: 1
2 years 10 months ago #333593

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

Attachments:

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

  • Posts: 4548
  • Thank you received: 613
  • MODERATOR
2 years 10 months ago #333594

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: 2 years 10 months ago by Philip.

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

  • Posts: 19
  • Thank you received: 1
2 years 10 months ago #333620

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

Attachments:

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

  • Posts: 81662
  • Thank you received: 13092
  • MODERATOR
2 years 10 months ago #333634

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.

  • Posts: 19
  • Thank you received: 1
2 years 10 months ago #333646

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.

  • Posts: 81662
  • Thank you received: 13092
  • MODERATOR
2 years 10 months ago #333649

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:

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

  • Posts: 19
  • Thank you received: 1
2 years 10 months ago #333672

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

File Attachment:

File Name: show_block...stic.txt
File Size:29 KB

Attachments:

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

  • Posts: 81662
  • Thank you received: 13092
  • MODERATOR
2 years 10 months ago #333688

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.

  • Posts: 19
  • Thank you received: 1
2 years 10 months ago #333703

Hi Nicolas:

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

Changed the code and it works !!

Thanks Nicolas.

Last edit: 2 years 10 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.084 seconds
Powered by Kunena Forum