使用 Liquid 和 HTML 建立動態資訊主頁圖片

您可以在 Markdown 文字圖塊中硬式編碼圖片網址，將圖片新增至 Looker 資訊主頁。不過，文字圖塊中的圖片是靜態的，不會根據結果更新。如果您想讓資訊主頁圖片根據使用者所選的篩選器值動態變更，該怎麼做？

本最佳做法頁面將說明如何使用 Liquid 和 html 參數，製作動態資訊主頁圖片。

解決方案

以下解決方案以電子商務資料集為基礎，其中包含名為 users.state 的欄位，代表假設電子商務資料集中的狀態：

dimension: state {
  type: string
  sql: ${TABLE}.state ;;
}

假設您想在資訊主頁上顯示某個州的旗幟圖片，而這張圖片會根據使用者選擇用來篩選資訊主頁結果的州來更新。

如要建立動態資訊主頁圖片，您必須完成以下三個步驟：

  1. 在 LookML 中建立圖片維度。
  2. 建立動態圖像資訊主頁圖塊。
  3. 新增資訊主頁篩選器並完成最後調整。

步驟 1：在 LookML 中建立圖片維度

如何在 LookML 中建立圖片維度：

  1. 首先，請前往專案，並查看包含您要新增圖片的維度的檔案。接著，根據該欄位建立新的維度，專門用於顯示圖片。

  2. 針對每個要顯示圖片的值，新增 html 參數，以便使用 value 變數定義 Liquid {% if %} 條件陳述式。

    舉例來說，當 state 的值為 "California"、"New York"、"Colorado" 或 "Illinois" 時，下列 state_flag_image 維度會建立顯示指定圖片 (含 html <img> 標記) 的條件。對於所有其他狀態，您可以顯示「沒有可用圖片」圖示： 

          dimension: state_flag_image {
          type: string
          sql: ${state} ;;
          html:
              {% if state._value == "California" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg" height="170" width="255">
              {% elsif state._value == "New York" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_New_York.svg/1200px-Flag_of_New_York.svg.png" height="170" width="255">
              {% elsif state._value == "Colorado" %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Flag_of_Colorado.svg/255px-Flag_of_Colorado.svg.png" height="170" width="255">
              {% elsif state._value == "Illinois"%}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_Illinois.svg/1200px-Flag_of_Illinois.svg.png" height="170" width="255">
              {% else %}
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/1024px-No_image_available.svg.png" height="170" width="170">
              {% endif %} ;;
      }
  3. 針對每個要顯示圖片的值建立值條件。或者，您也可以使用 value Liquid 變數建立動態圖片欄位，詳情請參閱「如何在圖像化資料中加入圖片」社群貼文。

接下來，您可以為圖片維度建立資訊主頁資訊方塊。

步驟 2：建立動態圖片資訊主頁方塊

圖片維度 (state_flag_image) 已建立完成，您可以建立 Explore，做為動態圖片資訊主頁資訊方塊。

根據下列條件建立探索：

  • 為原始維度 (在本例中為 state) 新增篩選器。設定任何值的篩選器 (在本例中，由於未選取特定篩選器值，因此狀態標記會顯示「no image available」圖片)。這個篩選器值會根據使用者在資訊主頁篩選器中選取的項目更新。 
  • 選取圖片維度 (在本例中為 state_flag_image) 和任何其他可能需要用於決定圖片的查詢維度 (例如，如果您想納入日期，可以加入日期等)。
  • 將列數上限變更為一列。
  • 將圖表類型變更為單一值圖表，並隱藏圖片維度 (state_flag_image) 以外的所有資料欄。

「探索」會在「Visualization」面板中顯示單一值視覺化結果中的首個圖片結果。顯示圖片會根據使用者在最終資訊主頁上選取的篩選器值而變更：

將探索儲存至資訊主頁做為資訊方塊。

步驟 3：新增資訊主頁篩選器並完成最後調整

接下來，您需要在資訊主頁中新增資訊主頁篩選器。資訊主頁上的篩選器會更新「探索」中的篩選器，根據使用者選擇變更顯示的圖片。

在資訊主頁的編輯模式中建立篩選器：

  • 開啟新增篩選器視窗
  • 選取要篩選的欄位。篩選器欄位應為圖片尺寸的依據維度。在本例中，篩選器的欄位會是 state。
  • 在「要更新的圖塊」分頁中，選取步驟 2 中的圖片圖塊。
  • 在內嵌的「篩選欄位」下拉式選單中，選取原始維度 (在本例中為「state」)。
    • 視需要選取其他要更新的圖塊。
  • 視需要自訂篩選器。如果您選取「進階」控制選項，請務必取消選取「允許多個篩選器值」選項，因為系統會自動為「進階」控制選項啟用此選項。

圖片圖塊現在會根據使用者篩選器選項更新。

當使用者選擇以「加州」做為篩選條件時，資訊主頁會顯示加州的旗幟和資料：

當使用者選擇以「科羅拉多州」做為篩選條件時，資訊主頁會顯示科羅拉多州的州旗和資料：