• Страница 2 из 2
  • «
  • 1
  • 2
Модератор форума: Shеriff, Yuri_G  
Сломалось отображение загрузчика фото в Интернет-магазине
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 1 | 17:09:16
В модуле Интернет-магазин были обновлены стили загрузчика изображений и для фото добавлены поля ALT и TITLE и добавлена поддержка WebP формата фото

Если на вашем сайте еще не работает прикрепление фото формата WebP и вы платите тариф для модуля магазин, оформите запрос в техподдержку с панели управления сайтом, мы перенесем ваш сайт на другой сервер где уже есть поддержка этого формата.

Если случилось так, что после выполнения рекомендаций ниже у вас отображение фото на странице редактирования товара не исправило проблему, оформите пожалуйста запрос в техподдержку с панели управления сайтом раздел Помощь. Сотрудник поддержки посмотрит ваш сайт и поможет исправить проблему.

Как исправить проблему с визуальным смещением блока с загрузчиком фото и некорректным отображением?

Перейти в таблицу стилей CSS магазина:



Далее найти такие стили:
Код
img.basket { cursor:pointer }
#image-list { width:100%; position:relative; margin-top:10px; }
#image-list .belt { position:absolute; left:0; top:0 }
#image-list .panel { margin:0; float:left; overflow:hidden; }
#image-list .inner { position:relative; margin:4px; border:#999 1px solid }
#image-list .inner div { position:absolute; width:16px; height:16px; cursor:pointer; top:4px; overflow:hidden; }
#image-list .inner div.edt { right:24px; background:transparent url(/.s/img/icon/edt.png) no-repeat 0 0;}
#image-list .inner div.del { right:2px; background:transparent url(/.s/img/icon/del.png) no-repeat 0 0; }
#image-list .inner input { margin-top:-100px; margin-left:-550px; -moz-opacity:0; filter: alpha(opacity=0); opacity:0; font-size:200px; height:250px; cursor:pointer; }
#image-list .inner span#add_img { cursor: pointer; display: block; width: 160px; height: 160px; position: absolute; left: 0; top: 0; }
#image-list .wait { background:url(/.s/img/wd/1/ajax.gif) no-repeat center center; }
#image-list #gimage-wrap input{max-width: none; position: absolute; top: 0; right: 0; margin: 0;}
#image-list #gimage-add input{max-width: none; position: absolute; top: 0; right: 0; margin: 0;}
.sel-gimage { background-color:blue;}
Замените их на новые:
Код
img.basket, .fa-pointer { cursor: pointer }
#image-list { width: 100%; position: relative; margin-top: 10px }
#image-list .belt { display: flex; flex-direction: column; gap: 1em; }
#image-list .panel { margin: 0; overflow: hidden; width:inherit;height:inherit;}
#image-list .inner { position: relative; overflow: hidden; padding:0; }
#image-list .img-controls { position: absolute; top:.5em; right:.5em; display:flex; gap:.5em; }
#image-list .img-controls > div { width: 16px; height: 16px; cursor: pointer; top: 4px; overflow: hidden }
#image-list .img-controls .edt { background: transparent url(/.s/img/icon/edt.png) no-repeat 0 0 }
#image-list .img-controls .del { background: transparent url(/.s/img/icon/del.png) no-repeat 0 0 }
#image-list .img-controls .at-edit { background: transparent url(/.s/img/icon/sg.png) no-repeat 0 0 }
#image-list .inner input { opacity: 0; cursor: pointer; max-width: 100%; box-sizing: border-box; max-height: 100%; }
#image-list #gimage-add.wait { background: url('/.s/img/wait.svg') no-repeat center center; }
#image-list #gimage-add.wait p { display: none; }
#image-list #gimage-add .inner { border: #999 2px dashed; text-align:center; height:3.5rem; background: #9992; display: flex; align-items: center; justify-content: center; }
#image-list #gimage-add .inner p { line-height:1.5em; }
#image-list #gimage-add .add-image-label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }
#image-list #gimage-add .add-image-label input { width: 100%; height: 0; padding: 0; margin:0; min-height:unset; }
#image-list #gimage-add .add-image-label span#add_img { height: inherit; display: block; }
#image-list #gimage-wrap { display:flex; flex-wrap:wrap; line-height:0; gap:1em; }
.sel-gimage img { border:2px solid blue; box-sizing:border-box; }
#image-list #gimage-wrap .inner div.image-alt-title-wrapper { position: absolute; bottom:0; top:auto; left:0; right:0; width:auto; display:flex; flex-direction:column; gap:.5em; box-sizing:border-box; height:4.5em; transition:height .5s ease-in-out; overflow:hidden; margin:0 .5em .5em; cursor:initial; }
#image-list #gimage-wrap .inner div.image-alt-title-wrapper.u-hidden { height:0; }
#image-list #gimage-wrap .inner div.image-alt-title-wrapper input { color:#959090; width:100%; position:unset; box-sizing:border-box; cursor:initial; opacity:1; height:2em; font-size:inherit; padding:0 .5em; line-height:2em; margin:0; min-height:unset; background:#fffc; /*background:#8888;*/ }

Это исправит проблему с отображением, после увидите новое отображение загрузчика изображений:


Прикрепления: 0285813.jpg (33.6 Kb) · 0192168.jpg (40.5 Kb)

bohdan_zacheshyhryva
Сообщений: 108
Репутация: 9

Сообщение # 16 | 13:02:25
Gena_, Уточните, пожалуйста, проблему более детально.
Ники3736
Репутация: 0

Сообщение # 17 | 12:52:02
Ну и если у меня на сайте в CSS магазина вообще таких строчек нет, чего менять???
Yuri_G
uWeb support
uVip manager
Сообщений: 4336
Репутация: 943

Сообщение # 18 | 17:41:40
Ники3736, Для такого случая в шапке темы написано, если вы не можете справиться сами формируем запрос в техподдержку и вам помогут исправить все по запросу с админки сайта.

Gena_
Сообщений: 37
Репутация: 32

Сообщение # 19 | 11:35:25
Цитата bohdan_zacheshyhryva ()
Gena_, Уточните, пожалуйста, проблему более детально.

Сервер s103 до сих пор не загружает, выдает ошибку - формат не поддерживается.
Сообщение отредактировал Gena_ - Пятница, 24 Мар 2023, 11:36:37
vyacheslav_o
Сообщений: 581
Репутация: 21

Сообщение # 20 | 21:44:42
Gena_, по вашей проблеме создайте обращение с панели управления вашего сайта, верхний бар, вкладка "Помощь" - "Служба поддержки"
SIRCAM
Репутация: 0

Сообщение # 21 | 01:21:21
After moving my website to a new server now is loading more slow than before. Wonder if this is normal?
In the other hand while the uploader accept Webp files acutally the files are not changing from JPG to Webp, even if i upload a new product with a Webp file the file change to JPG.

I created a new appeal to the technical support service to see if returning my website to its original server at least it will run like before.
poznyur
Сообщений: 91
Репутация: 9

Сообщение # 22 | 08:32:21
SIRCAM, the answer was provided to you as part of the created support case in the control panel, please check.
SIRCAM
Репутация: 0

Сообщение # 23 | 10:43:51
poznyur , thank you so much,  notification received.

UPDATE:  website is finally loading fast in the new server and all errors are gone, now i will wait for the WebP format be included in the new server to start replacing all JPG images from the store products.
svierdez
Сообщений: 3
Репутация: 0

Сообщение # 24 | 09:49:30
добрый день, не нашёл где написать. что по 104 серверу, когда примерно планируется введение WebP? спасибо.

Здравствуйте, на связи Алекс.
ilia_halupko
Сообщений: 232
Репутация: 26

Сообщение # 25 | 10:42:56
svierdez, как только мы получим дополнительную информацию про ввдение формата WebP на сервере s104, мы уведомим вас в данной теме. Вы можете создать обращение в службу технической поддержки через панель управления, с просьбой перенести ваш сайт на сервер, где поддерживается данный формат изображений.

uCoz Team
mina76
Сообщений: 31
Репутация: 0

Сообщение # 26 | 13:40:12
Здравствуйте, подскажите, а в остальные модули, в частности в фотоальбомы и блог, не планируете добавить возможность добавления фото в webp?
poznyur
Сообщений: 91
Репутация: 9

Сообщение # 27 | 07:39:35
mina76, Возможность добавлять изображения в формате .webp так же реализована и в других модулях. При условии, что на вашем сервере это обновление установлено.
Вы можете легко проверить это, просто добавив любое тестовое изображение в формате .webp в указанные вами модули.
  • Страница 2 из 2
  • «
  • 1
  • 2
Поиск: