AEMのImageコンポーネントについて

AEMのImageコンポーネントは、ページのオーサリングでよく使われる汎用コンポーネントの一つです。

f:id:www0532:20210728160947p:plain

このコンポーネントのプロパティ設定では、「タイトル」、「代替テキスト」が未入力の場合、画像ファイルの「フィアル名」がHTMLの title、alt 属性に設定されてしまう事象があります。

<img src="/content/test/_jcr_content/1627455779321.jpg" alt="dog-103.jpg" title="dog-103.jpg" class="cq-dd-image">

そして、画像にカーソルを当てた時、ファイル名のポップアップが表示されています。

f:id:www0532:20210728161614p:plain

これから、AEMのImageコンポーネントをカスタマイズして、事象を解消する方法を紹介します。

一先ず、Imageコンポーネントソースコードを/libs配下から、/appsにコピーしてオーバーライドします。

コピー元

/libs/foundation/components/image/image.jsp

コピー先

/apps/foundation/components/image/image.jsp

ここで、「タイトル」、「代替テキスト」が未入力の場合、HTMLの title、alt 属性自体が出力しないように改修します。

    //画像ファイルのファイル名を取得する
    String fileName = image.getFileName();
    //Titleが未設定の場合、Title属性自体を削除する
    if(fileName && properties.get("jcr:title", "").length() == 0){
        imgStr = imgStr.replace("title=\"" + fileName + "\"", "");
    }
    //Alt Textが未設定の場合、Alt属性自体を削除する
    if(fileName && properties.get("alt", "").length() == 0){
        imgStr = imgStr.replace("alt=\"" + fileName + "\"", "");
    }

生成したHTMLを見ると、「タイトル」、「代替テキスト」が未入力の場合、title、alt 属性自体が出力されていない。

<img src="/content/test/_jcr_content/1627455779321.jpg" class="cq-dd-image">

画像にカーソルを当てた時、ファイル名のポップアップが表示されていません。

f:id:www0532:20210728163355p:plain