본문 내용에 이미지맵 태그 사용 htmlpurifier usemap, Image map - 그누보드팁

본문 바로가기
전체검색

그누보드팁

그누보드, 영카트 초보 제작자분들을 위한 다양한 스킨 제작 활용 팁을 공유합니다.

본문 내용에 이미지맵 태그 사용 htmlpurifier usemap, Image map

관리자 19-02-23 17:29

그누보드 게시판 본문 내용은 htmlpurifier 플러그인이 적용되어 있습니다.

그래서 이미지맵 태그는 작동하지 않는데 사용할 수 있게 수정하는 방법입니다.



수정 파일 : lib/common.lib.php



아래 함수를 찾은 후


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




## 위치 참고 ##


4030f928d8ad490d9091f4e6bd53965e_1550910571_0814.png



모바일 페이지 또는 반응형 사이트에 이미지 크기가 고정 사이즈가 아닌 %로 지정되어 있다면 추가 수정이 필요합니다.

Image Map Resize 를 위 팁과 같이 적용해봤는데 게시판 본문 이미지맵에서도 정상적으로 작동하네요.

http://gnustudy.com/bbs/board.php?bo_table=sitelink&wr_id=35 


Image Map Resize 적용 방법
http://gnustudy.com/bbs/board.php?bo_table=skin_board&wr_id=201




출처 : https://sir.kr/g5_tip/3099

로그인 후 댓글 작성 가능합니다.

로그인

로그인 후 글 작성 가능합니다.
그누스킨닷컴

그누스터디는 그누보드, 영카트를 이용하시는 초보 사용자를 위한 정보를 공유합니다.

E-MAIL : gnustudy@naver.com / 카카오톡 : gnustudy / 텔레그램 : gnustudy
제작 문의를 제외한 일반 문의는 QA 게시판을 이용해주세요.

Copyright gnustudy.com All rights reserved.