Question

Мне нужны технические / концептуальные советы по адаптивным изображениям и соотношению сторон.

Я занимаюсь электронной коммерцией, и мне это нужно на страницах магазина - на всех страницах, которые показывают сетки продуктов, но не на отдельном продукте.страница - изображения отображаются с соотношением сторон 10:12 (ширина: высота) по причинам дизайна.Мне также нужно настроить изображения таким образом, чтобы фотография загружалась максимально светлым (в килобайтах) в зависимости от ширины области просмотра устройства.

Для загрузки светлых изображений я прочитал, что естьsrcset, и это WordPress реализует их по умолчанию.Если кто-то уже использовал их, лучше ли их модифицировать или они уже настроены таким образом, что имеет смысл?Что касается соотношения сторон, я увидел, что на панели «Настройка WordPress -> WooCommerce-> Изображения продукт» вы можете установить соотношение сторон, и вы можете изменить его на лету даже в будущем, если вам придется изменить дизайн.Кроме того, в «Личном кабинете -> Настройки -> Медиа» у вас есть возможность изменить размер изображений, а также здесь вы можете изменить на лету.

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

Думая о том, что я хотел бы получить, мне нужно выяснить, какой путь выбрать между:

1 - реализовать все (как бы вы это сделали вусловия кода и настройки wordpress-dashboard?) чтобы при вставке нового продукта не было необходимости обрезать изображения с помощью photoshop перед загрузкой в библиотеку wordpress, даже начиная с изображений, загруженных с соотношением 1: 1.Затем установите «фиксированное соотношение сторон» в «Настройка -> Woocommerce -> Изображения продуктов» и загрузите изображения, как будто бы не было завтра.

2 - Я заставляю себя готовить изображения с соотношением сторон, которое явыбрал внешний WordPress (фотошоп) и загрузите их в WordPress уже с правильным соотношением.Затем установите соотношение сторон «без кадрирования» в «Настройка -> Woocommerce -> Изображения продуктов».

3 - Есть ли другие идеи?

Очевидно, я бы предпочел тратить как можно меньше временикогда я должен загрузить новые продукты, так что это было бы предпочтительнее в первом случае ...

В настоящее время мой CSS не дает никаких указаний о том, как изображения должны отображаться, но они изменяются в размере (flex-растут: 1) в соответствии с шириной контейнера (flex-parent с шириной в px).

Извините за сложность вопроса, я постарался сделать его максимально понятным:)

Моя настройка Wordpress - Woocommerce - Child Theme.

Моя родительская тема добавит:


add_theme_support( 'post-thumbnails' );

add_image_size( 'cashier-blog', 640 );
add_image_size( 'cashier-full-width', 1040 );

add_theme_support( 'woocommerce', array(
    'thumbnail_image_width' => 432,
    'single_image_width'    => 560,
) );

html моего фактического изображения:

<img width="432" height="528" 
src="album-1-432x528.jpg" 
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" 
alt="" 
srcset="
    album-1-432x528.jpg 432w, 
    album-1-500x611.jpg 500w" 
sizes="
    (max-width: 432px) 100vw, 
    432px">

Скриншоты: