JavaScript 隱藏 Jet Elements 圖片排版中的 Fallback 圖片

盡可能地讓使用者防呆設計

在使用 Jet Elements 進行網頁設計時，我們有時會設置一些圖片欄位，讓網站的管理者可以自訂這些圖片。然而，在某些情況下，當管理者未上傳任何圖片時，系統會自動使用一個預設的 fallback 圖片。這個功能雖然有其用處，但在某些設計上我們可能希望當觸發 fallback 圖片時，直接隱藏這個圖片區塊，以保持網頁的整體美觀與一致性。在這次的案例中，客戶會有一個需求動態的顯示文章的插圖，然而插圖的呈現又要有自動排板，導致整體的作業複雜了起來，因此採用了幾個方式去完成：

1. JetEngine 的 Meta Box 產生固定的圖片上傳欄位
2. Jet Elements 的 Image Layout 小工具去客製化圖片的排版
3. 設定好 Image Layout 的樣式動態標籤 Dynamic Tags 指定你的 Meta box 欄位
4. 設定好 Image layout 的 fallback 圖片

Jave Script 程式碼

以下是一段簡單的 JavaScript 程式碼，用於實現上述需求。這段程式碼會在網頁載入完畢後執行，檢查頁面上所有的圖片區塊，並隱藏那些使用了 fallback 圖片的區塊。

document.addEventListener("DOMContentLoaded", function() {
    // 指定 fallback 圖片的 URL
    var fallbackImageUrl = 'https://yourwebsite.com/wp-content/uploads/default-fallback-image.png';
    // 選取所有圖片區塊
    var imageItems = document.querySelectorAll('.elementor-element .your-custom-class .jet-images-layout__item');

    imageItems.forEach(function(item) {
        var image = item.querySelector('.jet-images-layout__image-instance');
        if (image && image.src === fallbackImageUrl) {
            // 如果圖片區塊中的圖片是 fallback 圖片，則隱藏該圖片區塊
            item.style.display = 'none';
        }
    });
});

運作原理

1. 綁定 DOMContentLoaded 事件：這確保了我們的程式碼會在網頁所有的 HTML 元素都完全加載之後才執行。
2. 指定 Fallback 圖片的 URL：這是你設定為 fallback 圖片的網址，當圖片區塊中的圖片是這個 URL 時，我們才進行隱藏操作。
3. 選取特定的圖片區塊：這裡的選擇器 .elementor-element .your-custom-class .jet-images-layout__item 應根據你的 Image Layout 區塊取得 CSS，以準確選取到你希望檢查的圖片區塊。
4. 隱藏使用 Fallback 圖片的區塊：透過設置 display: none CSS 屬性，我們可以隱藏那些包含 fallback 圖片的圖片區塊。

這種方式的好處在於，無需修改任何後端邏輯或者 WordPress 主題的 PHP 代碼，就可以達成對特定圖片區塊的動態控制。同時，這種方法也提供了高度的自定義性，因為你可以根據自己的需求，修改選取器或者是隱藏條件。

在實際應用時，請根據你的網站結構和使用的外掛，適當調整程式碼中的選取器和 Fallback 圖片的 URL。這樣，你就可以有效地管理你的網頁元素，並提升使用者的瀏覽體驗。