• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Как добиться одного формата миниатюры товара

Image CMS
#1
Знаю, что про это много раз спрашивали на форуме, но толкового ответа так и не нашел.
Как привести миниатюру товара к одному формату? Необходима чтобы товар на миниатюре полностью помещался, независимо от соотношений сторон картинки. Только не говорите, пожалуйста "фотошоп в помощь". Как Сейчас все выглядит 1.jpg

Настройки отображения 2.jpg
 

ArtemZhyg

Форумчанин
#2
Знаю, что про это много раз спрашивали на форуме, но толкового ответа так и не нашел.
Как привести миниатюру товара к одному формату? Необходима чтобы товар на миниатюре полностью помещался, независимо от соотношений сторон картинки. Только не говорите, пожалуйста "фотошоп в помощь". Как Сейчас все выглядит Посмотреть вложение 1505

Настройки отображения Посмотреть вложение 1506
Отпишите если нашли решение
 
#3
Отпишите если нашли решение
Решение найдено, оказалось все просто. Нужно добавить код в style.css.
Значит в класс самой картинке товара добавил
Код:
    .product-image .front-image img {
width: auto!important;
    min-width: 0px;
    margin: auto;
    max-height: 250px;
    display: inline-block;
    vertical-align: middle;}
В родительский класс добавил
Код:
.product-image .front-image {
    height: 250px;
    display: table-cell;
    width: 250px;
    vertical-align: middle;
    text-align: center;}
width и height можете свои задать. Если что-то не получилось - просто дайте мне адрес вашего сайта и я скажу куда и что добавить.
 

ArtemZhyg

Форумчанин
#4
Решение найдено, оказалось все просто. Нужно добавить код в style.css.
Значит в класс самой картинке товара добавил
Код:
    .product-image .front-image img {
width: auto!important;
    min-width: 0px;
    margin: auto;
    max-height: 250px;
    display: inline-block;
    vertical-align: middle;}
В родительский класс добавил
Код:
.product-image .front-image {
    height: 250px;
    display: table-cell;
    width: 250px;
    vertical-align: middle;
    text-align: center;}
width и height можете свои задать. Если что-то не получилось - просто дайте мне адрес вашего сайта и я скажу куда и что добавить.
не могу найти куда добавить http://geekbull.com.ua
 
#7
Уберите в настройках, галочки жесткая обрезка.
В конец файла хранящегося по адресу http://geekbull.com.ua/wp-content/themes/modality/style.css добавте код
Код:
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
    box-shadow: none;
    background-color: #ffffff;
    width: auto!important;
    min-width: 0px;
    margin: auto;
    max-height: 250px;
    display: inline-block;
    vertical-align: middle;}
В конец файла хранящегося по адресу http://geekbull.com.ua/wp-content/plugins/woocommerce/assets/css/woocommerce.css добавте код
Код:
.woocommerce ul.products li.product a {
    height: 250px;
    display: table-cell;
    width: 250px;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;}
Скачайте плагин Regenerate Thumbail, установите и активируйте. С помощью плагина регенерируйте миниатюры.
 

ArtemZhyg

Форумчанин
#8
В конец файла хранящегося по адресу http://geekbull.com.ua/wp-content/plugins/woocommerce/assets/css/woocommerce.css добавте код
.woocommerce ul.products li.product a {
height: 250px;
display: table-cell;
width: 250px;
vertical-align: middle;
text-align: center;
text-decoration: none;}
Не помогло, после вставки 2го кода вот что случилось
 

Вложения

#9
Не помогло, после вставки 2го кода вот что случилось
Хорошо, тогда второй код не добавляем, а все остальное оставляем. Зашел на ваш сайт , посмотрел на скрин. Понимаю проблема решена? Картинки вписались в бокс. Или нет? Тогда опишите подробнее, что еще меняем.
 

ArtemZhyg

Форумчанин
#10
Хорошо, тогда второй код не добавляем, а все остальное оставляем. Зашел на ваш сайт , посмотрел на скрин. Понимаю проблема решена? Картинки вписались в бокс. Или нет? Тогда опишите подробнее, что еще меняем.
С картинками у меня было все нормально, проблема в том что из-за разного количества строк названия товара плитки товара разные. После вставки кода и использования плагина ниичего не изменилось. Мне нужно чтобы размер плитки товара не зависил от количества строк названия товара.
Я уже прошерстил весь инет и не нашел внятного ответа.
 

searchingman

Гуру
Местный
#11
С картинками у меня было все нормально, проблема в том что из-за разного количества строк названия товара плитки товара разные. После вставки кода и использования плагина ниичего не изменилось. Мне нужно чтобы размер плитки товара не зависил от количества строк названия товара.
Я уже прошерстил весь инет и не нашел внятного ответа.
Обсуждалось и приводились примеры как сделать одинаковый размер не зависящий от количества строк названия товара.
 

rikitiki

Специалист
Местный
#12
Мне нужно чтобы размер плитки товара не зависил от количества строк названия товара.
Я уже прошерстил весь инет и не нашел внятного ответа.
Не получится, так как только от длины заголовков зависит высота блоков.
Можно сделать фиксированную высоту блока, но тогда под короткими заголовками будут пробелы, а длинные заголовки будут неприятно обрезаться.
Гляньте в моём блоге на компромиссное решение: http://innka.info/shirokoformatnaya-vitrina-woocommerce/
 
Сверху Снизу