圖庫格線

使用圖庫格線,就可以一次在資料列和資料欄中呈現一組影像。

新增影像圖庫至頁面:
  1. 瀏覽至您要編輯的頁面,並確定 「編輯」開關 已設為編輯
  2. 新增元件至頁面。除非您選取想要使用的影像,否則圖庫格線元件會顯示預留位置影像。
  3. 若要將一或多個影像新增至圖庫,請按一下其功能表圖示 「元件功能表」圖示,並選擇設定值,然後按一下一般頁籤上的影像
  4. 按一下新增影像
  5. 選取一或多個影像。

    註:

    視窗會顯示所有可用的檔案。您必須選擇適用於相關資訊環境的檔案類型。例如,如果您要選擇影像檔,則必須選取有效的影像格式 (GIF、JPG、JPEG、PNG 或 SVG) 檔案。
    1. 找到並選取想要使用的影像。

      若未見到任何數位資產,請按一下 資產篩選圖示,然後將集合篩選條件變更為全部

    2. 若從文件資料夾中選取影像,您可以連結到檔案,而不是將檔案複製到網站。若要連結至檔案,請選取使用原始檔案參照,而不是將檔案複製到網站。若未選取此選項,系統就會在網站儲存檔案的複本,然後從網站參照。若連結至原始的檔案,就不需要複製內容。即使檔案的權限變更或其他因素而限制了檢視,網站訪客仍能透過連結查看內容。
    3. 按一下確定
    4. 如果選取數位資產,您可以選取特定的轉譯。若未選取轉譯,則會使用原始大小。若想要在網站發布時一同發布最新版本的資產,請選取使用最新版本的資產
    選取的影像會新增至影像清單中。拖放影像即可重新排序清單 (和格線) 中的影像。每個影像的預設標題為不含副檔名的檔案名稱。
  6. 若要變更特定影像的標題、描述或其他選項,請按一下清單中的影像,然後進行變更。
    您也可以將連結或其他動作與圖庫中的影像建立關聯:
    1. 在特定影像的「設定值」面板,請按一下「連結」欄位。
    2. 請選取下列其中一個選項:
      • 沒有連結:使用者按一下影像時,影像不會執行任何動作。

      • 網頁:指定外部頁面或網站的完整 URL,並選取要在何處開啟連結。

      • 網站頁面:使用頁面選擇器選取目前網站上的頁面,並選取要在何處開啟連結。您可以使用 key1=value1&key2=value2 格式指定其他 URL 參數。支援使用空的值;例如 key1=&key2=value2。您也可以指定 URL 錨點,但必須在目標網站頁面上要解析此錨點連結的位置新增特殊「錨點」區段版面配置,並在版面配置設定值中指定定義觸發程式動作時所使用的相同錨點名稱。

        註:

        需要使用 URL 錨點的「錨點」區段版面配置是由 OCE 工具程式提供。如需有關如何取得此工具程式的資訊,請參閱使用 OCE 工具程式進行開發
      • 檔案下載:從儲存區域下載選取的檔案。選取檔案。

        如果選取數位資產,您可以選取特定的轉譯。若未選取轉譯,則會使用原始大小。若想要在網站發布時一同發布最新版本的資產,請選取使用最新版本的資產。若未選取使用最新版本的資產,則會使用最新的已發布版本,而不會使用更新的草稿版本 (如果有的話)。

      • 內容項目:從關聯的資產儲存區域中選取一個內容項目,選擇您要顯示的詳細資訊頁面,並將此頁面定位在同一個視窗或新視窗中開啟。

      • 電子郵件:指定有效的電子郵件地址,並視需要指定主旨。產生的訊息會在預設電子郵件從屬端中開啟,並透過預設電子郵件從屬端傳送。

      • 影像預覽:選取的影像將會顯示成頁面上的浮動層。

      • 地圖:輸入有效的地址或座標,並選取是要在桌面還是行動裝置瀏覽器中開啟地圖。

      • 電話:輸入有效的電話號碼。

    3. 按一下上一步返回影像設定值面板。再按一下上一步返回影像清單,選取另一個要更新的影像。
    4. 完成個別影像的更新之後,請按上一步指定圖庫選項。
  7. 使用版面配置選項排列格線中的影像。
    • 瀑布流
    • 資料欄
    • 自訂
    下面步驟將說明所有這些選項。
  8. 選擇瀑布流版面配置,自動排列可用空間之資料列中的影像。
    產生的資料列具有統一高度,但沒有定義資料欄。
    以下為 GUID-4CAF671A-F931-4177-BB92-E5F082663996-default.png 的說明
    插圖說明 GUID-4CAF671A-F931-4177-BB92-E5F082663996-default.png
    1. 指定高度,按比例將所有影像調整為指定的高度 (像素)。
    2. 指定影像間距,增加或減少資料列中影像之間的空格。
  9. 選擇資料欄版面配置,排列資料列和資料欄中的影像。
    1. 選取縮放選項,調整影像在格線中的呈現方式:
      • 剪裁:將寬度或高度中尺寸較小的一邊調整到能剛好裝入可用空間,並剪裁尺寸較大的另一邊,以防止影像延伸。

      • 最適大小:調整每個影像,使整個影像與可用空間的大小相符,而不會扭曲變形。
      例如,下列格線使用 4 個資料欄,並將 6 個影像調整為最適大小:
      以下為 GUID-4AB0B5DD-89B4-492D-A968-45482B3953CE-default.png 的說明
      插圖說明 GUID-4AB0B5DD-89B4-492D-A968-45482B3953CE-default.png

      下面是相同的格線,但使用裁剪過的影像:
      以下為 GUID-3B1C55AE-E995-41C4-A9D9-F52FA75FF7E3-default.png 的說明
      插圖說明 GUID-3B1C55AE-E995-41C4-A9D9-F52FA75FF7E3-default.png

    2. 指定外觀比例,決定格線中儲存格的外觀。
      • 方形:外觀比例 1:1。

      • 橫向:外觀比例 16:9。

      • 縱向:外觀比例 9:16。
      • 自訂:指定您自己的外觀比例數值。

    3. 指定資料欄數目。
      格線會自動調整,以建立等寬的資料欄。
    4. 指定影像間距,增加或減少資料列和資料欄中影像之間的空格。
  10. 選擇自訂版面配置,根據指定的影像大小和寬度來排列資料列和資料欄中的影像。
    1. 選取縮放選項,調整影像在格線中的呈現方式:
      • 剪裁:將寬度或高度中尺寸較小的一邊調整到能剛好裝入可用空間,並剪裁尺寸較大的另一邊,以防止影像延伸。

      • 最適大小:調整每個影像,使整個影像與可用空間的大小相符,而不會扭曲變形。
    2. 指定影像高度影像寬度,決定格線中儲存格的外觀。
      格線會自動調整,以建立具有所指定維度的儲存格。
    3. 指定影像間距,增加或減少資料列和資料欄中影像之間的空格。
  11. 指定對齊方式寬度間距選項,以放置槽位內的格線。
    使用寬度指定槽位中圖庫的寬度 (單位為像素)。按一下填滿以外的對齊方式選項以指定寬度。在您設定寬度之後,可以使用填滿將影像延長至指定的寬度。