AEMのImageコンポーネントについて
AEMのImageコンポーネントは、ページのオーサリングでよく使われる汎用コンポーネントの一つです。
このコンポーネントのプロパティ設定では、「タイトル」、「代替テキスト」が未入力の場合、画像ファイルの「フィアル名」がHTMLの title、alt 属性に設定されてしまう事象があります。
<img src="/content/test/_jcr_content/1627455779321.jpg" alt="dog-103.jpg" title="dog-103.jpg" class="cq-dd-image">
そして、画像にカーソルを当てた時、ファイル名のポップアップが表示されています。
これから、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">
画像にカーソルを当てた時、ファイル名のポップアップが表示されていません。