Problem with images in mobile version

How to promote the e-shop based on CS-Cart. SEO checklist
28.09.2016
cs-cart-ssl-tls-https
SSL/TLS/HTTPS protocol in CS-Cart
01.11.2016

Problem with images in mobile version

product-image-mobile-issue

If in your settings of “ Width of icon on product details page” (Top menu in administration panel>Settings>Icons) the value is set up more than width of mobile device screen,

This problem can be appeared on product list page also:

For solving this problem it’s necessary to replace file image.tpl (we recommend to do it with the help of new module creation) and replace line 23 in this file:
<img class="ty-pict {$valign} {$class} {if $lazy_load}lazyOwl{/if} {if $generate_image}ty-spinner{/if} cm-image" {if $obj_id && !$no_ids}id="det_img_{$obj_id}"{/if} {if $generate_image}data-ca-image-path="{$image_data.image_path}"{/if} {if $lazy_load}data-{/if}src="{if $generate_image}{$images_dir}/icons/spacer.gif{else}{$image_data.image_path}{/if}" alt="{$image_data.alt}" title="{$image_data.alt}" {if $image_onclick}onclick="{$image_onclick}"{/if}  {if $image_width || $image_height}style="min-width: {$image_data.width}px; min-height: {$image_data.height}px; "{/if} />

On the following code:

<img class="ty-pict {$valign} {$class} {if $lazy_load}lazyOwl{/if} {if $generate_image}ty-spinner{/if} cm-image" {if $obj_id && !$no_ids}id="det_img_{$obj_id}"{/if} {if $generate_image}data-ca-image-path="{$image_data.image_path}"{/if} {if $lazy_load}data-{/if}src="{if $generate_image}{$images_dir}/icons/spacer.gif{else}{$image_data.image_path}{/if}" alt="{$image_data.alt}" title="{$image_data.alt}" {if $image_onclick}onclick="{$image_onclick}"{/if} />

After this the image will adjust to the sizes of device and won’t be out of screen visibility.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>