Как увеличить размер изображения товара в виде сетки в Opencart? - PullRequest
Новая
       6

Как увеличить размер изображения товара в виде сетки в Opencart?

2 голосов
/ 28 января 2020

Я не могу увеличить размер изображения вида сетки. Хотя я увеличил размер изображения в виде списка, перейдя в Admin-> Extensions-> Extensions-> Themes и тем самым отредактировав тему хранилища по умолчанию. Здесь я могу редактировать размер списка изображений товаров. Но здесь нет упоминания о размере сетки изображения продукта.

Я не знаю, где редактировать размер сетки изображения продукта. Размер списка был увеличен, но бесполезен, потому что, когда кто-то открывает продукт, по умолчанию используется вид сетки, который не увеличивается. Хотя размер списка увеличен, но кто-то не может видеть увеличенное изображение, если не щелкнуть размер списка, потому что при открытии продукта по умолчанию используется вид сетки.

Как увеличить размер изображения в виде сетки? Я использую тему по умолчанию с O C 3.0.2.0.

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Обратите внимание, что есть свойство CSS (из bootstrap), которое не позволяет изображениям быть больше, чем поле продукта: max-width: 100%;

Поле продукта в виде сетки имеет некоторый класс col, подобный этому: 

<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">

Вы можете удалить эти классы из файла ветки, например так: 

<div class="product-layout product-grid">

Или вы можете добавить этот CSS код: 

.product-grid {
  width: auto;
  float: none;
  clear: none;
}

В нижней части stylesheet.css, чтобы переопределить ширину столбца bootstrap: 

catalog/view/theme/default/stylesheet/stylesheet.css

Тогда вам может потребоваться очистить кеши тем и браузер, чтобы увидеть изменения.

0 голосов
/ 28 января 2020

Хорошо, но открытая корзина не предоставляет никаких других настроек изображения.

Вы можете узнать это, посмотрев в свой файл stylesheet.css, и, возможно, найти различные настройки макета для product-list и product-grid Разделы.

Затем можно добавить минимальную или максимальную высоту / ширину или затем «фиксированный» высота / ширина размер изображения Значения для отдельных разделов в нужных местах, чтобы узнать, работает ли он. Тем не менее, реагирующая функция может по-прежнему изменять размеры изображений до меньшего значения, если минимальное значение не было установлено, но не до большего значения, и только, если разрешение экрана становится меньше.

Это все, что я могу сделайте для вас, и время, потраченное на это, зависит только от того, насколько сложным работал Theme Coder. И в зависимости от того, как это было закодировано, это также может оказаться невозможным без фундаментального переписывания соответствующих разделов. Не забудьте сначала сделать резервную копию таблицы стилей! Но не волнуйтесь, вы ничего не можете испортить. И убедитесь, что всегда сначала СБРОСИТЕ все свои системы кэширования, а также кэш браузера, прежде чем проверять результаты.

Пример такого раздела таблицы стилей: 

/* product list */
.product-thumb {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    overflow: auto;
}
.product-thumb .image {
    text-align: center;
    margin: 10px;
}

.product-thumb .image a:hover {
    opacity: 0.8;
}
.product-thumb .image img {
    margin-left: auto;
    margin-right: auto;
}
.product-grid .product-thumb .image {
    float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
    float: left;
    padding: 0 15px;
}
}
.product-thumb h4 {
    font-weight: bold;
}
.product-thumb .caption {
    padding: 0 20px;
    min-height: 60px;
}
.product-list .product-thumb .caption {
    margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
    min-height: 210px;
    padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
    min-height: 0;
    margin-left: 0;
    padding: 0 10px;
}
.product-grid .product-thumb .caption {
    min-height: 0;
}
}
...