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

Проблема с миниатюрами

Mixon14

Форумчанин
страшное - в конечном результате.

Я может быть оказался непонятым. Но, конечный результат - это фото товара с непропорциональными размерами, которое полностью отображено на странице каталога без обрезанных краёв. Также, как если бы изначально это было фото с нужными параметрами.
В данном случае речь, о квадратных фотках, но также относится и к прямоугольным (в зависимости от того, кто какие размеры в каталоге использует.

Ну, да ладно...
 

tuxfighter

Гуру
Местный
это говорит о том, что то фото нужно предварительно подготавливать, что бы он отображались хорошо.....
а не как у нас сейчас принято: сфотал на мобильник, переслал по ватцапу, а потом удивляемся, что фотки плоха выглядят....
 

Mixon14

Форумчанин
это говорит о том, что то фото нужно предварительно подготавливать, что бы он отображались хорошо.....
а не как у нас сейчас принято: сфотал на мобильник, переслал по ватцапу, а потом удивляемся, что фотки плоха выглядят....


Человеческая лень - двигатель прогресса). А вообще, суть вопроса в том, что меня, например, устраивает, когда прямоугольное фото в лайтбоксе открывается на весь экран. Но хочется, чтобы в каталоге это же фото было квадратным без обрезки.
 

MishaKov

Новичок
Mixon14 полностью с тобой согласен, woocommerce классный плагин но с настройкой изображений, тоже все бьюсь и ни как не могу победить такую же проблему, и причем дополнительхых отдельных плагинов тоже не могу найти, также не хватает возможности для разных категорий разные размеры изображений, например в одной категории у подкатегорий изображения были одного размера (например 50*50) а в другой категории (например 150*150)
Но надеюсь что это когда нибудь решиться, очень надеюсь))
 

tuxfighter

Гуру
Местный
также не хватает возможности для разных категорий разные размеры изображений, например в одной категории у подкатегорий изображения были одного размера (например 50*50) а в другой категории (например 150*150)
Но надеюсь что это когда нибудь решиться, очень надеюсь))
Вы уже не первый раз это упоминаете.
Так, как вы первый у кого возникло такое желание, то и решать вам ее предстоит самостоятельно......
изучайте. И да, как у вас с php?
 

freet

Новичок
Если отключить жётскую обрезку, то в каталоге товаров картинки будут не по сетке (квадратными), а в оригинальных пропорциях. Это смотрится некрасиво.

Я хочу так:

Например, у меня для страницы магазина заданы размеры фото 400х400. Если загружать фото 500х600, то лишние 100px будут обрезаны под квадрат.
Например, в фото-редакторе, которым я сейчас пользуюсь, чтоб сделать фото квадратным, есть опция smart filling, т.е. делая фото квадратным, оно не обрезается, а просто заполняется фон под нужную пропорцию (в данном случае под квадрат).
Вот я и хочу, чтобы не редактировать каждое фото для заглавного изображения под квадратные размеры, узнать, можно ли что-то активировать, чтобы изображение просто подгонялось под 400х400 не в обрезанном виде, а целиком. Соответственно, чтобы просто по центру вставало.

Вот вам пример: http://mehano.ru/catalog/startovye_nabory

Видно, что прямоугольные фото вмещаются в квадратные размеры, а лишнее пространство просто заполнено белым фоном.

Я не специалист, но предполагаю, что это не очень сложно технически сделать. Только не знаю как.

Присоединяюсь к вопросу автора. Как сделать что-бы картинка поместилась целиком в квадрат (или прямоугольник) ?
Что-бы была отцентрирована по вертикали (если горизонтальная) либо по горизонтали (если вертикальная).
Что-бы справа-слева (или сверху-снизу) поля были заполнены белым цветом.

У Woocommerce есть 100/500 расширений. У Wordpress - 1 млн. плагинов. Может существует решение ?
 

freet

Новичок
Но если картинок огромное кол-во. Не ужели все картинки необходимо редактировать вручную ?
И не ужели нету автоматизированных решений на программном уровне.
Я как то в свое время увлекался VBA for Application. И решал подобную проблему с картинками в прайс-листах Excel.
Решение было найдено такое - я скрестил VBA for CorelDraw и VBA Excel. Написал код который берет картинки из папки, доводит их до нужных пропорций по разным алгоритмам в зависимости от размеров картинки и вставляет картинки в таблицу прайс-листа.

Я не знаю PHP, но предполагаю, что у него есть функции работы с изображениями. Впрочем, может для такой задачи у него функций и нету.
 

tuxfighter

Гуру
Местный
Но если картинок огромное кол-во. Не ужели все картинки необходимо редактировать вручную ?

Если вы хотите получить отличный результат - да. Я часто даже те миниатюры, которые движок создает, переделываю.
И не ужели нету автоматизированных решений на программном уровне.
Я как то в свое время увлекался VBA for Application. И решал подобную проблему с картинками в прайс-листах Excel.
Еслиб и было такое решение, то я бы им не пользовался и ни кому не советовал
 

freet

Новичок
Согласен на счет качества. Я даже выставил пропорции миниатюр 0x0 в настройках Медиа, чтобы Wordpress не трогал оригиналы.
 

ali

Форумчанин
Нате. Придется немного повозитсья с установкой, инструкция внутри.

Рекомендую использовать с EWWW Image Optimizator. В этом случае для установки потребуется только пункт 2 из инструкции.

В настройках появляется пункт, там разберетесь уже.
 

Вложения

  • enhanced-thumbnail-generation.zip
    14.8 KB · Просмотры: 28

ali

Форумчанин
Проблема действительно серьезная. Ладно если картинки заносятся вручную, а если поступают при импорте из 1С. Решеине сильно усложняется. На мой взгляд это очевидный и важный недостаток Wordpress, не понимаю почему его игнорят разрабы.

Кстати, пробовали разместить плагин в репозитории Вордпресс, получили отказ, мол слишком маленький функционал. Вот такая приколюха.
 
Последнее редактирование:

ali

Форумчанин
Обновленная версия, исправление ошибок, связанных с обновлением WooCommerce
 

Вложения

  • enhanced-thumbnail-generation.zip
    15.5 KB · Просмотры: 40

agrotrade

Новичок
Нашел более менее компромиссное решение (правда под шаблоном WoodMart, но принцип должен быть ясен).
Прописываем:
.product-element-top {
padding: 50%;
}

img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Это уменьшает и ставит в середину (добавляя отступы сверху и снизу) широкие картинки (не помещающиеся в квадрат). Высокие картинки, немного обрезает(. Но их у меня почти нет.

Да, если нужен фон (вместо рамки), обозначающий квадрат - делаем псевдокласс (к примеру):

.product-element-top>a::before {
  1. content: '';
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. right: 0;
  6. bottom: 0;
  7. background-color: rgba(0,0,0,0.09);
  8. z-index: 1;
}
 
Последнее редактирование:

Chuvak

Форумчанин
Результат небольшого эксперимента.
Вот примеры на основе стандартной темы с включенной обрезкой и выключенной для каталога товаров.

Посмотреть вложение 613 Посмотреть вложение 614

Все установленные в настройках WC размеры для картинок имеют квадратные пропорции, но разные размеры.
При этом размеры картинки в настройках WC для страниц товаров стоит - 600x600, но в реале получаются всегда шириной 300, то есть так как указано в настройках для медиафайлов в самой WP.

Ниже страница товара с выключенной и включенной обрезкой.

Посмотреть вложение 615 Посмотреть вложение 616

Во всех случаях после каждого изменения, картинки перегенерировались заново.
А как Вы отключили обрезание миниатюр? У меня нет вкладки "WooCommerce - Настройки - Настройки изображений. ". Можно узнать ее точное расположение?
 

Chuvak

Форумчанин
Придумал как оставить изображение не больше определенного. А по ширене оно не будет шире колонки. Вот так:
.woocommerce-loop-product__link img {
width: auto !important;
max-height: 200px !important;
}
 
Сверху Снизу