🎨 https://github.com/siyuan-note/siyuan/issues/10414

app/src/protyle/render/av/gallery/render.ts

@@ -61,16 +61,17 @@ export const renderGallery = (options: {
         view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
             galleryHTML += `<div data-id="${item.id}" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
             if (view.coverFrom !== 0) {
+                const coverClass= "av__gallery-cover av__gallery-cover--" + view.cardAspectRatio
                 if (item.coverURL) {
                     if (item.coverURL.startsWith("background")) {
-                        galleryHTML += `<div class="av__gallery-cover"><div class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" style="${item.coverURL}"></div></div>`;
+                        galleryHTML += `<div class="${coverClass}"><div class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" style="${item.coverURL}"></div></div>`;
                     } else {
-                        galleryHTML += `<div class="av__gallery-cover"><div class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" style="background-image:url('${item.coverURL}')"></div></div>`;
+                        galleryHTML += `<div class="${coverClass}"><div class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" style="background-image:url('${item.coverURL}')"></div></div>`;
                     }
                 } else if (item.coverContent) {
-                    galleryHTML += `<div class="av__gallery-cover"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;
+                    galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;
                 } else {
-                    galleryHTML += '<div class="av__gallery-cover"></div>';
+                    galleryHTML += '<div class="${coverClass}"></div>';
                 }
             }
             galleryHTML += `<div class="av__gallery-fields${editIds.includes(item.id) ? " av__gallery-fields--edit" : ""}${view.wrapField ? " av__gallery-fields--wrap" : ""}">`;

app/src/protyle/render/av/gallery/util.ts

@@ -102,7 +102,6 @@ export const setGallerySize = (options: {
     const menu = new Menu();
     const avID = options.nodeElement.getAttribute("data-av-id");
     const blockID = options.nodeElement.getAttribute("data-node-id");
-    const galleryElement = options.nodeElement.querySelector(".av__gallery");
     const targetNameElement = options.target.querySelector(".b3-menu__accelerator");
     menu.addItem({
         iconHTML: "",
@@ -121,8 +120,6 @@ export const setGallerySize = (options: {
                 data: options.view.cardSize
             }]);
             options.view.cardSize = 0;
-            galleryElement.classList.add("av__gallery--small");
-            galleryElement.classList.remove("av__gallery--big");
             targetNameElement.textContent = window.siyuan.languages.small;
         }
     });
@@ -143,7 +140,6 @@ export const setGallerySize = (options: {
                 data: options.view.cardSize
             }]);
             options.view.cardSize = 1;
-            galleryElement.classList.remove("av__gallery--big", "av__gallery--small");
             targetNameElement.textContent = window.siyuan.languages.medium;
         }
     });
@@ -164,8 +160,6 @@ export const setGallerySize = (options: {
                 data: options.view.cardSize
             }]);
             options.view.cardSize = 2;
-            galleryElement.classList.remove("av__gallery--small");
-            galleryElement.classList.add("av__gallery--big");
             targetNameElement.textContent = window.siyuan.languages.large;
         }
     });
@@ -173,6 +167,60 @@ export const setGallerySize = (options: {
     menu.open({x: rect.left, y: rect.bottom});
 };
 
+export const getCardAspectRatio = (ratio: number) => {
+    switch (ratio) {
+        case 0:
+            return "16:9";
+        case 1:
+            return "9:16";
+        case 2:
+            return "4:3";
+        case 3:
+            return "3:4";
+        case 4:
+            return "3:2";
+        case 5:
+            return "3:2";
+        case 6:
+            return "1:1";
+    }
+    return "16:9";
+};
+
+export const setGalleryRatio = (options: {
+    view: IAVGallery
+    nodeElement: Element,
+    protyle: IProtyle,
+    target: HTMLElement
+}) => {
+    const menu = new Menu();
+    const avID = options.nodeElement.getAttribute("data-av-id");
+    const blockID = options.nodeElement.getAttribute("data-node-id");
+    const targetNameElement = options.target.querySelector(".b3-menu__accelerator");
+    menu.addItem({
+        iconHTML: "",
+        checked: options.view.cardAspectRatio === 0,
+        label: "16:9",
+        click() {
+            transaction(options.protyle, [{
+                action: "setAttrViewCardAspectRatio",
+                avID,
+                blockID,
+                data: 0
+            }], [{
+                action: "setAttrViewCardAspectRatio",
+                avID,
+                blockID,
+                data: options.view.cardSize
+            }]);
+            options.view.cardAspectRatio = 0;
+            targetNameElement.textContent = getCardAspectRatio(0);
+        }
+    });
+    const rect = options.target.getBoundingClientRect();
+    menu.open({x: rect.left, y: rect.bottom});
+};
+
 export const openGalleryItemMenu = (options: {
     target: HTMLElement,
     blockElement: HTMLElement,

app/src/protyle/render/av/layout.ts

@@ -1,6 +1,7 @@
 import {transaction} from "../../wysiwyg/transaction";
 import {Constants} from "../../../constants";
 import {fetchPost} from "../../../util/fetch";
+import {getCardAspectRatio} from "./gallery/util";
 
 export const getLayoutHTML = (data: IAV) => {
     let html = "";
@@ -31,6 +32,12 @@ export const getLayoutHTML = (data: IAV) => {
     <span class="b3-menu__accelerator">${view.cardSize === 0 ? window.siyuan.languages.small : (view.cardSize === 1 ? window.siyuan.languages.medium : window.siyuan.languages.large)}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
+<button class="b3-menu__item" data-type="set-gallery-ratio">
+    <span class="fn__flex-center">${window.siyuan.languages.cardAspectRatio}</span>
+    <span class="fn__flex-1"></span>
+    <span class="b3-menu__accelerator">${getCardAspectRatio(view.cardAspectRatio)}</span>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
+</button>
 <label class="b3-menu__item">
     <span class="fn__flex-center">${window.siyuan.languages.fitImage}</span>
     <span class="fn__space fn__flex-1"></span>

app/src/protyle/render/av/openMenuPanel.ts

@@ -46,7 +46,7 @@ import {openCalcMenu} from "./calc";
 import {escapeAttr, escapeHtml} from "../../../util/escape";
 import {Dialog} from "../../../dialog";
 import {bindLayoutEvent, getLayoutHTML, updateLayout} from "./layout";
-import {setGalleryCover, setGallerySize} from "./gallery/util";
+import {setGalleryCover, setGalleryRatio, setGallerySize} from "./gallery/util";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -1394,6 +1394,16 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "set-gallery-ratio") {
+                    setGalleryRatio({
+                        target,
+                        protyle: options.protyle,
+                        nodeElement: options.blockElement,
+                        view: data.view as IAVGallery
+                    });
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 } else if (type === "set-layout") {
                     updateLayout({
                         target,

app/src/protyle/wysiwyg/transaction.ts

@@ -854,7 +854,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
         "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView",
         "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc",
         "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID",
-        "setAttrViewBlockView"].includes(operation.action)) {
+        "setAttrViewBlockView", "setAttrViewCardSize"].includes(operation.action)) {
         if (!isUndo) {
             // 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
             refreshAV(protyle, operation);

app/src/types/index.d.ts

@@ -52,6 +52,7 @@ type TOperation =
     | "updateAttrViewColRollup"
     | "hideAttrViewName"
     | "setAttrViewCardSize"
+    | "setAttrViewCardAspectRatio"
     | "setAttrViewCoverFrom"
     | "setAttrViewCoverFromAssetKeyID"
     | "setAttrViewFitImage"
@@ -850,6 +851,7 @@ interface IAVGallery extends IAVView {
     coverFrom: number;    // 0：无，1：内容图，2：资源字段
     coverFromAssetKeyID?: string;
     cardSize: number;   // 0：小卡片，1：中卡片，2：大卡片
+    cardAspectRatio: number;
     fitImage: boolean;
     showIcon: boolean;
     wrapField: boolean;