팁·활용

• 목록
• 스크랩

그누보드 스마트에디터 이미지 title 속성 생성 문제

그누보드 스마트에디터로 이미지를 첨부하면 파일 이름이 이미지 태그의 title 속성으로 함께 저장되어 DB에 남습니다. 이 때문에 원치 않는 파일명이 마우스오버 등으로 노출될 수 있습니다.

적용 전 사전 백업 및 주의사항

코드를 수정하기 전 원본 파일을 반드시 백업하여 문제 발생 시 원상복구할 수 있도록 준비합니다. 사용 중인 빌더에 따라 스킨 파일 구조가 다를 수 있으므로 신중하게 적용해야 합니다.

스마트에디터 업로드 파일 수정

에디터 업로드 시 title 속성이 저장되지 않도록 하려면 관련 플러그인 파일을 수정합니다.

/plugin/editor/smarteditor2/photo_uploader/plugin/hp_SE2M_AttachQuickPhoto.js

파일 하단에 있는 var sTag 정의 부분에서 title="{=sName}" 부분을 삭제하거나 빈 값으로 처리합니다.

var sTag = '<img src="{=sOriginalImageURL}" />';

썸네일 이미지 alt 및 스크린리더 대응 스크립트 확인

파일을 수정해도 일부 썸네일 이미지에는 여전히 속성이 남을 수 있습니다. 이는 /js/common.js 파일 내 스크린리더 대응 스크립트가 alt 값만 있는 링크 이미지에 마우스오버 시 title 값을 부여하기 때문입니다.

$(function() { $('a img').mouseover(function() { $a_img_title = $(this).attr('alt'); $(this).attr('title', $a_img_title); }).mouseout(function() { $(this).attr('title', ''); }); });

또한 썸네일을 생성하는 /lib/thumbnail.lib.php 파일에서는 $thumb_tag 생성 로직에 alt 속성이 포함되어 있습니다. 필요에 따라 이 부분을 비워두거나 원하는 문구로 변경할 수 있습니다.

기존 등록된 이미지 일괄 제어

이미 DB에 저장되어 버린 기존 게시물의 이미지 속성을 일괄적으로 제어하려면, 게시판 스킨의 view.skin.php 파일 하단 스크립트에 jQuery 코드를 추가합니다.

$(function() { $("#bo_v_con img").each(function() { $(this).attr("title", ""); $(this).attr("alt", ""); }); });

빈 값 대신 "이미지" 등 고정된 문구를 직접 지정할 수도 있습니다.

적용 후 동작 확인 및 복구 방법

수정 후 새로운 이미지를 업로드하고 게시글을 확인하여 title 속성이 더 이상 노출되지 않는지 점검합니다. 문제가 발생할 경우 백업해 둔 원본 파일로 복원합니다.