#php #html #css #wordpress #woocommerce
#php #HTML #css #wordpress #woocommerce
Вопрос:
Я уже следовал приведенным здесь инструкциям http://www.cbdweb.net/woocommerce-and-image-sizes / и здесь https://theme-fusion.com/knowledgebase/how-to-fix-woocommerce-image-size-issues .
Несмотря на то, что я изменил размеры изображений каталога и миниатюр продуктов в настройках WooCommerce -> Товары -> Дисплей, я все еще вижу, что ширина и высота изображения установлены на 300 в инспекторе.
Когда вы просмотрите одно из изображений, вы увидите:
<img width="300" height="300"
src="http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-300x300.jpg"
class="attachment-shop_catalog size-shop_catalog wp-post-image"
alt="Hamburger Collection" title="Hamburger Collection"
srcset="http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
300x300.jpg 300w,
http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
150x150.jpg 150w,
http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
180x180.jpg 180w,
http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
600x600.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"> == $0
Со стилями
.woocommerce ul.products li.product a img {
width: 100%;
height: auto;
display: block;
margin: 0 0 1em;
box-shadow: none;
}
.woocommerce img, .woocommerce-page img {
height: auto;
max-width: 100%;
}
Если я попытаюсь отредактировать стили непосредственно в таблице стилей моей темы (style.css), я получу довольно плохой результат:
.attachment-shop_catalog .size-shop_catalog .wp-post-image {
width: 400px!important;
height: 400px!important;
}
.woocommerce ul.products li.product a img {
width: 400px!important;
height: 400px!important;
}
Если я отключу максимальную ширину: 100% от стиля:
.woocommerce img, .woocommerce-page img {
height: auto;
max-width: 100%;
}
На самом деле я получаю правильный размер, но затем изображения перекрываются.
Они также остаются в этом размере, когда страница отвечает, чего мы не хотим.
Что действительно не имеет смысла для меня, так это то, почему размер img по-прежнему равен 300 x 300, когда я уже изменил размер на 600 x 600 буквально везде, о чем я могу подумать — в моей таблице стилей и для изображений каталога, отдельных изображений продукта и миниатюр продуктов в настройках WooCommerce -> Продукты -> Дисплей. Я также восстановил свои эскизы с помощью плагина Regenerate Thumbnails. Кроме того, изображения даже не выглядят размером 300 x 300 — на самом деле они все равно выглядят так, как будто они 150 x 150.
Ответ №1:
Ширина ваших изображений в настоящее время определяется их родительским li (элементами списка).
.woocommerce ul.products li.product
У вас установлено значение 22,05% от родительского значения 680px. Прямо сейчас вы заставляете свои изображения быть размером 600 пикселей с помощью !important. Вам нужно по 2 продукта в строке с небольшим промежутком (4%?) между ними, так что это может сработать лучше (очевидно, избавьтесь от принудительной ширины 600 пикселей на изображение):
#container .woocommerce ul.products li.product, #container .woocommerce-page ul.products li.product {
float: left;
margin: 0 4% 2.992em 0;
padding: 0;
position: relative;
width: 46%;
}
Вы также проверяли размеры своих изображений в основной настройке WordPress, через Настройки -> Медиа в меню администратора слева. Если вы измените это, то восстановите свои эскизы снова.
Комментарии:
1. Я просто использовал 600 пикселей, чтобы получить какую-то реакцию — чего я действительно хочу, так это чтобы оба изображения занимали примерно половину контейнера «woocommerce» (каждое размером около 340 пикселей). Я попытался скопировать и вставить ваш код в свою таблицу стилей, но это вернуло меня туда, где я был — маленькие изображения, занимающие около 50% ширины контейнера woocommerce. Я заметил, что размер миниатюр в настройках -> Медиа был установлен на 150 x 150. Я думал, что это может быть проблемой, но я изменил его на 300 x 300, сохранил, и все еще никакого результата. У меня уже установлен и активирован плагин regenerate thumbnails.
2. Вероятно, причиной являются Настройки -> Медиа. Просто для пояснения, вы должны повторно запускать regenerate каждый раз, когда вносите изменения, это не происходит автоматически. Приведенный выше код позволит каждому продукту занимать 100% места. Как только вы восстановите свои эскизы снова, мы можем взглянуть еще раз.
3. Должен был упомянуть, что я повторно запустил функцию регенерации миниатюр …. хорошая новость заключается в том, что теперь в инспекторе отображается новый размер (340 пикселей), но, похоже, изображения по-прежнему имеют размер 150 x 150 …..Настройки -> Размер миниатюр мультимедиа установлен на 340, а настройки WooCommerce -> Продукты -> Отображать миниатюры продуктов — на 340. Изменение размера здесь для изображений каталога (до 340) — это то, из-за чего размер по-другому отображается в инспекторе.
4. Я отредактировал ответ, чтобы лучше отразить ситуацию. Я протестировал ответ на Inspect Element в Chrome, и он разместит ваши 2 изображения рядом с зазором в 4%. Это делает изображения размером 313×313 пикселей, что нормально, поскольку исходное изображение немного больше (340 пикселей), поэтому вы не теряете качество.
5. Это потому, что ваш /wp-content / themes /thehamburgercollection / style.css загружается до, а не после других таблиц стилей. Итак, я вижу, что ваш код есть, но он перезаписывается из-за каскадной природы зверя. Итак, вам нужно отредактировать свой header.php и добавьте свою таблицу стилей после других. Тем временем вы также можете использовать обновленный ответ (я добавил #container, чтобы сделать ваш ответ более конкретным и, надеюсь, сработает, даже если они появятся первыми, попробуйте).