그누보드 스마트에디터 및 썸네일 이미지 title 및 alt 속성 제어 방법

• 목록
• 스크랩

그누보드 스마트에디터 및 썸네일 이미지 title 및 alt 속성 제어 방법

그누보드를 운영하면서 스마트에디터로 업로드한 이미지와 썸네일에 파일명이나 원치 않는 속성이 노출되는 문제를 해결하고, 신규 및 기존 게시물의 이미지 속성을 제어하는 방법을 알아봅니다.

그누보드 스마트에디터 업로드 이미지의 title 속성 제거 방법

그누보드 스마트에디터로 이미지를 첨부할 때 파일 이름이 이미지 태그의 title 속성으로 함께 저장되어 DB에 남는 문제를 해결하려면 관련 플러그인 파일을 수정해야 합니다.

수정 대상 파일 경로

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

적용 방법

1. 코드를 수정하기 전 원본 파일을 반드시 백업하여 문제 발생 시 원상복구할 수 있도록 준비합니다. 사용 중인 빌더에 따라 스킨 파일 구조가 다를 수 있으므로 신중하게 적용해야 합니다.
2. 위 경로의 파일 하단에 있는 var sTag 정의 부분에서 title="{=sName}" 부분을 삭제하거나 빈 값으로 처리합니다.

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

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

스마트에디터 수정 후에도 썸네일에 title 및 alt 속성이 남는 이유와 확인 위치

에디터 관련 파일을 수정하더라도 일부 썸네일 이미지에 속성이 계속 남아 있다면, 스크린리더 대응 스크립트와 썸네일 생성 라이브러리에서 추가로 속성을 부여하고 있기 때문입니다.

1. /js/common.js 파일 확인

/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', '');
    });
});

2. /lib/thumbnail.lib.php 파일 확인

썸네일을 생성하는 /lib/thumbnail.lib.php 파일 내 $thumb_tag 생성 로직에서 alt 속성을 제어할 수 있습니다. 해당 파일에서 alt="가 포함된 코드를 찾아 원하는 문구로 수정하거나 빈 값(alt="")으로 변경하십시오.

// 예시: alt 속성을 빈 값으로 설정
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="" width="'.$width.'" height="'.$height.'"/>';

코드 수정 전후의 사전 백업 및 동작 확인 방법

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

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

함께 보면 좋은 글

• 그누보드 첨부 이미지 썸네일 alt 태그에 글 제목 자동 삽입하기
• 그누보드 스마트에디터 이미지 경로를 상대 경로로 변경하는 방법
• 그누보드4 최신글 스킨 외부 이미지 썸네일 자동 생성 및 출력 방법

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 스마트에디터 및 썸네일 이미지의 title 및 alt 속성 제어하기
• sir.kr — 에디터로 첨부한 이미지 알트값 제목으로 바꾸고 싶습니다 - SIR - 개발자 커뮤니티
• gnustudy.com — 스마트에디터로 이미지 첨부할 때 title 값 삭제하기 - 그누보드팁