Обрезанные миниатюры фото товара в каталоге
Добавить ответ
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Добавьте в блок upstore.user_css код:
.file-list-thumbs-v2 .product-card .product-card-media { height: 250px; } @media (min-width: 568px) { .file-list-thumbs-v2 .product-card .product-card-media { height: 650px; } } @media (min-width: 1024px) { .file-list-thumbs-v2 .product-card .product-card-media { height: 420px; } }Где этот файл находится? Еще в другой ветке про него же спрашивал.
Это не файл, это блок.
Его нужно создать самостоятельно в приложении Сайт –> блоки.
Добавил, но изменений не заметил. Как-то надо его применить?
Забыл, что у вас тема с другим id используется.
Переименуйте блок в upstore1_bakcup.user_css
Когда будете переходить на оригинальную версию, переименуете обратно.
Да, теперь применяется.
Скажите, можно ли как-то указать, чтобы изображение обрезалось по верхнему краю, сейчас по центру видимо, обрезает и сверху и снизу, и если сверху нормально получается (есть в запасе пустое место в оригинале фотки), то снизу торчит обрезанный логотип.
Туда же, в блок, добавьте код:
.file-list-thumbs-v2 .product-card .product-card-media .uk-cover { top: 100%; -webkit-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); transform: translate(-50%, -100%); }Теперь от нижнего края берёт фотку. А как сделать наоборот, чтобы от верхнего?
Вы просили обрезать сверху.
Чтобы обрезать снизу:
.file-list-thumbs-v2 .product-card .product-card-media .uk-cover { top: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }Спасибо, то, что нужно.
А на главной странице в блоках выбор редакции и лучшие предложения этот css не применяется. Там селектор надо добавить?
Применился. Не вижу различий на главной и в категории.
Вот на главной в блоке лучшие предложения:
Тут видимо другой стиль, не тот, что на странице категории товара, там всё четко.
Нет. Там всё идентично.
Точно так же как и в категориях, стиль применяется к товарам и на главной странице.
Единственное отличие в том, что карточек товаров в категориях 3, а на главной странице 4. Получается что ширина и высота карточек разная.
Попробуйте добавить этот стиль:
.home-lists .file-list-thumbs-v2 .product-card .product-card-media .uk-cover{ top:-25px; }Не пойму почему именно на главной в блоке "Выбор редакции" корректно обрезается снизу, а в блоке "Лучшие предложения" остаётся торчать логотип. И там, и там по 4 фото в ряду.
Там немного разная сетка по ширине получилась.
В теме для шопа найдите файлы:
list-thumbs.html и list-thumbs.v2.html
В них найдите фрагменты:
И замените на:
В будущую тему фикс внёс.
Размер вот этих миниатюр, можно так же отредактировать размер превью слева от основной фотографии?
К сожалению, нельзя сделать чтобы они не обрезались потому что тогда возникнут проблемы с позиционированием этих миниатюр.
А если размер миниатюры увеличить по вертикали, чтобы не квадратные были а прямоугольные?
Придрался у нас заказчик к этим обрезаным головам.
В файле product.gallery.html замените
<div class="pointer thumb uk-overflow-hidden height-150"> {$wa->shop->imgHtml($image, '150x150', ['style'=>'width:150px;'])} </div>На:
<div class="pointer thumb uk-overflow-hidden"> {$wa->shop->imgHtml($image, '150x0', ['style'=>'width:150px;'])} </div>Спасибо ,отлично.
А как поправить высоту миниатюры для видео? Чтобы так же не обрезалось, как и у фоток сейчас.