그누보드 본문 HTMLPurifier 이미지맵 태그(usemap, map, area) 허용 방법

• 목록
• 스크랩

그누보드 본문 HTMLPurifier 이미지맵 태그(usemap, map, area) 허용 방법

그누보드 게시판 본문에서 이미지맵 태그가 정상 작동하지 않을 때 HTMLPurifier 설정을 수정하여 usemap, map, area 태그를 허용하는 방법을 안내합니다.

그누보드 본문 이미지맵 태그 허용 설정 방법

그누보드 게시판 본문 내용에 이미지맵(usemap, map, area) 태그가 기본 적용된 HTMLPurifier 플러그인에 의해 차단되어 작동하지 않을 때, HTMLPurifier 설정을 확장하여 해당 태그와 속성을 허용하도록 수정할 수 있습니다.

수정 파일 및 위치

• 수정할 파일: lib/common.lib.php
• 찾을 함수: html_purifier($html)

코드 추가 방법

lib/common.lib.php 파일 내부의 html_purifier($html) 함수 안에서 아래와 같은 기존 설정 코드 부근을 찾습니다.

$config->set('Attr.AllowedFrameTargets', array('_blank')); //유튜브, 비메오 전체화면 가능하게 하기
$config->set('Filter.Custom', array(new HTMLPurifier_Filter_Iframevideo()));

위 코드 바로 아래에 다음 설정 코드를 추가합니다.

$def = $config->getHTMLDefinition(true);
// Add usemap attribute to img tag
$def->addAttribute('img', 'usemap', 'CDATA');
// Add map tag
$map = $def->addElement(
 'map',
 'Block',
 'Flow',
 'Common',
 array(
 'name' => 'CDATA',
 'id' => 'ID',
 'title' => 'CDATA',
 )
);
$map->excludes = array('map' => true);
// Add area tag
$area = $def->addElement(
 'area',
 'Block',
 'Empty',
 'Common',
 array(
 'name' => 'CDATA',
 'id' => 'ID',
 'alt' => 'Text',
 'coords' => 'CDATA',
 'accesskey' => 'Character',
 'nohref' => new HTMLPurifier_AttrDef_Enum(array('nohref')),
 'href' => 'URI',
 'shape' => new HTMLPurifier_AttrDef_Enum(array('rect', 'circle', 'poly', 'default')),
 'tabindex' => 'Number',
 'target' => new HTMLPurifier_AttrDef_Enum(array('_blank', '_self', '_target', '_top'))
 )
);
$area->excludes = array('area' => true);

주의 사항 및 다음 행동

• 모바일 페이지나 반응형 사이트에서 이미지 크기가 고정 사이즈가 아닌 % 단위로 지정되어 있는 경우, 이미지맵 좌표가 어긋날 수 있으므로 추가적인 대응(예: Image Map Resize 등 반응형 이미지맵 라이브러리 적용)이 필요할 수 있습니다.
• 코드를 수정하기 전 lib/common.lib.php 파일을 백업한 뒤 진행하는 것을 권장합니다.

HTMLPurifier 이미지맵 태그 허용 설정 방법

그누보드 게시판 본문에서 이미지맵(usemap, map, area) 태그가 정상적으로 작동하도록 하려면 lib/common.lib.php 파일의 html_purifier 함수 내에서 HTMLDefinition을 확장해야 합니다.

수정 위치

• 파일 경로: lib/common.lib.php
• 찾을 함수: function html_purifier($html) 내부의 HTMLPurifier 설정 코드 영역

추가할 코드

html_purifier 함수 안에서 $config->set('Filter.Custom',...); 코드 바로 아래쯤에 다음 코드를 전체 추가합니다.

$def = $config->getHTMLDefinition(true);
// Add usemap attribute to img tag
$def->addAttribute('img', 'usemap', 'CDATA');
// Add map tag
$map = $def->addElement( 
 'map', // name 
 'Block', // content set 
 'Flow', // allowed children 
 'Common', // attribute collection 
 array(// attributes 
 'name' => 'CDATA', 
 'id' => 'ID', 
 'title' => 'CDATA', 
 ) 
);
$map->excludes = array('map' => true);
// Add area tag
$area = $def->addElement( 
 'area', // name 
 'Block', // content set 
 'Empty', // don't allow children 
 'Common', // attribute collection 
 array(// attributes 
 'name' => 'CDATA', 
 'id' => 'ID', 
 'alt' => 'Text', 
 'coords' => 'CDATA', 
 'accesskey' => 'Character', 
 'nohref' => new HTMLPurifier_AttrDef_Enum(array('nohref')), 
 'href' => 'URI', 
 'shape' => new HTMLPurifier_AttrDef_Enum(array('rect', 'circle', 'poly', 'default')), 
 'tabindex' => 'Number', 
 'target' => new HTMLPurifier_AttrDef_Enum(array('_blank', '_self', '_target', '_top')) 
 ) 
);
$area->excludes = array('area' => true);

주의사항 및 다음 행동

• 모바일 페이지나 반응형 사이트에서 고정 사이즈가 아닌 % 단위로 이미지가 지정된 경우, 추가 수정 방법의 구체적인 소스코드가 원문에 누락되어 있으므로 별도의 반응형 이미지맵 대응(Image Map Resize 등) 적용을 함께 검토해야 합니다.
• 코드를 수정한 뒤에는 이미지맵 태그가 포함된 게시글을 직접 등록하여 정상적으로 출력되고 링크가 작동하는지 확인합니다.

그누보드 본문 이미지맵 태그 허용 방법

그누보드 게시판 본문 내용에는 기본적으로 HTMLPurifier 플러그인이 적용되어 있어 이미지맵 태그(usemap, map, area)가 작동하지 않습니다. 이를 사용 가능하도록 수정하려면 lib/common.lib.php 파일을 수정해야 합니다.

수정 파일 및 위치

• 수정 파일: lib/common.lib.php
• 찾을 코드: html_purifier($html) 함수 내부에서 $config->set('Attr.AllowedFrameTargets', array('_blank')); 또는 HTMLPurifier_Filter_Iframevideo() 관련 코드가 있는 위치 바로 아래에 코드를 추가합니다.

추가할 코드 내용

$def = $config->getHTMLDefinition(true);
// Add usemap attribute to img tag
$def->addAttribute('img', 'usemap', 'CDATA');
// Add map tag
$map = $def->addElement(
 'map',
 'Block',
 'Flow',
 'Common',
 array(
 'name' => 'CDATA',
 'id' => 'ID',
 'title' => 'CDATA',
 )
);
$map->excludes = array('map' => true);
// Add area tag
$area = $def->addElement(
 'area',
 'Block',
 'Empty',
 'Common',
 array(
 'name' => 'CDATA',
 'id' => 'ID',
 'alt' => 'Text',
 'coords' => 'CDATA',
 'accesskey' => 'Character',
 'nohref' => new HTMLPurifier_AttrDef_Enum(array('nohref')),
 'href' => 'URI',
 'shape' => new HTMLPurifier_AttrDef_Enum(array('rect', 'circle', 'poly', 'default')),
 'tabindex' => 'Number',
 'target' => new HTMLPurifier_AttrDef_Enum(array('_blank', '_self', '_target', '_top'))
 )
);
$area->excludes = array('area' => true);

모바일 및 반응형 사이트 주의사항

모바일 페이지 또는 반응형 사이트에서 이미지 크기가 고정 사이즈가 아닌 % 단위로 지정되어 있는 경우 좌표가 맞지 않아 추가 수정이 필요할 수 있습니다. 이 경우 Image Map Resize 스크립트나 플러그인을 적용하여 해결할 수 있습니다.

내 상황

그누보드 게시판 본문에 이미지맵(usemap, map, area) 태그를 넣었으나 HTMLPurifier 필터링으로 인해 태그가 제거되거나 작동하지 않음.

선택 기준

• 필터 설정 확장: lib/common.lib.php의 html_purifier 함수 내에서 HTMLDefinition을 확장하여 해당 태그와 속성을 화이트리스트에 추가.
• 반응형 대응: 이미지 크기가 % 단위로 변하는 환경이라면, 좌표 어긋남 방지를 위해 Image Map Resize 라이브러리 추가 적용 필요.

다음 행동

1. 백업: lib/common.lib.php 파일을 안전한 곳에 복사.
2. 코드 추가: html_purifier 함수 내 $config->set('Filter.Custom',...) 코드 바로 아래에 map과 area 태그를 정의하는 코드를 삽입.
3. 검증: 이미지맵이 포함된 게시글을 작성하여 브라우저에서 링크 영역이 정상 작동하는지 확인.
4. 반응형 보완: 모바일 등에서 좌표가 맞지 않으면 imageMapResizer.min.js를 테마에 로드하고 스크립트를 실행.

Q. 이미지맵 태그를 추가했는데도 여전히 작동하지 않습니다.

• 예외: lib/common.lib.php 수정 후에도 캐시 문제로 이전 설정이 유지될 수 있습니다. 서버 캐시를 삭제하거나, 게시글을 새로 작성하여 확인하십시오.
• 대안: map 태그의 name 속성과 img 태그의 usemap 속성값이 #을 포함하여 정확히 일치하는지 다시 확인하십시오.

Q. 반응형 환경에서 좌표가 어긋나는 문제를 어떻게 해결하나요?

• 대안: area 태그의 coords는 고정 픽셀값이므로, Image Map Resize 라이브러리를 사용하여 화면 크기 변화에 따라 좌표를 동적으로 재계산해야 합니다. gnustudy.com 등에서 제공하는 적용 가이드를 참고하여 테마의 head.sub.php에 스크립트를 로드하십시오.

함께 보면 좋은 글

• 그누보드 반응형 사이트에서 이미지맵(Image Map)이 깨질 때 해결하는 방법
• 그누보드 HTMLPurifier 외부 동영상 iframe 허용 도메인 설정 방법
• 그누보드 반응형 웹에서 이미지맵(imageMap) 링크 영역 유지하는 방법

참고자료

기타 참고자료

• gnustudy.com — 본문 내용에 이미지맵 태그 사용 htmlpurifier usemap, Image map - 그누보드팁
• gnustudy.com — 모바일 페이지나 반응형 사이트에 이미지맵 적용 Image Map Resize 사용 - 그누보드팁