feat: add options to select aspect ratio and cron algo for product images

frontend/admin/src/components/MainPageConfigurator/Blocks/BaseBlock.vue

@@ -61,7 +61,3 @@ function confirmedRemove(event) {
   });
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>

frontend/admin/src/components/MainPageConfigurator/Blocks/ProductsFeedBlock.vue

@@ -13,10 +13,6 @@
         <span class="tw:font-bold tw:dark:text-slate-200">Максимальное кол-во страниц:</span>
         {{ value.data.max_page_count }}
       </div>
-      <div>
-        <span class="tw:font-bold tw:dark:text-slate-200">Соотношение сторон:</span>
-        {{ value.data.image_aspect_ratio || '1:1' }}
-      </div>
     </div>
   </BaseBlock>
 </template>

frontend/admin/src/components/MainPageConfigurator/Forms/ProductsCarouselForm.vue

@@ -37,18 +37,6 @@
                 </template>
               </FormItem>
 
-              <!-- Раздел Изображения -->
-              <div class="tw:border-t tw:border-gray-200 tw:pt-6">
-                <h3 class="tw:text-lg tw:font-medium tw:mb-4">Изображения</h3>
-                <FormItem label="Соотношение сторон">
-                  <template #default>
-                    <AspectRatioSelect v-model="imageAspectRatio"/>
-                  </template>
-                  <template #help>
-                    Выберите соотношение сторон для изображений товаров.
-                  </template>
-                </FormItem>
-              </div>
             </div>
           </Panel>
 
@@ -149,30 +137,13 @@ import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
 import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
 import CategorySelect from "@/components/Form/CategorySelect.vue";
 import {Fieldset, InputNumber, InputText, Panel, ToggleSwitch} from "primevue";
-import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";
 
 const draft = ref(null);
 const model = defineModel();
 const emit = defineEmits(['cancel']);
 
-const imageAspectRatio = computed({
-  get() {
-    return draft.value.data.image_aspect_ratio || '1:1';
-  },
-  set(value) {
-    draft.value.data.image_aspect_ratio = value;
-  }
-});
-
 const isChanged = computed(() => {
-  const normalize = (obj) => {
-    const clone = JSON.parse(JSON.stringify(obj));
-    if (clone.data && !clone.data.image_aspect_ratio) {
-      clone.data.image_aspect_ratio = '1:1';
-    }
-    return JSON.stringify(clone);
-  };
-  return md5(normalize(model.value)) !== md5(normalize(draft.value));
+  return md5(JSON.stringify(model.value)) !== md5(JSON.stringify(draft.value));
 });
 
 // Инициализация carousel, если его нет (только для записи)

frontend/admin/src/components/MainPageConfigurator/Forms/ProductsFeedForm.vue

@@ -26,15 +26,6 @@
             Ограничение страниц снижает нагрузку на сервер.
           </template>
         </FormItem>
-
-        <FormItem label="Соотношение сторон">
-          <template #default>
-            <AspectRatioSelect v-model="draft.data.image_aspect_ratio"/>
-          </template>
-          <template #help>
-            Выберите соотношение сторон для изображений товаров.
-          </template>
-        </FormItem>
       </div>
     </BaseForm>
   </div>
@@ -46,7 +37,6 @@ import {md5} from "js-md5";
 import BaseForm from "@/components/MainPageConfigurator/Forms/BaseForm.vue";
 import {InputNumber} from "primevue";
 import FormItem from "@/components/MainPageConfigurator/Forms/FormItem.vue";
-import AspectRatioSelect from "@/components/MainPageConfigurator/Forms/AspectRatioSelect.vue";
 
 const draft = ref(null);
 const model = defineModel();
@@ -72,7 +62,6 @@ onMounted(() => {
   draft.value = JSON.parse(JSON.stringify(model.value));
   if (draft.value.data) {
     if (draft.value.data.max_page_count) draft.value.data.max_page_count = parseInt(draft.value.data.max_page_count);
-    if (!draft.value.data.image_aspect_ratio) draft.value.data.image_aspect_ratio = '1:1';
   }
 });
 

frontend/admin/src/components/MainPageConfigurator/availableBlocks.js

@@ -58,7 +58,6 @@ export const blocks = [
     goal_name: '',
     data: {
       max_page_count: 10,
-      image_aspect_ratio: '1:1',
     },
   },
   {
@@ -70,7 +69,6 @@ export const blocks = [
     data: {
       category_id: null,
       all_text: null,
-      image_aspect_ratio: '1:1',
       carousel: {
         slides_per_view: null,
         space_between: null,

frontend/admin/src/stores/settings.js

@@ -18,6 +18,8 @@ export const useSettingsStore = defineStore('settings', {
         theme_dark: 'dark',
         app_debug: false,
         privacy_policy_link: null,
+        image_aspect_ratio: '1:1',
+        image_crop_algorithm: 'cover',
       },
 
       telegram: {

frontend/admin/src/views/GeneralView.vue

@@ -49,6 +49,19 @@
     Режим разработчика. Рекомендуется включать только по необходимости.
     В остальных случаях, для нормальной работы магазина, должен быть выключен.
   </ItemBool>
+
+  <ItemSelect label="Соотношение сторон" v-model="settings.items.app.image_aspect_ratio" :items="aspectRatioOptions">
+    Выберите соотношение сторон для изображений товаров. Это глобальная настройка, которая будет применяться ко всем изображениям в списках товаров: карусель товаров, лента товаров, результаты поиска.
+  </ItemSelect>
+
+  <ItemSelect label="Алгоритм обрезки" v-model="settings.items.app.image_crop_algorithm" :items="cropAlgorithmOptions">
+    Выберите алгоритм обрезки изображений. Эта настройка применяется глобально ко всем изображениям в списках товаров (карусель товаров, лента товаров, результаты поиска):
+    <ul class="tw:list-disc tw:ml-5 tw:mt-2">
+      <li><strong>Cover</strong> - обрезает изображение, сохраняя пропорции, чтобы заполнить весь размер (может обрезать края)</li>
+      <li><strong>Contain</strong> - вписывает изображение в размер, сохраняя пропорции (может добавить пустые поля)</li>
+      <li><strong>Resize</strong> - изменяет размер изображения с сохранением пропорций (без обрезки)</li>
+    </ul>
+  </ItemSelect>
 </template>
 
 <script setup>
@@ -60,6 +73,19 @@ import ItemInput from "@/components/Settings/ItemInput.vue";
 
 const settings = useSettingsStore();
 const themes = JSON.parse(window.TeleCart.themes);
+
+const aspectRatioOptions = {
+  '1:1': '1:1 - Квадрат (универсально, аксессуары, мелкие товары)',
+  '4:5': '4:5 - Вертикальное (одежда, обувь, вертикальные товары)',
+  '3:4': '3:4 - Вертикальное (одежда, обувь, вертикальные товары)',
+  '2:3': '2:3 - Высокое вертикальное (цветы, высокие предметы)',
+};
+
+const cropAlgorithmOptions = {
+  'cover': 'Cover - Обрезать с сохранением пропорций',
+  'contain': 'Contain - Вписать с сохранением пропорций',
+  'resize': 'Resize - Изменить размер с сохранением пропорций',
+};
 </script>
 
 <style scoped>