[AEM Assets]{class="badge positive" title="適用於AEM Assets)。"}

Dynamic Media歷程:基礎知識,第二部分 dm-journey-part2

NOTE

歡迎使用Dynamic Media歷程:基礎知識第II部分,您將在該部分中學習下列內容:

  • Dynamic Media URL剖析,以及Dynamic Media如何傳遞內容。
  • 建立影像預設集以轉譯資產的基礎知識。
  • 影像集、迴轉集及混合媒體集。

另請參閱Dynamic Media歷程:基礎知識,第I部分。

TIP
為達到最佳效果,Adobe建議您透過桌上型電腦閱讀及檢視此Dynamic Media歷程。

Dynamic Media URL剖析,以及Dynamic Media如何傳遞內容 dm-journey-d

上傳和發佈Dynamic Media資產後,您可以複製資產產生的URL,並將其貼到瀏覽器中,以檢視向客戶顯示的資產外觀。 以下手錶影像的複製URL會依顏色劃分,以便更易於閱讀和理解。

動態媒體URL剖析
動態媒體URL的結構。

URL紅色的第一部分是參照伺服器網域本身。 在此案例中,Dynamic Media是在一般伺服器網域https://s7d1.scene7.com/is/image/上執行。 您可以透過檢查伺服器網域,輕鬆識別Dynamic Media是否提供一組影像。 URL結構一致。 不過,有些Dynamic Media客戶已切換至其為name-of-your-company.scene7.com的專用伺服器網域。 智慧型影像需要專用的伺服器網域。

帳戶名稱是紫色的部分。 在此案例中,該帳戶稱為jpearldemo。

資產ID或名稱AdobeStock_28563982為綠色。 請注意,該資產的副檔名為​no,例如.png或.jpg。 將資產內嵌至Dynamic Media時,會移除副檔名並建立其他型別的檔案:金字塔TIFF檔案。 金字塔TIFF可讓Dynamic Media快速即時建立轉譯。

最後,還有些影像處理引數?wid=1000&fmt=jpeg&qlt=85,在結尾以黃色顯示。

整個URL路徑都是即時的。 試用。

當瀏覽器視窗仍開啟至Dynamic Media URL和觀看影像時,請檢視如何變更URL以建立影像的轉譯。

透過URL呈現監視影像

首先,請僅手動刪除URL路徑中的影像處理規則;保留伺服器名稱、帳戶名稱,以及資產ID或影像名稱。 試用。

現在將影像處理引數新增至URL結尾。 在URL欄位中,在影像名稱右側,輸入?wid=500,然後按​Enter。 試用。

請注意,已產生新的手錶轉譯。 這項變更影像寬度的簡單練習中,要瞭解的關鍵點在於,看到的影像會以100%動態方式產生。

現在將500畫素的寬度值變更為1000畫素,然後按​Enter。 試用。
當您按下​ Enter ​時,瀏覽器會回到Dynamic Media影像伺服器。 它會根據您輸入的新寬度值產生手錶轉譯,然後將影像傳送給瀏覽器並加以快取。

Dynamic Media有許多影像處理引數,可用來微調網頁上的影像資產。 您可以在這裡檢視他們的清單。

現在嘗試將旋轉引數新增到觀看影像。 在URL路徑的結尾,緊接在wid=1000之後,輸入&rotate=90,然後按​Enter。 試用。

手錶還是稍微向左偏斜。 將90的旋轉值變更為92,然後按​Enter。 試用。

同樣地,當您按下​ Enter ​時,會立即產生新的手錶轉譯。 您可以檢視效能等級,瞭解為什麼Dynamic Media在高流量期間每秒可以傳送超過800,000個影像要求​__。

以逐張影像為基礎,變更URL中的影像處理引數會變得效率低下,尤其是針對包含數千張影像的網站。 更好的方式是使用影像預設集。

建立影像預設集以轉譯資產的基礎知識 dm-journey-e

建立影像的方法有很多種。 您想要有可用的影像。 傳統上,創意專業人士會進入Adobe Photoshop,並將每個轉譯儲存為靜態影像。

靜態影像
良好:靜態影像,每個影像都是手動建立的。

現在想像一下,創意總監看著影像說,

「我真的很想要這個鏡頭,好讓大手指向四個,而小手指向1,好讓手錶撥盤更容易看見。」

創意會重新拍攝所有新的靜態影像。

但有了Dynamic Media,如果您有不同的影像預設集,您就可以隨處使用這些影像。 影像預設集會強制實施標準。

主要檔案方法
最佳:一個檔案使用影像預設集即時建立多個轉譯,例如Search_Grid和Thumbnail。

為什麼使用影像預設集?
標準
影像預設集會強制對其請求的任何影像執行標準影像處理處理。
變更管理
如果您必須變更影像處理,只要編輯現有影像預設集的引數即可。 更新的定義會自動傳播到所有請求。

您需要有特定影像型別的每個地方,例如:

  • 產品詳細資料頁面,
  • 搜尋格線,
  • 縮圖,
  • 購物車,或
  • 主圖影像

您想要在任何使用影像的地方,以相同的引數傳送影像。

讓我們暫時瞭解一下如何在Dynamic Media中建立影像預設集。

從基本索引標籤開始建立影像預設集
從[基本]索引標籤開始建立影像預設集。

在上述範例中,您可以看到已建立名稱為​ Medium ​的新影像預設集。 Dynamic Media使用現成可用的影像(揹包)範例,協助您在建立影像預設集時檢視其特性。

Medium​影像預設集具有500畫素的寬度和800畫素的高度。 在此歷程的第一部分中,您已閱讀有關以不同格式傳送資產的資訊。 從​ 格式 ​下拉式功能表中,您可以選擇以JPEG、PNG、TIFF或數種其他格式傳送資產。 您可以靈活處理。

選取​ 進階 ​索引標籤,可為您提供資產色域的選項。 根據​ 基本 ​標籤中選取的格式,您可以在RGB、灰階或CMYK中傳遞資產。 使用​ 色彩設定檔 ​下拉式功能表,選取如何傳送CMYK影像資產以供列印。 也請注意,您可以套用其他引數來銳利化影像。 在此情況下,已套用​不銳利化遮色片。

從進階索引標籤選取選項,以建立影像預設集
從[進階]索引標籤選取選項,以建立影像預設集。

您記得先前在Dynamic Media URL的結構中,您曾閱讀過有關Dynamic Media URL及其建置方式的資訊。 影像修飾元​文字方塊可讓您輸入您想要的任何其他影像處理引數。 使用預設集傳送影像時,引數會包含在URL的預設集名稱中。 在上面的熒幕擷圖中,已新增引數bgc=451B15。 也就是說,已新增深棕色背景顏色。

您可以將影像預設集視為影像的設定。 每次都會以一致的方式提供使用預設集的任何影像;都一樣。 引數&op_brightness=+10也加入以稍微增加亮度。

完成後,您儲存了預設集,現在它可用於您擁有的所有影像。 在此案例中,您想要將​ Medium ​影像預設集套用至一碗液態巧克力的影像。

套用影像預設集​Medium​以產生影像的轉譯
若要產生影像的轉譯,請套用影像預設集Medium。

若要檢查影像的外觀,請複製URL並將其貼到您的瀏覽器中。 試用。

在您的瀏覽器中,注意完整URL路徑中的影像預設集​ Medium ​的名稱。

您可以看到影像中顯示的清晰度。 這種品質部分是由於這碗巧克力的拍攝方式。 此外,部分原因是因為使用Dynamic Media,您可以儲存比傳送至數位頻道更大的影像。

如果您的巧克力碗看起來一切正常,您就會將URL貼到您想讓影像出現在網站上的網頁。

如果您再次檢視下方的手錶影像,您可以看到有Cart影像預設集、Grid預設集、Large預設集、PDP-page (產品詳細資料頁面)預設集,以及其他數個預設集。

靜態和動態影像預設集
靜態和動態影像預設集。 已使用PDP-page影像預設集演算監視影像。

但如果您必須變更網站上的影像,該怎麼做? 例如,假設您已進行一些測試,但發現系統並未如您預期般感知120 x 120的影像(Cart影像預設集)。 將寬度增加到175畫素並將高度增加到175畫素以增加影像大小。 傳統上,您會進入Adobe Photoshop並重新建立所有這些購物車影像。 但使用Dynamic Media時,您可以將「寬度」和「高度」值更新為175,以編輯影像預設集並儲存預設集,如下列範例所示。

編輯影像預設集
正在編輯Cart影像預設集的寬度和高度。

在您變更影像預設集並清除快取後,所有影像都會更新,且與該預設集搭配使用的所有URL都不​會在任何地方變更。 這表示不需要中斷連結和網頁重新導向。

影像集、迴轉集及混合媒體集 dm-journey-f

Dynamic Media一些較常用的用途是讓您建立影像集、迴轉集和混合媒體集。

影像集通常由一系列以單一實體呈現的影像資產組成。 這些型別的設定可為使用者提供整合式檢視體驗,使用者可按一下縮圖影像來檢視專案的不同檢視。 影像集可讓您呈現某些專案的替代檢視,而檢視器則提供縮放工具,讓您更密切地檢查影像。 檢視名為「執行中」且使用彈出式檢視器的影像集。

在Dynamic Media中,您可以看到幾張跑步鞋的影像。 這是銷售和行銷希望客戶檢視為單一簡報的產品線系列:影像集。

正在建立影像集
開始建立影像集。

若要建立影像集,請從​ 建立 ​下拉式功能表選擇​影像集。 請注意,功能表上也有建立​混合媒體集、迴轉集​和​ 轉盤集 ​的選項。 您建立這些集合的方式與影像集大致相同。

混合媒體集可包含影像、色票集、迴轉集、視訊和自我調整視訊集。 試用。 迴轉集可讓使用者旋轉物件以進行檢查。 迴轉集可讓您從任何角度檢視重要的視覺細節。 試用。

直接建立影像集。 您新增要納入該集的影像資產。

正在建立影像集
影像集編輯器可讓您新增影像資產,以及重新排序影像資產在集中的外觀。

您必須為集命名。 請謹慎選擇名稱,因為您稍後無法編輯! 在上述範例中,集合稱為Running。 完成後,您會儲存集合。

這是Experience Manager Assets中的Running影像集。

Experience Manager Assets中的執行中影像集,卡片檢視
Experience Manager Assets卡片檢視中的Running影像集。

建立影像集、混合媒體集、迴轉集或其他互動媒體後,可預覽其外觀和為客戶執行的動作。 Dynamic Media有許多內建的檢視器可讓您這麼做。

首先,請選取影像集以在預覽中開啟它,如下列範例所示。

已選取檢視器選項,預覽中設定的執行中影像
已選取檢視器選項,預覽中設定的Running影像。

請注意,在預覽中,您可以選取跑步鞋色票,並放大和縮小鞋子。 若要將檢視器套用至集合,請從下拉式功能表中選取​檢視器。

套用了彈出式檢視器的執行中影像集
套用彈出式檢視器的Running影像集。

在此案例中,已選取Flyout檢視器。 此時,您可以預覽檢視器中設定的影像。 但是,最好在瀏覽器中看到客戶的視覺。 您選取左下方的​URL,然後複製URL並貼至瀏覽器。 試用。

單一URL可讓您在網站上所需的位置使用影像集和檢視器。 您在上一個範例中注意到​ Embed ​位於URL按鈕的右側。 選取​內嵌,即可複製此影像集/檢視器的程式碼,並將其新增至網頁或Experience Manager Sites元件。

彈出式檢視器是預設的標準檢視器,您可以編輯其屬性。 或者,就像建立影像預設集一樣,您可以建立自己的自訂檢視器。

現在,假設您的銷售和行銷團隊不偏好彈出式檢視器。 他們喜歡縮放功能,但他們希望客戶能在鞋子上直接看到縮放效果。 在這種情況下,您可以將InlineZoom檢視器套用至影像集,然後將其URL複製並貼到瀏覽器中,以檢視其行為。 試用。

當您將滑鼠指標移到鞋上時,影像會放大,當您移動指標時,您可以看到更多細節。 此縮放效果取決於最初上傳至Dynamic Media的影像大小。

當您認為您的角色是消費者,或您在專業角色中工作時,以及當您造訪不同的網站時,您會看到這些功能的範例。 請思考這如何完成,以及如何在您自己的工作和您公司的網站上使用Dynamic Media的功能。

您可以閱讀影像集和檢視器的相關資訊。 讓我們看看其他幾個檢視器,並在單一資產上試用。 若要重設檢視器,請按一下左下角的​ 重新整理 ​按鈕。

  • ZoomVertical_dark檢視器已套用至影像資產。 試用。
  • Zoom_light檢視器已套用至影像。 試用。

選擇性 — 瞭解更多

若要進一步瞭解您所閱讀的內容,請使用以下資料更詳細地探索概念。 否則,您的Dynamic Media歷程已完成!

動態媒體教學課程

Dynamic Media檢視器

recommendation-more-help
experience-manager-cloud-service-help-main-toc