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

Правильное выставление размеров картинок.

andrianoz

Форумчанин
#1
Всем привет.

Подскажите пожалуйста, как мне сделать чтобы у категорий товаров картинка была размером 150х150 (к примеру), а внутри категории сами товары были размером 250х250. А картинка самого товара внутри товара, 500х500.
Выставляю в настройках, но ничего не выходит.
Regenerate Thumbnails - не исправляет это.
 

andrianoz

Форумчанин
#2
.woocommerce-page ul.products li.product a img {
height: 200px;
width: 200px;
}
Вот этим кодом я смог сделать, но оно изменило картинки и категорий и товаров. Как сделать раздельно?
И еще, как выровнять текст по центру названий и категорий?
 

qwer

Специалист
Местный
#3
Всем привет.

Подскажите пожалуйста, как мне сделать чтобы у категорий товаров картинка была размером 150х150 (к примеру), а внутри категории сами товары были размером 250х250. А картинка самого товара внутри товара, 500х500.
Выставляю в настройках, но ничего не выходит.
Regenerate Thumbnails - не исправляет это.
Добрый день.
Попробуйте ознакомиться с этой темой, возможно она будет полезной для вас.
.woocommerce-page ul.products li.product a img {
height: 200px;
width: 200px;
}
Вот этим кодом я смог сделать, но оно изменило картинки и категорий и товаров. Как сделать раздельно?
Вы меняете размеры картинок посредством css. Таким образом картинка может сжиматься непропорционально изображению и оно будет кривоватым или сильно сжатым.
Лучше воспользоваться настройкой самих изображений уже на стороне самого WP и Woocommerce, а не генерировать через css.
И еще, как выровнять текст по центру названий и категорий?
Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией

Обратите внимание на заглавие форума. И оформляете темы выполняя правила.
P.S. Вы серьезно думаете что без ссылки на сайт возможно помочь выровнять текст/поменять цвет/изменить шрифт?
 
Последнее редактирование:

andrianoz

Форумчанин
#4
Добрый день.
Попробуйте ознакомиться с этой темой, возможно она будет полезной для вас.

Вы меняете размеры картинок посредством css. Таким образом картинка может сжиматься непропорционально изображению и оно будет кривоватым или сильно сжатым.
Лучше воспользоваться настройкой самих изображений уже на стороне самого WP и Woocommerce, а не генерировать через css.

Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией

Обратите внимание на заглавие форума. И оформляете темы выполняя правила.
P.S. Вы серьезно думаете что без ссылки на сайт возможно помочь выровнять текст/поменять цвет/изменить шрифт?
Прошу прощения. Ссылку на сайт нет смысла давать, так как стоит плагин Coming Soon и Вы не увидите контент
 

Вложения

andrianoz

Форумчанин
#5
Убрал CSS, как теперь выставить правильные размеры через WP и Woocommerce. Стандартные настройки ничего не меняют.

Код:
if( ! function_exists( 'mfn_woocommerce_image_dimensions' ) )
{
    function mfn_woocommerce_image_dimensions() {
        $catalog = array(
            'width'     => '200',    // px
            'height'    => '200',    // px
            'crop'        => 1         // true
        );
    
        $single = array(
            'width'     => '200',    // px
            'height'    => '200',    // px
            'crop'        => 1         // true
        );
    
        $thumbnail = array(
            'width'     => '200',    // px
            'height'    => '200',    // px
            'crop'        => 1         // true
        );
    
        // Image sizes
        update_option( 'shop_catalog_image_size', $catalog );        // Product category thumbs
        update_option( 'shop_single_image_size', $single );         // Single product image
        update_option( 'shop_thumbnail_image_size', $thumbnail );     // Image gallery thumbs
    }
}
Меняя тут размеры, ничего не происходит
 

Вложения

Последнее редактирование:

qwer

Специалист
Местный
#6
Прошу прощения. Ссылку на сайт нет смысла давать, так как стоит плагин Coming Soon и Вы не увидите контент
Рекомендую провести следующие действия.
Изменить изображения WooCommerce:
1) WooCommerce -> Настройки (Settings). Выберите вкладку Товары (Products) и нажмите Отображение (Display)
На этой же страницы должны быть доступны манипуляции с размерами изображений для категорий
Изображения каталога (Catalog image), Изображение единичного товара (Single Product image), Миниатюра товара (Product Thumbnails);
Изменить изображения Wordpress:
2) Параметры -> Медиафайлы
Изменить изображения прописанные через код:
Просмотр настроек изображений в теме, в файле functions.php
т.е. поиск примерно такого кода:
Код:
add_theme_support( 'post-thumbnails' );
add_image_size( 'Названиетемы_blog_img_side', 300, 200, true );
Меняете его на ваши параметры и сохраняете файл.
Генерацию ненужных вам размеров вы вообще можете отключить в коде и/или в админке WP.

Ещё раз, прошу обратить внимание на тему. Там более детально прописаны параметры, которые могут встретиться в коде. (Если проблема с картинками в коде вашей темы).
Вносите изменения (functions.php, настройки изображений WP, настройки изображений WooCommerce) -> Сохраняете -> Запускаете плагин Regenerate Thumbnails -> Очищаете кэш.
После завершения процесса повторной генерации, все изображения продуктов на сайте будут соответствовать заданным параметрам.
Должно помочь.
 

qwer

Специалист
Местный
#7
Код:
if( ! function_exists( 'mfn_woocommerce_image_dimensions' ) )
{
    function mfn_woocommerce_image_dimensions() {
        $catalog = array(
            'width'     => '150',    // px
            'height'    => '150',    // px
            'crop'        => 1         // true
        );
  
        $single = array(
            'width'     => '250',    // px
            'height'    => '250',    // px
            'crop'        => 1         // true
        );
  
        $thumbnail = array(
            'width'     => '100',    // px
            'height'    => '100',    // px
            'crop'        => 1         // true
        );
  
        // Image sizes
        update_option( 'shop_catalog_image_size', $catalog );        // Product category thumbs
        update_option( 'shop_single_image_size', $single );         // Single product image
        update_option( 'shop_thumbnail_image_size', $thumbnail );     // Image gallery thumbs
    }
}
Т.е. вы меняли размеры в этом коде и ничего не изменилось?
 

andrianoz

Форумчанин
#12
В общем впринципе следующий код помог, по крайней мере стандартные параметры начали слушаться.

Код:
.woocommerce ul.products li.product a img, .woocommerce div.product div.images img {
   width: auto;
}
Остался один всего вопрос. В списке товаров, картинка товара меньше чем рамка, как мне уменьшить рамку только в товарах?
Код:
/* Image frames & Google maps & Icon bar */
.image_frame,.wp-caption,.google-map,.icon_box .icon_wrapper,.content_slider .caroufredsel_wrapper,.author-box .avatar-wrapper,#comments .commentlist > li .photo,.edd_download_image{border-color:#ffffff}
Если добавить в этом коде width и height - меняется размер всех картинок, даже единичного товара.
 

ADv

Гуру
Местный
#13
Остался один всего вопрос. В списке товаров, картинка товара меньше чем рамка, как мне уменьшить рамку только в товарах?
Код:
/* Image frames & Google maps & Icon bar */
.image_frame,.wp-caption,.google-map,.icon_box .icon_wrapper,.content_slider .caroufredsel_wrapper,.author-box .avatar-wrapper,#comments .commentlist > li .photo,.edd_download_image{border-color:#ffffff}
Если добавить в этом коде width и height - меняется размер всех картинок, даже единичного товара.
Потому что вы захватываете все классы (этот вот огромный список). Необходимо прописывать правило только для одного, нужного, в данном случае. Обычно, в браузере в Инспекторе элементов в FF, например, нужный класс выделяется другим цветом, а "лишние" - серым.
 

andrianoz

Форумчанин
#14
Потому что вы захватываете все классы (этот вот огромный список). Необходимо прописывать правило только для одного, нужного, в данном случае. Обычно, в браузере в Инспекторе элементов в FF, например, нужный класс выделяется другим цветом, а "лишние" - серым.
Спасибо. Я убрал эффект увеличения картинок и тем самым убрался border и картинка выглядит теперь нормально.
 
Сверху Снизу