Woocommerce, показывающий изображения, расплывчатые на странице описания

Я делаю использование веб-сайта Электронной коммерции плагин Woocommerce. Большинство вещей, хорошо работающих с немного, изменяется. Но я сталкиваюсь с проблемой относительно изображений. Я загрузил изображение для известного изображения, которое покажут в галерее продукта, которая показывает хороший, но когда я иду в описание продукта только путем нажатия на образ товара, это показывает изображение с расплывчатым. Для знания причины, я гуглю, и я получил некоторое решение на этой странице. Но я не понимаю решения. Как работать с ним. Здесь с я присоединяю свой выстрел scrren для категории продуктов, снимка экрана изображения описания продукта и настроек для изображений в сменных настройках. Любая справка и предложения очень приветствуются для этого вопроса.

Изображение категории продуктов

enter image description here

Изображение описания продукта

enter image description here

Настройки изображения от woocommerce плагина

enter image description here

0
20.10.2012, 10:43
5 ответов

Ваш образ товара как показано в снимке экрана имеет различные размеры. Необходимо установить Размеры изображения Единого продукта на 225 пкс и затем повторно создать миниатюры с помощью этого плагина: http://wordpress.org/extend/plugins/regenerate-thumbnails/

1
19.02.2020, 23:42
  • 1
    благодарит за ответ, но я сделал тот процесс, но тем не менее я не получаю это. –  user159377 20.10.2012, 11:10
  • 2
    Таким образом, Вы изменили настройки изображения Единого продукта на 225 пкс? В Вашем снимке экрана настроек это "200 пкс шириной" и высота, в то время как Ваш снимок экрана продукта составляет 225 пкс. Вот в чем разница, которое делает Ваше изображение расплывчатым. –  Pieter 20.10.2012, 11:22

ширина изображения в Вашем снимке экрана (расплывчатый) определяется в woocommerce.css как ширина: 100%, которые могли бы привести к протяжению. Можно перезаписать это в style.css путем определения: div.product div.images img, #content div.product div.images img {ширина: 200 пкс! важный;}

0
19.02.2020, 23:42
  • 1
    благодарит за ответ, но я уже определил ширину, но изображение снова размыто как он прежде. –  user159377 20.10.2012, 19:04
  • 2
    сделал Вы определяете ширину в своей CSS и добавили! важный для объявления стиля? Ширина в бэкенде не оказывает влияния на CSS. –  mirage 20.10.2012, 19:56

Это - хорошо зарегистрированная проблема с WooCommerce и существует несколько работ о том, как разрешить его. Я перечислил два, что я нашел самым полезным мне.

Документация WooCommerce

Парни дизайна

Можно также переопределить объявление 100% шириной в файле WooCommerce css путем добавления следующего к таблице стилей темы:

div.product div.images img, #content div.product div.images img {
    width: auto ! important;
}
1
19.02.2020, 23:42
  • 1
    Добавленное простое переопределение CSS width: 100%; –  Steve 20.11.2012, 20:10

Я нашел окольный путь, который работает на меня, даже при том, что Это - немного дополнительной работы.

Отправьте свой новый продукт, как Вы были бы, затем когда Вы сделаны, просматривают его на Вашем блоге Wordpress. Щелкните правой кнопкой по основной фотографии и нажмите, осматривают элемент. Нависните над выделенным текстом и узнайте ширину и высоту (первые числа, не те в круглой скобке) и путь загрузки (например: www.yourwebsite.com/blog/wp-content-uploads/yourfilenames).

Войдите в свое фото программное обеспечение редактирования и измените размер своей фотографии для соответствия размерам, затем повторно загружают файлы на тот же путь и перезаписывают его. Я использую плагин, добавляют с сервера для ручной загрузки моих файлов, таким образом, я просто вошел в папку от своего клиента ftp. Я делаю это для каждой расплывчатой фотографии на моем блоге WooCommerce.

После многих попыток я нашел, что это является самым легким для меня даже при том, что это - дополнительная работа. Изображения являются хорошими и четкими :)

0
19.02.2020, 23:42
  • 1
    В то время как это технически работает, это берет в других отношениях автоматизированный процесс и изменяет его на очень ручной и интенсивный. Другие предлагаемые решения/ответы one time fixes. –  Steve 05.02.2013, 21:54

Причина woocommerce изображения является расплывчатой, то, потому что woocommerce CSS разработана для быстро реагирующих тем, однако настройки миниатюры в настройках каталога являются определенными размерами пикселя.

Woocommerce покрывают его в своих документах, но их объяснение и метод фиксации не точно корректны. См. http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/

Я буду использовать пример для показа то, что происходит для образов товара (показанный на странице единого продукта):

Исходное изображение составляет 500 x 500 (говорят), что изображение единого продукта каталога Woocommerce установлено на 300 x 300, таким образом, миниатюра исходного изображения 300 x 300 сгенерирована. Класс отделения изображения страницы продукта = CSS "изображений" установлен на ширину: 48%; На моем экране это 48% приравниваются к размеру изображения 470 x 470, Таким образом, миниатюра 300 x 300 расширяется к созданию 470 x 470 его расплывчатый.

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

Можно или изменить CSS, чтобы соответствовать размеру миниатюры или изменить размер изображения единого продукта для установки исходному размеру изображения (или по крайней мере больше, чем Вы думаете, что 48% шириной расширит миниатюру к).править: на самом деле Вы могли сделать обе вещи.

По-видимому, подобная проблема с другими настройками миниатюры на странице настроек каталога.

Мне это - проблема в woocommerce не проблема в темах других людей.

1
19.02.2020, 23:42

Теги

Похожие вопросы