Проблема с изображениями на мобильной версии

seo-cs-cart
SEO CS-Cart. Как продвигать интернет магазин. Чек-лист внутренней оптимизации сайта
24.09.2016
Протокол SSL/TLS/HTTPS в CS-Cart
01.11.2016

Проблема с изображениями на мобильной версии

product-image-mobile-issue

Если у Вас в настройке "Ширина иконки на детальной странице товара" (верхнее меню панели администрирования > Настройки > Иконки) задано значение больше ширины размеров экрана мобильного устройства, то на данном устройстве Вы столкнетесь с тем, что изображение будет выходить за область видимости экрана:

Данная проблема может также появиться и на списке товаров при просмотре на Desktop версии сайта:


Для решения данной проблемы необходимо заменить файл image.tpl (рекомендуем сделать это с помощью создания нового модуля) и заменить в этом файле строку 23:

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

На следующий код:

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

После этого изображение будет подстраивать под размеры устройства и не будет выходить за область видимости.

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

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

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